YuriG
Reputation: 368
Multiple Google charts on the same page
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?
Upvotes: 1
Views: 988
Answers (1)
Vadim Gremyachev
Reputation: 59318
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>Upvotes: 1
Related Questions
- More than two Google Charts on a single page?
- Show many google charts in one chart
- How to put 2 google charts on one page
- Multiple types of Google Charts on single page
- Two different google charts on one page
- Multiple Google Charts
- Create Multiple google.visualization Charts on a Page
- Displaying multiple Google charts on same page
- is it possible to have multiple google charts in one page?
- multiple google charts api, on same web page