Geek Answers Handbook

Google charts stop drawing after the first chart

What i want to do

Show multiple velvet on one page

What i have already done

Velvet was usually linear. Like Linecharts, I could show two diagrams on the same page without any problems. I used two separate drawChart () functions for them. Then I converted the diagrams to Barcharts (material design). Now it shows only one diagram. I already searched for the answer and found this: How to add two Google charts on one page? I follow this and it still does not work.

My code

<script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1.1", { packages: ["Bar"] }); google.setOnLoadCallback(drawChart); function drawChart() { var data1 = new google.visualization.DataTable(); data1.addColumn("string", "Key1"); data1.addColumn("number", "Value1"); data1.addRows([ ['2015.01', 65.5], ['2015.02', 52.6], ['2015.03', 45.5], ['2015.04', 40.7], ['2015.05', 68.7], ['2015.06', 56.4], ['2015.07', 38.4], ['2015.08', 45.2], ['2015.09', 45.2], ['2015.10', 4.8] ]); var data2 = new google.visualization.DataTable(); data2.addColumn("string", "Key2"); data2.addColumn("number", "Value2"); data2.addRows([ ['2015.01', 300.08], ['2015.02', 455.08], ['2015.03', 454.62], ['2015.04', 362.93], ['2015.05', 527.12], ['2015.06', 588.28], ['2015.07', 409.93], ['2015.08', 432.08], ['2015.09', 462.33], ['2015.10', 32.38] ]); var options = {}; var chart1 = new google.charts.Bar(document.getElementById("chart_div1")); chart1.draw(data1, options); var chart2 = new google.charts.Bar(document.getElementById("chart_div2")); chart2.draw(data2, options); } </script> <div id="chart_div1"></div> <div id="chart_div2"></div>

Best here: https://jsfiddle.net/yrzf3v97/

Problem

It displays only one chart. Most of it is the first, and sometimes the second. Using the alert () function, it can confirm that the code works to the end.

+6
source share
2 answers

This behavior seems to be related to the draw function. In particular, the second graph is not displayed, since the SVG diagram is not generated after the draw function is called a second time.

According to the documentation :

The draw () method is asynchronous: that is, it returns immediately, but the instance that it returns may not be immediately available.

To render several diagrams on a page, you can consider the following approach: visualize the next graph as soon as the previous one is displayed, for example:

 var chart1 = new google.charts.Bar(document.getElementById("chart_div1")); google.visualization.events.addOneTimeListener(chart1, 'ready', function(){ //render chart2 once chart1 is rendered var chart2 = new google.charts.Bar(document.getElementById("chart_div2")); chart2.draw(data2, options); }); chart1.draw(data1, options);

Full example

 google.load("visualization", "1.1", { packages: ["Bar"] }); google.setOnLoadCallback(drawChart); function drawChart() { var data1 = new google.visualization.DataTable(); data1.addColumn("string", "Key1"); data1.addColumn("number", "Value1"); data1.addRows([['2015.01', 65.5], ['2015.02', 52.6], ['2015.03', 45.5], ['2015.04', 40.7], ['2015.05', 68.7], ['2015.06', 56.4], ['2015.07', 38.4], ['2015.08', 45.2], ['2015.09', 45.2], ['2015.10', 4.8]]); var data2 = new google.visualization.DataTable(); data2.addColumn("string", "Key2"); data2.addColumn("number", "Value2"); data2.addRows([['2015.01', 300.08], ['2015.02', 455.08], ['2015.03', 454.62], ['2015.04', 362.93], ['2015.05', 527.12], ['2015.06', 588.28], ['2015.07', 409.93], ['2015.08', 432.08], ['2015.09', 462.33], ['2015.10', 32.38]]); var options = {}; drawCharts([{id: 'chart_div1', data: data1, options: options},{id: 'chart_div2', data: data2, options: options}]); } function drawCharts(chartsOptions,index) { var curIndex = index || 0; var chartOptions = chartsOptions[curIndex]; var chart = new google.charts.Bar(document.getElementById(chartOptions.id)); google.visualization.events.addOneTimeListener(chart, 'ready', function(){ if(curIndex < chartsOptions.length - 1) drawCharts(chartsOptions,curIndex+1); }); chart.draw(chartOptions.data, chartOptions.options); } 
 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <div id="chart_div1"></div> <div id="chart_div2"></div>
+6
source

For those who run into this problem in 2016, you might have code like me that referenced an earlier version of Google Charts. Update your links to follow the latest guidelines at https://developers.google.com/chart . In my case, the following row changes for the row fixed the problem:

old:

 <script type="text/javascript" src="https://www.google.com/jsapi"></script> google.load('visualization', '1.1', {'packages':['bar']}); google.setOnLoadCallback(drawCharts); var chart = new google.charts.Bar(document.getElementById('myDivId')); chart.draw(data, google.charts.Bar.convertOptions(options));

new

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> google.charts.load('current', {packages:['corechart']}); google.charts.setOnLoadCallback(drawCharts); var chart = new google.visualization.ColumnChart(document.getElementById('myDivId')); chart.draw(data, options);
+1
source

More articles:


All Articles