How to add multiple material google charts to one page?

Question

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?

Answer 1

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>