This question has been asked before , but in regards to the old corechart
API, which I haven't had a problem with, not the new Material
charts. For instance, the following code will create two charts as expected:
var data = [
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
];
google.load('visualization', '1', {
'packages': ['corechart']
});
google.setOnLoadCallback(drawChart);
function drawChart() {
new google.visualization.ColumnChart(document.getElementById('groupedBar')).draw(
new google.visualization.arrayToDataTable(data), {});
new google.visualization.ColumnChart(document.getElementById('stackedBar')).draw(
new google.visualization.arrayToDataTable(data), {isStacked:true});
}
http://jsfiddle.net/crclayton/r67ega11/10/
However, the updated version:
google.load('visualization', '1.1', { // note version 1.1 and bar package
'packages': ['bar']
});
google.setOnLoadCallback(drawChart);
function drawChart() {
new google.charts.Bar(document.getElementById('groupedBar')).draw(
new google.visualization.arrayToDataTable(data),
google.charts.Bar.convertOptions({}));
new google.charts.Bar(document.getElementById('stackedBar')).draw(
new google.visualization.arrayToDataTable(data),
google.charts.Bar.convertOptions({
isStacked: true
}));
}
http://jsfiddle.net/crclayton/r67ega11/6/
... will only render one of the charts, sometimes the first, sometimes the second. It won't throw an error, it will simply ignore the other. I've tried breaking them up into individual functions, assigning everything to variables, resetting google.setOnLoadCallback
with the same results.
I've also found that when rendering different types of charts , I don't have that problem.
Any ideas?
It's most likely the same issue that 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. Render charts synchronously
The general idea is to render chart synchronously. Since draw function is asynchronous, we utilize ready
event handler for that purpose.
Replace:
function drawChart_() {
new google.charts.Bar(document.getElementById('groupedBar')).draw(
new google.visualization.arrayToDataTable(data),
google.charts.Bar.convertOptions({}));
new google.charts.Bar(document.getElementById('stackedBar')).draw(
new google.visualization.arrayToDataTable(data),
google.charts.Bar.convertOptions({
isStacked: true
}));
}
with:
function drawChart() {
var groupedBarChart = new google.charts.Bar(document.getElementById('groupedBar'));
google.visualization.events.addOneTimeListener(groupedBarChart, 'ready', function(){
var stackedBarChart = new google.charts.Bar(document.getElementById('stackedBar'));
stackedBarChart.draw(new google.visualization.arrayToDataTable(data),google.charts.Bar.convertOptions({isStacked: true}));
});
groupedBarChart.draw(new google.visualization.arrayToDataTable(data),google.charts.Bar.convertOptions({}));
}
Example
var data = [ ['Year', 'Sales', 'Expenses', 'Profit'], ['2014', 1000, 400, 200], ['2015', 1170, 460, 250], ['2016', 660, 1120, 300], ['2017', 1030, 540, 350] ]; google.load('visualization', '1.1', { 'packages': ['bar'] }); google.setOnLoadCallback(drawChart); function drawChart() { var groupedBarChart = new google.charts.Bar(document.getElementById('groupedBar')); google.visualization.events.addOneTimeListener(groupedBarChart, 'ready', function(){ var stackedBarChart = new google.charts.Bar(document.getElementById('stackedBar')); stackedBarChart.draw(new google.visualization.arrayToDataTable(data),google.charts.Bar.convertOptions({isStacked: true})); }); groupedBarChart.draw(new google.visualization.arrayToDataTable(data),google.charts.Bar.convertOptions({})); } function drawChart_() { new google.charts.Bar(document.getElementById('groupedBar')).draw( new google.visualization.arrayToDataTable(data), google.charts.Bar.convertOptions({})); new google.charts.Bar(document.getElementById('stackedBar')).draw( new google.visualization.arrayToDataTable(data), google.charts.Bar.convertOptions({ isStacked: true })); }
<script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="chart.js"></script> <div class="chart" id="groupedBar" style></div> <div class="chart" id="stackedBar" style></div>
Option 2. 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="//www.gstatic.com/charts/loader.js"></script>
2)Then load a 43 version of library: google.charts.load("43",{packages:["bar"]});
3)Replace:
google.setOnLoadCallback(drawChart);
with
google.charts.setOnLoadCallback(drawChart);
Example
var data = [ ['Year', 'Sales', 'Expenses', 'Profit'], ['2014', 1000, 400, 200], ['2015', 1170, 460, 250], ['2016', 660, 1120, 300], ['2017', 1030, 540, 350] ]; google.charts.load("43",{packages:["bar","corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { new google.charts.Bar(document.getElementById('groupedBar')).draw( new google.visualization.arrayToDataTable(data), google.charts.Bar.convertOptions({})); new google.charts.Bar(document.getElementById('stackedBar')).draw( new google.visualization.arrayToDataTable(data), google.charts.Bar.convertOptions({ isStacked: true })); }
<script type="text/javascript" src="https://www.google.com/jsapi"></script> <script src="http://www.gstatic.com/charts/loader.js"></script> <div class="chart" id="groupedBar" style></div> <div class="chart" id="stackedBar" style></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.