Hello, thank you, yes there is an error message: [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/. send @ jquery.min.js:6 jquery.min.js:6 Access to XMLHttpRequest at 'file:///E:/DUT/BD%20avanc%C3%A9es/Google_chart/life_expectancy_continent.php' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https. send @ jquery.min.js:6 jquery.min.js:6 Failed to load resource: net::ERR_FAILED send @ jquery.min.js:6 jsapi_compiled_default_module.js:236 Uncaught (in promise) Error: Data for arrayToDataTable is not an array. at Object.gvjs_Cj [as arrayToDataTable] (jsapi_compiled_default_module.js:236) at drawChart (TP_Google_chart.html:12)
Jerome Cullet Le dimanche 14 mars 2021 à 02:11:23 UTC+1, Ray Thomas a écrit : > Are you getting any sort of error message in the console? F12 in most > browsers and Ctrl+Shift+I in Opera. > > I can't say for certain but it might be the lines async: false. That's > been depreciated - https://xhr.spec.whatwg.org/#the-open()-method and > https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests > - > so that might be the problem. > > If that is the problem, one solution is to use the ready event handler - > https://developers.google.com/chart/interactive/docs/events#the-ready-event > put drawing the charts inside a setTimeout function with the time set to 0, > which also seems to work - Multiple Data Tables, Multiple Charts at > http://brisray.com/google-charts/multiple.htm > > Ray > On Saturday, March 13, 2021 at 8:23:10 AM UTC-5 cullet...@gmail.com wrote: > >> Here the script : >> <html> >> <head> >> <meta charset="utf-8"> >> <script type="text/javascript" src=" >> https://www.gstatic.com/charts/loader.js";></script> >> <script type="text/javascript" src=" >> https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js >> "></script> >> <script type="text/javascript"> >> google.charts.load("current", {packages: ["corechart", >> "geochart"]}); >> >> google.charts.setOnLoadCallback(drawChart); >> >> function drawChart(){ >> var data1 = google.visualization.arrayToDataTable( >> $.ajax({ >> url: "life_expectancy_continent.php", >> async: false >> }).responseJSON >> ); >> var options1 = { >> title: "Espérance de vie par continent (en %)", >> }; >> var chart1 = new >> google.visualization.BarChart(document.getElementById('Barchart')); >> chart1.draw(data1,options1); >> >> var data2 = google.visualization.arrayToDataTable( >> $.ajax({ >> url: "surface_population.php", >> async: false >> }).responseJSON >> ); >> var options2 = { >> title: "Surface d'un continent (en m²) en fonction de sa population", >> hAxis: {title:'Surface (en m²)'}, >> vAxis: {title:'Population du continent'} >> } >> var chart2 = new >> google.visualization.ScatterChart(document.getElementById('scatterplot')); >> chart2.draw(data2,options2); >> >> >> var data3 = google.visualization.arrayToDataTable( >> $.ajax({ >> url: "life_expectancy.php", >> async: false >> }).responseJSON >> ); >> >> var options3 = {title:"Carte du monde de l'espérance de vie (par >> pays)"}; >> >> var chart3 = new >> google.visualization.GeoChart(document.getElementById('map')); >> chart3.draw(data3, options3); >> >> var data4 = google.visualization.arrayToDataTable( >> $.ajax({ >> url: "life_expectancy_population_PNB.php", >> async: false >> }).responseJSON >> ); >> >> var options4 = { >> title: "Corrélation entre l'espérance de vie et le produit >> national brut et la population d'un pays", >> hAxis: {title: 'Life Expectancy'}, >> vAxis: {title: 'Fertility Rate'}, >> bubble: {textStyle: {fontSize: 11}} >> }; >> >> var chart4= new >> google.visualization.BubbleChart(document.getElementById('bbl_c')); >> chart4.draw(data4, options4); >> } >> </script> >> </head> >> <body> >> <div id="Barchart" style="width: 900px; height: 500px;"></div> >> <div id="scatterplot" style="width: 900px ; height: 500px;"></div> >> <div id="map" style="width: 900px; height: 500px;"></div> >> <div id="bbl_c" style="width: 900px; height: 500px;"></div> >> </body> >> </html> >> >> >> Le samedi 13 mars 2021 à 11:34:32 UTC+1, Jérôme a écrit : >> >>> Hello, >>> >>> I needed to code a webpage with graphics using Google chart linked with >>> a database and I get to display a webpage with the first graphic I coded >>> but when I added a 2nd graphic, nothing at all happen even the first >>> graphic I saw before didn't appear. The same when I added other graphics >>> between JavaScript tag. I tried to fix it but I don't know where is the >>> problem. I don't think the problem come from my.php files. Anyone can see >>> the problem in my Google chart code? >>> >>> Thank you! >>> >> -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/a7c5bdda-bfa4-497d-8fb7-23daf8495b48n%40googlegroups.com.
