More than two Google Charts on a single page?
Question
I've been struggling with this problem for a while now, and it seems like google has made a lot of minor changes to the Google Charts API over the years, which has been making it even harder to find an answer for why my charts aren't working.
I am simply trying to display more than two of the same chart type (Bar graphs) on a single page. Just today, I found a solution that allowed me to display 2 charts at once (link: " Google Charts stops drawing after first chart "), but this was only a minor win because I really need more than 2 charts to show, and this solution just forces one graph to render before the other.
Here is my current code:
Javascript
google.load('visualization', '1', {packages: ['corechart', 'line', 'bar']}); google.setOnLoadCallback(drawStuff); function drawStuff() { // Courses_Played Data var data = new google.visualization.arrayToDataTable([ ['', 'Number of Rounds Played'], ["Ken McDonald", 10], ["ASU Karsten", 8], ["TPC Scotts...", 7], ["Ahwatukee", 3], ['Other', 3] ]); // Courses_played Options var options = { title: '', width: 440, height: 215, legend: { position: 'none' }, axes: {x: {0: { side: 'bottom' }}}, bar: { groupWidth: "70%" }, colors: ['darkgreen'], }; // Course_Scores Data var data2 = new google.visualization.arrayToDataTable([ ['', 'Number of Rounds Played'], ["TPC Scotts...", 81], ["ASU Karst...", 83], ["Ken McDonald", 87], ["Ahwatukee", 90], ]); //Course_Scores Options var options2 = { title: '', width: 440, height: 215, legend: { position: 'none' }, axes: {x: {0: { side: 'bottom' }}}, vAxis:{ viewWindow:{ min:60 }}, bar: { groupWidth: "70%" }, colors: ['darkgreen'], }; var chart = new google.charts.Bar(document.getElementById('Courses_Played')); google.visualization.events.addOneTimeListener(chart, 'ready', function(){ var chart2 = new google.charts.Bar(document.getElementById('Course_Scores')); // Convert the Classic options to Material options. chart2.draw(data2, google.charts.Bar.convertOptions(options2)); }); chart.draw(data, google.charts.Bar.convertOptions(options)); };
Again, this code currently works, but only because I used a solution that works for just two graphs. The problem seems to be in the final lines of code, because forcing chart2 to render before the first chart is what got it working. I just don't get what I need to do to allow for three or more graphs. Is there a way to force any number of charts to render one before the other?
4 answers
solution1
1 2016-04-13 15:19:29
The problem in Google Charts is that you can call google.charts.load() only once. So you need to include all the packages in this single function call and call this from head of the webpage.
You can include multiple packages like this:
<head><script type="text/javascript">
google.charts.load("current", {packages:["corechart","bar"]});
</script>
</head>
This solved my problem and allowed me to display multiple charts on a single page without changing any code.
To verify check this: https://developers.google.com/chart/interactive/docs/basic_load_libs#basic-library-loading
solution2
0 2015-10-15 14:52:57
I think you're having a problem with the current version, which has issues.
You shouldn't need to wait for one chart to load before loading another.
Here is an example that loads version 41 --> all 3 charts draw, without waiting on another.
google.charts.load('41', {packages: ['bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { // Courses_Played Data var data = new google.visualization.arrayToDataTable([ ['', 'Number of Rounds Played'], ["Ken McDonald", 10], ["ASU Karsten", 8], ["TPC Scotts...", 7], ["Ahwatukee", 3], ['Other', 3] ]); // Courses_played Options var options = { title: '', width: 440, height: 215, legend: { position: 'none' }, axes: {x: {0: { side: 'bottom' }}}, bar: { groupWidth: "70%" }, colors: ['darkgreen'], }; // Courses_Played2014 Data var data3 = new google.visualization.arrayToDataTable([ ['', 'Number of Rounds Played'], ["Ken McDonald", 14], ["ASU Karsten", 12], ["TPC Scotts...", 11], ["Ahwatukee", 7], ['Other', 7] ]); // Courses_played2014 Options var options3 = { title: '', width: 440, height: 215, legend: { position: 'none' }, axes: {x: {0: { side: 'bottom' }}}, bar: { groupWidth: "70%" }, colors: ['darkgreen'], }; // Course_Scores Data var data2 = new google.visualization.arrayToDataTable([ ['', 'Number of Rounds Played'], ["TPC Scotts...", 81], ["ASU Karst...", 83], ["Ken McDonald", 87], ["Ahwatukee", 90], ]); //Course_Scores Options var options2 = { title: '', width: 440, height: 215, legend: { position: 'none' }, axes: {x: {0: { side: 'bottom' }}}, vAxis:{ viewWindow:{ min:60 }}, bar: { groupWidth: "70%" }, colors: ['darkgreen'], }; var chart = new google.charts.Bar(document.getElementById('Courses_Played')); var chart2 = new google.charts.Bar(document.getElementById('Course_Scores')); var chart3 = new google.charts.Bar(document.getElementById('Courses_Played2014')); chart.draw(data, google.charts.Bar.convertOptions(options)); chart2.draw(data2, google.charts.Bar.convertOptions(options2)); chart3.draw(data3, google.charts.Bar.convertOptions(options3)); };
<script src="https://www.gstatic.com/charts/loader.js"></script> <script src="https://www.google.com/jsapi"></script> <div id="Courses_Played"></div> <div id="Courses_Played2014"></div> <div id="Course_Scores"></div>
solution3
0 2022-07-27 19:16:57
Am using gviz_api python module to load data. In case helps: change arrayToDataTable to DataTable
solution4
-1 2015-10-14 10:19:11
The following example shows how to render 3 Google Charts (of google.charts.Bar type) on a single page:
google.load('visualization', '1', { packages: ['corechart', 'line', 'bar'] }); google.setOnLoadCallback(drawCharts); function drawCharts() { var chartsData = [ { 'data': [ ['', 'Number of Rounds Played'], ["Ken McDonald", 10], ["ASU Karsten", 8], ["TPC Scotts...", 7], ["Ahwatukee", 3], ['Other', 3] ], 'options': { title: '', width: 440, height: 215, legend: { position: 'none' }, axes: { x: { 0: { side: 'bottom' } } }, bar: { groupWidth: "70%" }, colors: ['darkgreen'], }, 'chartDivId' : 'Courses_Played' }, { 'data': [ ['', 'Number of Rounds Played'], ["TPC Scotts...", 81], ["ASU Karst...", 83], ["Ken McDonald", 87], ["Ahwatukee", 90], ], 'options': { title: '', width: 440, height: 215, legend: { position: 'none' }, axes: { x: { 0: { side: 'bottom' } } }, vAxis: { viewWindow: { min: 60 } }, bar: { groupWidth: "70%" }, colors: ['darkgreen'], }, 'chartDivId' : 'Course_Scores' }, { 'data': [ ['', 'Number of Rounds Played in 2014'], ["Ken McDonald", 5], ["ASU Karsten", 4], ["TPC Scotts...", 7], ["Ahwatukee", 4], ['Other', 6] ], 'options': { title: '', width: 440, height: 215, legend: { position: 'none' }, axes: { x: { 0: { side: 'bottom' } } }, bar: { groupWidth: "70%" }, colors: ['darkgreen'], }, 'chartDivId' : 'Courses_Played2014' }, ]; drawBarCharts(chartsData); }; function drawBarCharts(chartsData,index) { var curIndex = index || 0; var chartData = chartsData[curIndex]; var dataTable = new google.visualization.arrayToDataTable(chartData.data); var chart = new google.charts.Bar(document.getElementById(chartData.chartDivId)); google.visualization.events.addOneTimeListener(chart, 'ready', function () { if (curIndex < chartsData.length - 1) drawBarCharts(chartsData, curIndex + 1); }); chart.draw(dataTable, google.charts.Bar.convertOptions(chartData.options)); }
<script type="text/javascript" src="https://www.google.com/jsapi"></script> <div id="Courses_Played"></div> <div id="Courses_Played2014"></div> <div id="Course_Scores"></div>
or using this way where charts are inserted on the page dynamically
google.load('visualization', '1', { packages: ['corechart', 'line', 'bar'] }); google.setOnLoadCallback(drawCharts); function drawCharts() { var chartsData = [ { 'data': [ ['', 'Number of Rounds Played'], ["Ken McDonald", 10], ["ASU Karsten", 8], ["TPC Scotts...", 7], ["Ahwatukee", 3], ['Other', 3] ], 'options': { title: '', width: 440, height: 215, legend: { position: 'none' }, axes: { x: { 0: { side: 'bottom' } } }, bar: { groupWidth: "70%" }, colors: ['darkgreen'], }, 'chartDivId' : 'Courses_Played' }, { 'data': [ ['', 'Number of Rounds Played'], ["TPC Scotts...", 81], ["ASU Karst...", 83], ["Ken McDonald", 87], ["Ahwatukee", 90], ], 'options': { title: '', width: 440, height: 215, legend: { position: 'none' }, axes: { x: { 0: { side: 'bottom' } } }, vAxis: { viewWindow: { min: 60 } }, bar: { groupWidth: "70%" }, colors: ['darkgreen'], }, 'chartDivId' : 'Course_Scores' }, { 'data': [ ['', 'Number of Rounds Played in 2014'], ["Ken McDonald", 5], ["ASU Karsten", 4], ["TPC Scotts...", 7], ["Ahwatukee", 4], ['Other', 6] ], 'options': { title: '', width: 440, height: 215, legend: { position: 'none' }, axes: { x: { 0: { side: 'bottom' } } }, bar: { groupWidth: "70%" }, colors: ['darkgreen'], }, 'chartDivId' : 'Courses_Played2014' }, ]; drawBarCharts(chartsData); }; function drawBarCharts(chartsData,index) { var curIndex = index || 0; var chartData = chartsData[curIndex]; var dataTable = new google.visualization.arrayToDataTable(chartData.data); var chartDiv = document.createElement('div'); chartDiv.id = chartData.chartDivId; document.getElementById('chartContainer').appendChild(chartDiv); var chart = new google.charts.Bar(document.getElementById(chartDiv.id)); google.visualization.events.addOneTimeListener(chart, 'ready', function () { if (curIndex < chartsData.length - 1) drawBarCharts(chartsData, curIndex + 1); }); chart.draw(dataTable, google.charts.Bar.convertOptions(chartData.options)); }
<script type="text/javascript" src="https://www.google.com/jsapi"></script> <div id="chartContainer"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.