Can't find the problem with my multiple charts on same page

piano lab

unread,

May 25, 2020, 9:44:06 PM5/25/20

to Google Visualization API

I don't like to ask for help but now I think it's time since everything seems to be coded as the Google Guide recommends. What's wrong with my code? Only the first chart appears. Thank you for help.


<html>
  <head>
		<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(draw1);
	  google.charts.setOnLoadCallback(draw2);
      function draw1() {
        var data = google.visualization.arrayToDataTable([
          ['Food', 'Amount'],
          ['1',     15],
          ['2',      33],
          ['3',  8],
          ['4', 12],
          ['5',    27]
        ]);

        var options = {
          is3D: true,
		  pieSliceText: 'value',
		  legend: {textStyle: {color: 'AEAEAE'}},
		   tooltip: { text: 'value'}
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
		}
		
		 function draw2() {
		var data2 = google.visualization.arrayToDataTable([
          ['Rating', 'Amount'],
          ['7',     4],
          ['6',      6],
          ['5',  7],
          ['4', 5],
          ['3',    3]
        ]);

		var options2 = {
          pieHole: 0.6,
		  legend: {textStyle: {color: 'AEAEAE'}}
        };

        var chart2 = new google.visualization.PieChart(document.getElementById('chartdonut'));
        chart2.draw(data2, options2);
      } 
    </script>
	</head>
	<body>
	<div id='piechart_3d' class='chart' style='width: 500px; height: 500px;'></div>
	<div id='chartdonut' class='chart' style='width: 500px; height: 500px;'></div>
	</body>
</html>

Daniel LaLiberte

unread,

May 25, 2020, 10:36:40 PM5/25/20

to Google Visualization API

Your two PieCharts work fine for me, on jsfiddle: https://jsfiddle.net/dlaliberte/rnxcbjz3/14/

I shortened the height a bit for both.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/8cdf1cb8-fc88-4bc5-8a99-800f67a1936f%40googlegroups.com.

--

Daniel LaLiberte

dlaliberte@Google.com Cambridge MA

piano lab

unread,

May 26, 2020, 8:47:19 AM5/26/20

to Google Visualization API

Thank you for this answer, is it possible that it causes a conflict with the rest of my code, because I put it in this

public function widget( $args, $instance ) {
//charts here
}

Daniel LaLiberte

unread,

May 26, 2020, 12:17:56 PM5/26/20

to Google Visualization API

In general, you should be able to execute the JS code from inside another function, but how and when that function is called could make a difference for the end result. If it is called more than once, for example, then you might be loading the library more than once, which is probably going to confuse things. So we would need to see a more complete example to tell for sure what is going on, or if you can, it is best to point at your page directly.

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/77f3008a-051a-4ac3-b661-92fa7a6ff6e8%40googlegroups.com.

Message has been deleted

Daniel LaLiberte

unread,

May 26, 2020, 3:51:22 PM5/26/20

to Google Visualization API

You are loading the loader (gstatic.com/charts/loader.js) multiple times, which is not a good idea. You should move the script that loads the loader outside of the sidebar, preferably move it to the document head. And then only do it once.

Also, it is probably best to avoid calling google.charts.load more than once as well, especially when there are multiple independent threads which might confuse which callback goes with which load call. So move the google.charts.load calls to the head as well, and merge them into one (by merging the packages setting).

On Tue, May 26, 2020 at 2:27 PM piano lab <mainp...@gmail.com> wrote:

I made some tests, the conflict might be with my wordpress theme or the lightspeed cache plugin? Everything is fine if the page is outside the theme, but if I put the code on any page of my theme I only see the geo chart, then if i refresh the page I see the first pie chart appears, but it misses the two last charts. I made a try removing geo chart but I still only see the first pie chart.

Here's a page as example : https://www.greenlightmotion.com/profile-2/hawerchuk/

Thank you for your time.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/8cce60f8-9b12-4f42-8f6f-eb761b745bee%40googlegroups.com.

piano lab

unread,

May 26, 2020, 9:23:09 PM5/26/20

to Google Visualization API

I already tried all of that, but now i finally found the problem, it was a conflict with the plugin Lightspeed cache, the option "Load Google Fonts Asynchronously" was activated, I deactivated it and now everything is perfect. I appreciate your help, my brain was about to explode, have a good day!

Daniel LaLiberte

unread,

May 26, 2020, 9:44:04 PM5/26/20

to Google Visualization API

Great. Hopefully this will help other people using WordPress.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/9132279e-c606-45c0-ba01-408a118690eb%40googlegroups.com.

Reply all

Reply to author

Forward