Multiple Google charts not displaying properly on the same page

Question

I've got 4 charts displayed on a single page. When drawn individually they work perfectly fine, but when I try to have more than 1 they're not all displayed. I have also noticed that when resizing the window (hence refreshing the charts), the "active" chart can change.

Here's my method that draws the charts:

function drawChart() {
    // Occurrences per step
    var data_occ =  new google.visualization.DataTable();
    data_occ.addColumn('string', 'Step');
    data_occ.addColumn('number', 'Number');
    data_occ.addRows([
        ['NO_STOP_DEP', 2057],
        ['FIND_STOPS_DEP', 795],
        ['FIND_STOPS_ARR', 423],
        ['FIND_ROUTES', 416],
        ['FIND_PATHS_0', 416],
        ['NO_STOP_ARR', 371],
        ['FIND_PATHS_1', 359],
        ['JOURNEY_GET_1CONNECTION_FAILED', 274],
        ['FIND_PATHS_2', 274],
        ['JOURNEY_GET_1CONNECTION_t1d', 185],
        ['OK', 147],
        ['JOURNEY_GET_2CONNECTION_t1d', 145],
        ['JOURNEY_GET_1CONNECTION_t1a', 138],
        ['NO_PATH', 129],
        ['JOURNEY_GET_2CONNECTION_FAILED', 118],
        ['NO_JOURNEY', 118],
        ['JOURNEY_GET_1CONNECTION_cs1', 117],
        ['JOURNEY_GET_1CONNECTION_t2d', 115],
        ['JOURNEY_GET_DIRECT_t1d', 111],
        ['JOURNEY_GET_2CONNECTION_t1a', 79],
        ['JOURNEY_GET_2CONNECTION_cs1', 75],
        ['JOURNEY_GET_2CONNECTION_t2d', 73],
        ['JOURNEY_GET_2CONNECTION_t2a', 66],
        ['JOURNEY_GET_2CONNECTION_cs2', 66],
        ['JOURNEY_GET_2CONNECTION_t3d', 66],
        ['JOURNEY_GET_1CONNECTION', 65],
        ['JOURNEY_GET_DIRECT', 56],
        ['JOURNEY_GET_DIRECT_FAILED', 54],
        ['JOURNEY_GET_2CONNECTION', 26],
        ['NO_ROUTE_ARR', 4],
        ['NO_ROUTE_DEP', 3]
    ]);
    var opt_occ = {
        chart: {
            title: 'Occurrences of each step'
        }
    };
    var chart_occ = new google.charts.Bar(document.getElementById('chart_occ'));
    chart_occ.draw(data_occ, opt_occ);

    // Sum of durations per step
    var data_dur =  new google.visualization.DataTable();
    data_dur.addColumn('string', 'Step');
    data_dur.addColumn('number', 'Duration');
    data_dur.addRows([
        ['JOURNEY_GET_2CONNECTION_t2d', 4271651.423530579],
        ['NO_STOP_DEP', 954578.8992916346],
        ['FIND_STOPS_DEP', 711477.470664978],
        ['JOURNEY_GET_DIRECT_t1d', 604728.3424301147],
        ['JOURNEY_GET_1CONNECTION_t2d', 483084.8451423645],
        ['JOURNEY_GET_1CONNECTION_t1d', 399811.6393585205],
        ['JOURNEY_GET_2CONNECTION_t3d', 391471.8716468811],
        ['FIND_PATHS_1', 173883.78058815002],
        ['FIND_STOPS_ARR', 164751.4531224966],
        ['JOURNEY_GET_2CONNECTION_t1d', 158291.4034690857],
        ['FIND_PATHS_2', 154918.55130004883],
        ['FIND_ROUTES', 125470.71777877212],
        ['NO_STOP_ARR', 82222.14379951358],
        ['JOURNEY_GET_1CONNECTION_cs1', 45374.44926452637],
        ['JOURNEY_GET_1CONNECTION_t1a', 29688.884063720703],
        ['JOURNEY_GET_2CONNECTION_cs2', 21626.706924438477],
        ['JOURNEY_GET_2CONNECTION_cs1', 13983.793979644775],
        ['JOURNEY_GET_2CONNECTION_t2a', 13081.894062042236],
        ['JOURNEY_GET_1CONNECTION', 11718.449104309082],
        ['JOURNEY_GET_2CONNECTION_FAILED', 9777.992935180664],
        ['JOURNEY_GET_1CONNECTION_FAILED', 9182.082992315292],
        ['JOURNEY_GET_DIRECT', 8991.909969329834],
        ['JOURNEY_GET_2CONNECTION_t1a', 8132.20499420166],
        ['NO_ROUTE_ARR', 5709.329235076904],
        ['JOURNEY_GET_DIRECT_FAILED', 5620.268951416016],
        ['FIND_PATHS_0', 4501.938883662224],
        ['JOURNEY_GET_2CONNECTION', 3359.796012878418],
        ['NO_PATH', 1778.0850104540586],
        ['OK', 1419.4850099533796],
        ['NO_JOURNEY', 1267.5709964483976],
        ['NO_ROUTE_DEP', 334.49600982666016]
    ]);
    var opt_dur = {
        chart: {
            title: 'Cumulative duration of each step (ms)'
        }
    };
    var chart_dur = new google.charts.Bar(document.getElementById('chart_dur'));
    chart_dur.draw(data_dur, opt_dur);

    // Average of durations per step
    var data_dur_avg =  new google.visualization.DataTable();
    data_dur_avg.addColumn('string', 'Step');
    data_dur_avg.addColumn('number', 'Duration');
    data_dur_avg.addRows([
        ['NO_ROUTE_DEP', 111.49866994222005],
        ['NO_ROUTE_ARR', 1427.332308769226],
        ['JOURNEY_GET_DIRECT', 160.5698208808899],
        ['NO_PATH', 13.783604732202004],
        ['JOURNEY_GET_1CONNECTION_cs1', 387.8158056797125],
        ['JOURNEY_GET_1CONNECTION_t2d', 4200.737783846648],
        ['JOURNEY_GET_1CONNECTION', 180.2838323739859],
        ['JOURNEY_GET_2CONNECTION_t1a', 102.93930372407165],
        ['JOURNEY_GET_2CONNECTION_cs1', 186.45058639526368],
        ['JOURNEY_GET_2CONNECTION_t2d', 58515.77292507642],
        ['JOURNEY_GET_2CONNECTION_t2a', 198.21051609154904],
        ['JOURNEY_GET_2CONNECTION_cs2', 327.6773776430072],
        ['JOURNEY_GET_2CONNECTION_t3d', 5931.3919946497135],
        ['JOURNEY_GET_2CONNECTION', 129.22292357224686],
        ['OK', 9.656360611927752],
        ['NO_STOP_ARR', 221.623029109201],
        ['JOURNEY_GET_1CONNECTION_t1a', 215.13684104145437],
        ['NO_STOP_DEP', 464.06363601926813],
        ['FIND_STOPS_DEP', 894.9402146729284],
        ['FIND_STOPS_ARR', 389.483340715122],
        ['FIND_ROUTES', 301.6123023528176],
        ['FIND_PATHS_0', 10.821968470341885],
        ['JOURNEY_GET_DIRECT_t1d', 5448.003084955989],
        ['JOURNEY_GET_DIRECT_FAILED', 104.07905465585215],
        ['FIND_PATHS_1', 484.35593478593324],
        ['JOURNEY_GET_1CONNECTION_t1d', 2161.1439965325435],
        ['JOURNEY_GET_1CONNECTION_FAILED', 33.51125179677114],
        ['FIND_PATHS_2', 565.3961726279155],
        ['JOURNEY_GET_2CONNECTION_t1d', 1091.6648515109357],
        ['JOURNEY_GET_2CONNECTION_FAILED', 82.86434690831071],
        ['NO_JOURNEY', 10.742127088545743]
    ]);
    var opt_dur_avg = {
        chart: {
            title: 'Average duration of each step (ms)'
        }
    };
    var chart_dur_avg = new google.charts.Bar(document.getElementById('chart_dur_avg'));
    chart_dur_avg.draw(data_dur_avg, opt_dur_avg);

    // Average duration comparison today vs yesterday
    var data_dur_avg_cmp =  new google.visualization.DataTable();
    data_dur_avg_cmp.addColumn('string', 'Step');
    data_dur_avg_cmp.addColumn('number', 'Yesterday');
    data_dur_avg_cmp.addColumn('number', 'Today');
    data_dur_avg_cmp.addRows([
    ]);
    var opt_dur_avg_cmp = {
        chart: {
            title: 'Average duration of each step (ms)'
        }
    };
    var chart_dur_avg_cmp = new google.charts.Bar(document.getElementById('chart_dur_avg_cmp'));
    chart_dur_avg_cmp.draw(data_dur_avg_cmp, opt_dur_avg_cmp);
}

I have also uploaded the code to a jsfiddle so that you can see for yourself. You can play with the integer at the top, to select which graphs will be displayed. Having a value that is not a power of 2 (that is, display more than one graph) will cause the following:

• the div will be sized, I mean the layout indicates that it is present
• nothing will be drawn in the div

Here's an example with 2 graphs drawn, one is properly drawn and the second one is blank:

We can clearly see that the Average duration div has a size, but is blank.

Answer 1

It's the known 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. 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: ["corechart", "gauge", "table", "timeline", "bar"] });

3)Replace google.setOnLoadCallback(drawChart); with google.charts.setOnLoadCallback(drawChart);

Modified jsfiddle

Option 2. Render charts synchronously

Since a 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.

function drawChart(chartsQueue,index) {
    index = index || 0;
    if (index === chartsQueue.length)
        return;



    var chart = new google.charts.Bar(document.getElementById(chartsQueue[index].id));
    google.visualization.events.addOneTimeListener(chart, 'ready', function() {
        drawChart(chartsQueue, index + 1); //draw next chart
    });
    chart.draw(chartsQueue[index].data, chartsQueue[index].options);
}

Modified jsfiddle