Multiple instances of Google Visualization charts

Question

This question already has an answer here:

• Google Charts: Drawing Multiple Bar Charts with dual axis in IE 2 answers

I am having a problem loading to google charts into a single page. Using guideliness provided here:

https://developers.google.com/chart/interactive/docs/basic_load_libs

and here:

Multiple Instances of Google Visualizations Chart Inside Separate Divs (the part of code loading the charts)

Here is my code:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

    google.load('visualization', '1', {
        packages: ['bar']
    });

    google.setOnLoadCallback(drawStuff);

    function drawStuff() {
        /*SCAN TIME*/
        var data = new google.visualization.arrayToDataTable([<%=JSONScanTimeArray%>]);
        console.log(data);
        var options = {
            width: 750,
            height: 400,
            chart: {
                title: 'SCAN TIME',
        }};

        var chart = new google.charts.Bar(document.getElementById('chart_div'));
        console.log(chart);
        chart.draw(data, options);


        /*IMAGE ARTIFACTS*/
        var data2 = new google.visualization.arrayToDataTable([<%=JSONIQArray%>]);
        console.log(data2);
        var options2 = {
            width: 750,
            height: 400,
            chart: {
                title: 'IMAGE QUALITY',
        }};

        var chart2 = new google.charts.Bar(document.getElementById('chart_div2'));
        console.log(chart2);
        chart2.draw(data2, options2);

    }
</script>

And further down into the page i am specifying the IDs to load the bar charts:

<div>
    <div id="chart_div" style="display:inline-block;margin:10px;"></div>
    ...
    <div id="chart_div2" style="display:inline-block;margin:10px;"></div>
</div>

However each time one of the two charts is depicted into my page. On first page load the first chart is loaded while on the second page load the second chart is loaded.

My browser's console is clear (no errors or warnings) and i can see that the objects created in script (data, data2, chart, chart2) are generated normally.

However in each case the chart that is not generated has an empty innerHTML element.

For example the innerHTML for the chart NOT loaded is empty:

innerHTML: "<div style="position: relative; width: 750px; height: 400px;"><div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"><svg width="750" height="400"><defs></defs></svg></div></div>"

while the innerHTML for the chart loaded:

