同一页面上有多个Google图表

Question

I'm trying to create a POC of a stock portfolio.
I'm using Google charts to do it.
I want to generate 3 charts: one for each stock (I have two stocks) and one for both of them.
in my html I've created three divs (using some guids)

<div id="e480c510499e4bbdaa8ae8e4a1001cd8"></div>
<div id="2dea80b0fabd43bba019dbc3ddf342aa"></div>
<div id="linechart_material"></div>

and I've generated a javascript that is supposed to populate the divs

    $(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
google.load('visualization', '1.1', { 'packages': ['line'] });

google.setOnLoadCallback(drawChart);

function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Day');

data.addColumn('number', 'Company #4');
data.addColumn('number', 'Company #2');
data.addRow([new Date(2015, 11,  27), 12.7389789250395,4.10950499778125]);
data.addRow([new Date(2015, 11,  26), 6.76681987790708,8.38212726329552]);
data.addRow([new Date(2015, 11,  25), 15.7216755155109,4.36060299741132]);
data.addRow([new Date(2015, 11,  24), 7.44940381844035,3.34093286951116]);
data.addRow([new Date(2015, 11,  23), 9.02574470221333,10.0405249521325]);
data.addRow([new Date(2015, 11,  22), 11.9767397269498,5.29850781210629]);
data.addRow([new Date(2015, 11,  21), 14.5598888055235,6.3867255497662]);
data.addRow([new Date(2015, 11,  20), 12.2693184056642,3.70270192981823]);
data.addRow([new Date(2015, 11,  19), 8.29967047194935,17.0856299675469]);
data.addRow([new Date(2015, 11,  18), 12.9148372020176,4.37814835290338]);
var options = {
title: 'Stock Performance',
width: 900,
height: 500
};

var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, options);

var data0 = new google.visualization.DataTable();
data0.addColumn('date', 'Day');
data0.addColumn('number', 'Company #4');
data0.addRow([new Date(2015, 11,  27), 12.7389789250395]);
data0.addRow([new Date(2015, 11,  26), 6.76681987790708]);
data0.addRow([new Date(2015, 11,  25), 15.7216755155109]);
data0.addRow([new Date(2015, 11,  24), 7.44940381844035]);
data0.addRow([new Date(2015, 11,  23), 9.02574470221333]);
data0.addRow([new Date(2015, 11,  22), 11.9767397269498]);
data0.addRow([new Date(2015, 11,  21), 14.5598888055235]);
data0.addRow([new Date(2015, 11,  20), 12.2693184056642]);
data0.addRow([new Date(2015, 11,  19), 8.29967047194935]);
data0.addRow([new Date(2015, 11,  18), 12.9148372020176]);
var options0 = {
title: 'Stock Performance',
width: 300,
height: 300
};

var chart0 = new google.charts.Line(document.getElementById('e480c510499e4bbdaa8ae8e4a1001cd8'));
chart0.draw(data0, options0);

var data1 = new google.visualization.DataTable();
data1.addColumn('date', 'Day');
data1.addColumn('number', 'Company #2');
data1.addRow([new Date(2015, 11,  27), 4.10950499778125]);
data1.addRow([new Date(2015, 11,  26), 8.38212726329552]);
data1.addRow([new Date(2015, 11,  25), 4.36060299741132]);
data1.addRow([new Date(2015, 11,  24), 3.34093286951116]);
data1.addRow([new Date(2015, 11,  23), 10.0405249521325]);
data1.addRow([new Date(2015, 11,  22), 5.29850781210629]);
data1.addRow([new Date(2015, 11,  21), 6.3867255497662]);
data1.addRow([new Date(2015, 11,  20), 3.70270192981823]);
data1.addRow([new Date(2015, 11,  19), 17.0856299675469]);
data1.addRow([new Date(2015, 11,  18), 4.37814835290338]);
var options1 = {
title: 'Stock Performance',
width: 300,
height: 300
};

var chart1 = new google.charts.Line(document.getElementById('2dea80b0fabd43bba019dbc3ddf342aa'));
chart1.draw(data1, options1);

}

The problem is that each time the page loads, only one of the three charts is being rendered. (Each time a different one)
Anyone has ever encountered such issue?

Answer 1

The same issue was reported in google-visualization-issues repository:

