Wordpress ~ How To Display More Than One Google Chart On A Page?

Here is code for one Google chart that I inserted into a raw HTML Block in WordPress Visual Composer -- chart ID name is 'chart_div1' -- this works on my WP webpage. #

Solution 1:

If you look at the browser console, then you will notice an error message:

loader.js:146 Uncaught Error: google.charts.load() cannot be called more than once with version 45 or earlier.

And that's because of this function function call:

google.charts.load('current', {'packages':['corechart']});

Also, since you've already got the script loaded from gstatic, then you really don't need this more than once either:

<scripttype="text/javascript"src="https://www.gstatic.com/charts/loader.js"></script>

A simple solution would be to load those resources first, and then each subsequent block:

<scripttype="text/javascript"src="https://www.gstatic.com/charts/loader.js"></script><script>
  google.charts.load('current', {'packages':['corechart']});
</script><scripttype="text/javascript">
  google.charts.setOnLoadCallback(drawChart);
  functiondrawChart() {
    var data = google.visualization.arrayToDataTable([ ['X','Y'], [8,12], [6.5,7] ]);
    var options = {     };
    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div1'));
    chart.draw(data, options);
  }
</script><divid="chart_div1"></div><hr/><scripttype="text/javascript">
  google.charts.setOnLoadCallback(drawChart2);
  functiondrawChart2() {
    var data2 = google.visualization.arrayToDataTable([ ['XX','YY'], [18,112], [16.5,17] ]);
    var options2 = {     };
    var chart2 = new google.visualization.ScatterChart(document.getElementById('chart_div2'));
    chart2.draw(data2, options2);
  }
</script><divid="chart_div2"></div>

But you may notice an efficiency/reusability conundrum arises. Do you really want to be loading those resources on every page, whether it has a chart or not? No. Do you want to keep track of whether you've already loaded the resources before adding an HTML block? No.

So to resolve this, you want to conditionally include those resources if they don't already exist. This way each HTML block is self-contained and ready for use anywhere without conflict with its peers.

To accomplish this, one way is to simply check if the google.charts object is defined, and only if not, then write to the document the script needed to include the resource.

If you're not using any other google objects, then you could just check google.

window.google || document.write('<script> ... </script>')

But that's unlikely because google has a lot of cool stuff. So to be more specific, you'll need to check if window.google.charts is defined, but you may notice that the above approach will throw a TypeError if you try to access a nested undefined object. So there's a slick workaround

(window.google || {}).charts || document.write('<script> ... </script>')

So when you put it all together, escaping tag slashes and newlines for readability, you get a nice contained reusable block like this:

<script>
(window.google || {}).charts || document.write('\
  <scripttype="text/javascript"src="https://www.gstatic.com/charts/loader.js"><\/script>\
  <script> google.charts.load("current", {"packages":["corechart"]});<\/script>')
</script><scripttype="text/javascript">
  google.charts.setOnLoadCallback(drawChart);
  functiondrawChart() {
    var data = google.visualization.arrayToDataTable([ ['X','Y'], [8,12], [6.5,7] ]);
    var options = {     };
    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div1'));
    chart.draw(data, options);
  }
</script><divid="chart_div1"></div>

Which can happily coexist with other blocks on the same page. In any event, the first block loads the resources, and then each other block skips that and goes straight to rendering your data.

<script>
(window.google || {}).charts || document.write('\
  <scripttype="text/javascript"src="https://www.gstatic.com/charts/loader.js"><\/script>\
  <script> google.charts.load("current", {"packages":["corechart"]});<\/script>')
</script><scripttype="text/javascript">
  google.charts.setOnLoadCallback(drawChart);
  functiondrawChart() {
    var data = google.visualization.arrayToDataTable([ ['X','Y'], [8,12], [6.5,7] ]);
    var options = {     };
    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div1'));
    chart.draw(data, options);
  }
</script><divid="chart_div1"></div><hr/><script>
(window.google || {}).charts || document.write('\
  <scripttype="text/javascript"src="https://www.gstatic.com/charts/loader.js"><\/script>\
  <script> google.charts.load("current", {"packages":["corechart"]});<\/script>')
</script><scripttype="text/javascript">
  google.charts.setOnLoadCallback(drawChart);
  functiondrawChart() {
    var data = google.visualization.arrayToDataTable([ ['XX','YY'], [18,112], [16.5,17] ]);
    var options = {     };
    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div2'));
    chart.draw(data, options);
  }
</script><divid="chart_div2"></div>

Solution 2:

You can try this:

google.charts.load('45', {packages: ['corechart']});

write "45" instead of "current", because "current" is still version "44". This worked for me.

Share