Wordpress ~ how to display more than one Google Chart on a page?

Question

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.

#

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    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>

<div id="chart_div1"></div>

#

Trying to add a second chart with chart id 'chart_div2' on the same page. The second chart in another raw HTML block, but the chart does not show up, only chart_div1 above does.

#

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    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>

<div id="chart_div2"></div>

#

Have tried several variations and can't get any to work. I have also tried putting this code in shortcodes, and same issue.

Any suggestions?

Answer 1

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.

Answer 2

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:

<script type="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:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
  google.charts.load('current', {'packages':['corechart']});
</script>


<script type="text/javascript">
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    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>
<div id="chart_div1"></div>


<hr/>


<script type="text/javascript">
  google.charts.setOnLoadCallback(drawChart2);
  function drawChart2() {
    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>
<div id="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('\
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"><\/script>\
  <script> google.charts.load("current", {"packages":["corechart"]});<\/script>')
</script>

<script type="text/javascript">
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    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>

<div id="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('\
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"><\/script>\
  <script> google.charts.load("current", {"packages":["corechart"]});<\/script>')
</script>

<script type="text/javascript">
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    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>

<div id="chart_div1"></div>



<hr/>



<script>
(window.google || {}).charts || document.write('\
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"><\/script>\
  <script> google.charts.load("current", {"packages":["corechart"]});<\/script>')
</script>

<script type="text/javascript">
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    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>

<div id="chart_div2"></div>