I have a problem with google charts. I developed a web page with 5 (generated with php) and 5 ID for each :
echo "<div id = \"ID\" style=\"display:none;\">"
I also have 5 json arrays with all the information. I show in each the data in a table but I would like also show a graph with my data. I tried to do in this way (but it doesn't work):
for ($i = 0; $i<$n;$i++){
$jsonTable = json_encode(${'table'.$Result_array[$i][1]});
$ID = $Result_array[$i][1]; //ID for the div
echo "<script type=\"text/javascript\">
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart());
function drawChart() {
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(".$jsonTable.");
var options = {
title: 'Company Performance',
hAxis: {title: 'L value', titleTextStyle: {color: 'red'}, gridlines:{count:10} },
vAxis: {
title: \"I rms\",
maxValue:1.5,
gridlines:{count:10}
}
};
// Instantiate and draw our chart, passing in some options.
// Do not forget to check your div ID
var chart = new google.visualization.ColumnChart(document.getElementById('".$ID."'));
chart.draw(data, options);
}
}
</script>";
}
If I use this code only for 1 table, works fine, but when I use a loop and try to generate multiple graphs, it doesn't work. Anyone could help me? thanks!
P.S: Maybe I also have to explain that, first of all, I have a table with my 5 results, and when I click, I have a onclik function to unhide the appropiate . This works always (with graphs and without it) but never display the graphs....
Where are the 5 ids
you are looping through only one id
var chart = new google.visualization.ColumnChart(document.getElementById('".$ID."'));
It should be like this
var chart = new google.visualization.ColumnChart(document.getElementById('".$ID."_".$i"'));
and add the div like
echo "<div id = \"ID_0\" style=\"display:none;\">"
echo "<div id = \"ID_1\" style=\"display:none;\">"
echo "<div id = \"ID_2\" style=\"display:none;\">"
echo "<div id = \"ID_3\" style=\"display:none;\">"
echo "<div id = \"ID_4\" style=\"display:none;\">"