innerHTML: "<div style="position: relative; width: 750px; height: 400px;"><div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"><svg width="750" height="400"><defs><filter x="-100%" y="-100%" width="300%" height="300%" id="rablshadow4"><feGaussianBlur in="SourceAlpha" stdDeviation="2"></feGaussianBlur><feOffset dx="0" dy="0"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter><filter x="-100%" y="-100%" width="300%" height="300%" id="rablshadow3"><feGaussianBlur in="SourceAlpha" stdDeviation="2"></feGaussianBlur><feOffset dx="0" dy="0"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.4"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter><filter x="-100%" y="-100%" width="300%" height="300%" id="rablshadow2"><feGaussianBlur in="SourceAlpha" stdDeviation="1"></feGaussianBlur><feOffset dx="0" dy="2"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.2"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter><filter x="-100%" y="-100%" width="300%" height="300%" id="rablshadow1"><feGaussianBlur in="SourceAlpha" stdDeviation="2"></feGaussianBlur><feOffset dx="0" dy="1"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.4"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter><filter x="-100%" y="-100%" width="300%" height="300%" id="rablshadow0"><feGaussianBlur in="SourceAlpha" stdDeviation="0"></feGaussianBlur><feOffset dx="0" dy="1"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.4"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter><clipPath id="rablclip0"><rect x="13.5" y="62.5" width="563" height="285"></rect></clipPath></defs><g><rect x="0" y="0" width="750" height="400" fill="white" stroke="black" stroke-width="0"></rect><text x="0" y="15" style="cursor: default; -webkit-user-select: none; -webkit-font-smoothing: antialiased; font-family: Roboto2; font-size: 16px;" fill="#757575" dx="0px">IMAGE QUALITY</text><rect x="616.96875" y="62.5" width="12" height="12" rx="2" ry="2" fill="#4285F4"></rect><text x="636.96875" y="75.5" style="cursor: default; -webkit-user-select: none; -webkit-font-smoothing: antialiased; font-family: Roboto2;" fill="#757575" dx="0px">Image Quality</text><rect x="616.96875" y="95.5" width="12" height="12" rx="2" ry="2" fill="#DB4437"></rect><text x="636.96875" y="108.5" style="cursor: default; -webkit-user-select: none; -webkit-font-smoothing: antialiased; font-family: Roboto2;" fill="#757575" dx="0px">Image Quality Ref</text><rect x="13.5" y="62.5" width="563" height="285" fill="none"></rect></g><g><line x1="13.5" x2="576.5" y1="347.5" y2="347.5" stroke="#9E9E9E" stroke-width="1"></line><line x1="13.5" x2="576.5" y1="290.5" y2="290.5" stroke="#E0E0E0" stroke-width="1"></line><line x1="13.5" x2="576.5" y1="233.5" y2="233.5" stroke="#E0E0E0" stroke-width="1"></line><line x1="13.5" x2="576.5" y1="176.5" y2="176.5" stroke="#E0E0E0" stroke-width="1"></line><line x1="13.5" x2="576.5" y1="119.5" y2="119.5" stroke="#E0E0E0" stroke-width="1"></line><line x1="13.5" x2="576.5" y1="62.5" y2="62.5" stroke="#E0E0E0" stroke-width="1"></line></g><g><path d="M 60.672043010752674 120 A 2 2 0 0 1 62.672043010752674 122 L 62.672043010752674 347 A 0 0 0 0 1 62.672043010752674 347 L 26 347 A 0 0 0 0 1 26 347 L 26 122 A 2 2 0 0 1 28 120 Z" fill="#4285F4" clip-path="url(#rablclip0)"></path><path d="M 98.34408602150535 63 A 2 2 0 0 1 100.34408602150535 65 L 100.34408602150535 347 A 0 0 0 0 1 100.34408602150535 347 L 63.672043010752674 347 A 0 0 0 0 1 63.672043010752674 347 L 63.672043010752674 65 A 2 2 0 0 1 65.67204301075267 63 Z" fill="#DB4437" clip-path="url(#rablclip0)"></path><path d="M 178.58602150537632 347.5 A 0 0 0 0 1 178.58602150537632 347.5 L 178.58602150537632 347.5 A 0 0 0 0 1 178.58602150537632 347.5 L 141.91397849462365 347.5 A 0 0 0 0 1 141.91397849462365 347.5 L 141.91397849462365 347.5 A 0 0 0 0 1 141.91397849462365 347.5 Z" fill="#4285F4" clip-path="url(#rablclip0)"></path><path d="M 214.25806451612902 63 A 2 2 0 0 1 216.25806451612902 65 L 216.25806451612902 347 A 0 0 0 0 1 216.25806451612902 347 L 179.58602150537632 347 A 0 0 0 0 1 179.58602150537632 347 L 179.58602150537632 65 A 2 2 0 0 1 181.58602150537632 63 Z" fill="#DB4437" clip-path="url(#rablclip0)"></path><path d="M 294.5 347.5 A 0 0 0 0 1 294.5 347.5 L 294.5 347.5 A 0 0 0 0 1 294.5 347.5 L 257.82795698924724 347.5 A 0 0 0 0 1 257.82795698924724 347.5 L 257.82795698924724 347.5 A 0 0 0 0 1 257.82795698924724 347.5 Z" fill="#4285F4" clip-path="url(#rablclip0)"></path><path d="M 330.1720430107527 63 A 2 2 0 0 1 332.1720430107527 65 L 332.1720430107527 347 A 0 0 0 0 1 332.1720430107527 347 L 295.5 347 A 0 0 0 0 1 295.5 347 L 295.5 65 A 2 2 0 0 1 297.5 63 Z" fill="#DB4437" clip-path="url(#rablclip0)"></path><path d="M 410.4139784946237 347.5 A 0 0 0 0 1 410.4139784946237 347.5 L 410.4139784946237 347.5 A 0 0 0 0 1 410.4139784946237 347.5 L 373.741935483871 347.5 A 0 0 0 0 1 373.741935483871 347.5 L 373.741935483871 347.5 A 0 0 0 0 1 373.741935483871 347.5 Z" fill="#4285F4" clip-path="url(#rablclip0)"></path><path d="M 446.0860215053763 63 A 2 2 0 0 1 448.0860215053763 65 L 448.0860215053763 347 A 0 0 0 0 1 448.0860215053763 347 L 411.4139784946237 347 A 0 0 0 0 1 411.4139784946237 347 L 411.4139784946237 65 A 2 2 0 0 1 413.4139784946237 63 Z" fill="#DB4437" clip-path="url(#rablclip0)"></path><path d="M 526.3279569892472 347.5 A 0 0 0 0 1 526.3279569892472 347.5 L 526.3279569892472 347.5 A 0 0 0 0 1 526.3279569892472 347.5 L 489.6559139784946 347.5 A 0 0 0 0 1 489.6559139784946 347.5 L 489.6559139784946 347.5 A 0 0 0 0 1 489.6559139784946 347.5 Z" fill="#4285F4" clip-path="url(#rablclip0)"></path><path d="M 564 347.5 A 0 0 0 0 1 564 347.5 L 564 347.5 A 0 0 0 0 1 564 347.5 L 527.3279569892472 347.5 A 0 0 0 0 1 527.3279569892472 347.5 L 527.3279569892472 347.5 A 0 0 0 0 1 527.3279569892472 347.5 Z" fill="#DB4437" clip-path="url(#rablclip0)"></path></g><g></g><g><text x="63.17204301075269" y="364.5" style="cursor: default; -webkit-user-select: none; -webkit-font-smoothing: antialiased; font-family: Roboto2; font-size: 12px;" fill="#757575" dx="-60.2958984375px">AX Pd FS PROPELLER</text><text x="295" y="364.5" style="cursor: default; -webkit-user-select: none; -webkit-font-smoothing: antialiased; font-family: Roboto2; font-size: 12px;" fill="#757575" dx="-64.8603515625px">SAG PD FS PROPELLER</text><text x="410.9139784946237" y="364.5" style="cursor: default; -webkit-user-select: none; -webkit-font-smoothing: antialiased; font-family: Roboto2; font-size: 12px;" fill="#757575" dx="-20.8857421875px">AX LOK</text><text x="526.8279569892472" y="364.5" style="cursor: default; -webkit-user-select: none; -webkit-font-smoothing: antialiased; font-family: Roboto2; font-size: 12px;" fill="#757575" dx="-23.6396484375px">Kai - 3-pl</text><text x="283.6914902553764" y="396.5" style="cursor: default; -webkit-user-select: none; -webkit-font-smoothing: antialiased; font-family: Roboto2; font-size: 12px;" fill="#424242" dx="-27.0556640625px">Sequence</text><text x="7.5" y="351.5" style="cursor: default; -webkit-user-select: none; -webkit-font-smoothing: antialiased; font-family: Roboto2; font-size: 12px;" fill="#757575" dx="-6.9375px">0</text><text x="7.5" y="294.5" style="cursor: default; -webkit-user-select: none; -webkit-font-smoothing: antialiased; font-family: Roboto2; font-size: 12px;" fill="#757575" dx="-6.9375px">1</text><text x="7.5" y="237.5" style="cursor: default; -webkit-user-select: none; -webkit-font-smoothing: antialiased; font-family: Roboto2; font-size: 12px;" fill="#757575" dx="-6.9375px">2</text><text x="7.5" y="180.5" style="cursor: default; -webkit-user-select: none; -webkit-font-smoothing: antialiased; font-family: Roboto2; font-size: 12px;" fill="#757575" dx="-6.9375px">3</text><text x="7.5" y="123.5" style="cursor: default; -webkit-user-select: none; -webkit-font-smoothing: antialiased; font-family: Roboto2; font-size: 12px;" fill="#757575" dx="-6.9375px">4</text><text x="7.5" y="66.5" style="cursor: default; -webkit-user-select: none; -webkit-font-smoothing: antialiased; font-family: Roboto2; font-size: 12px;" fill="#757575" dx="-6.9375px">5</text></g><g></g><g></g><g></g></svg></div></div>"

If instead of: google.charts.Bar i use: google.visualization.BarChart then both charts load fine. However i need to use "google.charts.Bar" ....

Answer 1

WhiteHat is right but for some reason you can try also with setTimeout function like in this example:

JSFiddle

function doSetTimeOutDrawChart(chart, data, options, delay){
    setTimeout(function () { 
        chart.draw(data, options);
    }, delay);
}