The problems people have seen with the sizing of multiple instances of material charts should be resolved with this new release. You can change your code to load "1.1" now so that when the candidate release becomes available, you will be using it.

There are at least two solutions available at the moment:

Option 1. Using the frozen version loader.

Since

The rollout of the v43 candidate release that would fix this problem

switch to using the frozen version loader.

Steps:

1)Add a reference to loader: <script src="http://www.gstatic.com/charts/loader.js"></script>

2)Then load a 43 version of library: google.charts.load("43",{packages:["line"]});

3)Replace:

google.setOnLoadCallback(drawChart);

with

google.charts.setOnLoadCallback(drawChart);

Example

 google.charts.load("43",{packages:["line"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('date', 'Day'); data.addColumn('number', 'Company #4'); data.addColumn('number', 'Company #2'); data.addRow([new Date(2015, 11, 27), 12.7389789250395,4.10950499778125]); data.addRow([new Date(2015, 11, 26), 6.76681987790708,8.38212726329552]); data.addRow([new Date(2015, 11, 25), 15.7216755155109,4.36060299741132]); data.addRow([new Date(2015, 11, 24), 7.44940381844035,3.34093286951116]); data.addRow([new Date(2015, 11, 23), 9.02574470221333,10.0405249521325]); data.addRow([new Date(2015, 11, 22), 11.9767397269498,5.29850781210629]); data.addRow([new Date(2015, 11, 21), 14.5598888055235,6.3867255497662]); data.addRow([new Date(2015, 11, 20), 12.2693184056642,3.70270192981823]); data.addRow([new Date(2015, 11, 19), 8.29967047194935,17.0856299675469]); data.addRow([new Date(2015, 11, 18), 12.9148372020176,4.37814835290338]); var options = { title: 'Stock Performance', width: 900, height: 500 }; var chart = new google.charts.Line(document.getElementById('linechart_material')); chart.draw(data, options); var data0 = new google.visualization.DataTable(); data0.addColumn('date', 'Day'); data0.addColumn('number', 'Company #4'); data0.addRow([new Date(2015, 11, 27), 12.7389789250395]); data0.addRow([new Date(2015, 11, 26), 6.76681987790708]); data0.addRow([new Date(2015, 11, 25), 15.7216755155109]); data0.addRow([new Date(2015, 11, 24), 7.44940381844035]); data0.addRow([new Date(2015, 11, 23), 9.02574470221333]); data0.addRow([new Date(2015, 11, 22), 11.9767397269498]); data0.addRow([new Date(2015, 11, 21), 14.5598888055235]); data0.addRow([new Date(2015, 11, 20), 12.2693184056642]); data0.addRow([new Date(2015, 11, 19), 8.29967047194935]); data0.addRow([new Date(2015, 11, 18), 12.9148372020176]); var options0 = { title: 'Stock Performance', width: 300, height: 300 }; var chart0 = new google.charts.Line(document.getElementById('e480c510499e4bbdaa8ae8e4a1001cd8')); chart0.draw(data0, options0); var data1 = new google.visualization.DataTable(); data1.addColumn('date', 'Day'); data1.addColumn('number', 'Company #2'); data1.addRow([new Date(2015, 11, 27), 4.10950499778125]); data1.addRow([new Date(2015, 11, 26), 8.38212726329552]); data1.addRow([new Date(2015, 11, 25), 4.36060299741132]); data1.addRow([new Date(2015, 11, 24), 3.34093286951116]); data1.addRow([new Date(2015, 11, 23), 10.0405249521325]); data1.addRow([new Date(2015, 11, 22), 5.29850781210629]); data1.addRow([new Date(2015, 11, 21), 6.3867255497662]); data1.addRow([new Date(2015, 11, 20), 3.70270192981823]); data1.addRow([new Date(2015, 11, 19), 17.0856299675469]); data1.addRow([new Date(2015, 11, 18), 4.37814835290338]); var options1 = { title: 'Stock Performance', width: 300, height: 300 }; var chart1 = new google.charts.Line(document.getElementById('2dea80b0fabd43bba019dbc3ddf342aa')); chart1.draw(data1, options1); } 

 <script src="http://www.google.com/jsapi"></script> <script src="http://www.gstatic.com/charts/loader.js"></script> <div id="e480c510499e4bbdaa8ae8e4a1001cd8"></div> <div id="2dea80b0fabd43bba019dbc3ddf342aa"></div> <div id="linechart_material"></div> 

Option 2. Render charts synchronously

Since draw function is asynchronous, we utilize ready event handler to draw charts sequentially, in that case multiple chart should be rendered properly as demonstrated below.

Example

 google.load('visualization', '1.1', { 'packages': ['line'] }); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('date', 'Day'); data.addColumn('number', 'Company #4'); data.addColumn('number', 'Company #2'); data.addRow([new Date(2015, 11, 27), 12.7389789250395,4.10950499778125]); data.addRow([new Date(2015, 11, 26), 6.76681987790708,8.38212726329552]); data.addRow([new Date(2015, 11, 25), 15.7216755155109,4.36060299741132]); data.addRow([new Date(2015, 11, 24), 7.44940381844035,3.34093286951116]); data.addRow([new Date(2015, 11, 23), 9.02574470221333,10.0405249521325]); data.addRow([new Date(2015, 11, 22), 11.9767397269498,5.29850781210629]); data.addRow([new Date(2015, 11, 21), 14.5598888055235,6.3867255497662]); data.addRow([new Date(2015, 11, 20), 12.2693184056642,3.70270192981823]); data.addRow([new Date(2015, 11, 19), 8.29967047194935,17.0856299675469]); data.addRow([new Date(2015, 11, 18), 12.9148372020176,4.37814835290338]); var options = { title: 'Stock Performance', width: 900, height: 500 }; var data0 = new google.visualization.DataTable(); data0.addColumn('date', 'Day'); data0.addColumn('number', 'Company #4'); data0.addRow([new Date(2015, 11, 27), 12.7389789250395]); data0.addRow([new Date(2015, 11, 26), 6.76681987790708]); data0.addRow([new Date(2015, 11, 25), 15.7216755155109]); data0.addRow([new Date(2015, 11, 24), 7.44940381844035]); data0.addRow([new Date(2015, 11, 23), 9.02574470221333]); data0.addRow([new Date(2015, 11, 22), 11.9767397269498]); data0.addRow([new Date(2015, 11, 21), 14.5598888055235]); data0.addRow([new Date(2015, 11, 20), 12.2693184056642]); data0.addRow([new Date(2015, 11, 19), 8.29967047194935]); data0.addRow([new Date(2015, 11, 18), 12.9148372020176]); var options0 = { title: 'Stock Performance', width: 300, height: 300 }; var data1 = new google.visualization.DataTable(); data1.addColumn('date', 'Day'); data1.addColumn('number', 'Company #2'); data1.addRow([new Date(2015, 11, 27), 4.10950499778125]); data1.addRow([new Date(2015, 11, 26), 8.38212726329552]); data1.addRow([new Date(2015, 11, 25), 4.36060299741132]); data1.addRow([new Date(2015, 11, 24), 3.34093286951116]); data1.addRow([new Date(2015, 11, 23), 10.0405249521325]); data1.addRow([new Date(2015, 11, 22), 5.29850781210629]); data1.addRow([new Date(2015, 11, 21), 6.3867255497662]); data1.addRow([new Date(2015, 11, 20), 3.70270192981823]); data1.addRow([new Date(2015, 11, 19), 17.0856299675469]); data1.addRow([new Date(2015, 11, 18), 4.37814835290338]); var options1 = { title: 'Stock Performance', width: 300, height: 300 }; var chart = new google.charts.Line(document.getElementById('linechart_material')); google.visualization.events.addOneTimeListener(chart, 'ready', function(){ var chart0 = new google.charts.Line(document.getElementById('e480c510499e4bbdaa8ae8e4a1001cd8')); google.visualization.events.addOneTimeListener(chart0, 'ready', function(){ var chart1 = new google.charts.Line(document.getElementById('2dea80b0fabd43bba019dbc3ddf342aa')); chart1.draw(data1, options1); }); chart0.draw(data0, options0); }); chart.draw(data, options); } 

 <script src="http://www.google.com/jsapi"></script> <div id="e480c510499e4bbdaa8ae8e4a1001cd8"></div> <div id="2dea80b0fabd43bba019dbc3ddf342aa"></div> <div id="linechart_material"></div>