Study project data visualisation graphics webpage doesn't work

Jérôme

unread,

Mar 13, 2021, 5:34:32 AM3/13/21

to Google Visualization API

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!

TP_Google_chart.html

Jérôme

unread,

Mar 13, 2021, 8:23:10 AM3/13/21

to Google Visualization API

Here the script :

<html>

<head>

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>

</body>

</html>

Ray Thomas

unread,

Mar 13, 2021, 8:11:23 PM3/13/21

to Google Visualization API

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

Jérôme

unread,

Mar 18, 2021, 6:32:21 AM3/18/21

to Google Visualization API

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

Reply all

Reply to author

Forward