Google Charts Animation and multiple charts on single page

78 views
Skip to first unread message

Tyler Gerow

unread,
May 19, 2016, 3:52:16 PM5/19/16
to Google Visualization API
I'm literally having some serious issues with Google charts right now...  First of all I can't get the animation function to work properly.

Currently with coding that looks like this:
var options = {
          'title': 'Profits',
      'animation':{
       duration: 4000,
       easing: 'out',
       startup: true,
       },



Doesn't do the easing or start from 0.. it just loads the graph completely.


Also I have multiple charts on one page and it only loads the first chart on the page..  Any suggestions?  Thanks

Daniel LaLiberte

unread,
May 19, 2016, 4:15:19 PM5/19/16
to Google Visualization API
Hi Tyler,

I would guess you are using material charts, which don't support animation yet.  If you really want animation, use the classic charts.  

The material charts also have had problems with multiple charts on the same page.  Use the new gstatic loader with the more recent versions of the code and this should work for you.



--
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 post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/a77987ef-f5bd-43b7-b332-5e5381401e79%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

Tyler Gerow

unread,
May 19, 2016, 4:17:40 PM5/19/16
to Google Visualization API
Thanks so much Daniel...  currently this is the data code I am inputing.  Is this material chart coding?

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

      function drawChart() {
        var data = new google.visualization.arrayToDataTable([
          ['Month', 'Profit'],
          ['<?php echo date("M", strtotime("-12 months"));echo '-'; echo date("M", strtotime("-10 months"));?>', <?= $row['availbal']?> ],
          ['<?php echo date("M", strtotime("-9 months"));echo '-'; echo date("M", strtotime("-7 months"));?>', 0],
          ['<?php echo date("M", strtotime("-6 months"));echo '-'; echo date("M", strtotime("-4 months"));?>', 0],
          ['<?php echo date("M", strtotime("-3 months"));echo '-'; echo date("M", strtotime("-1 months"));?>', 0],
        ]);



On Thursday, May 19, 2016 at 10:15:19 AM UTC-10, Daniel LaLiberte wrote:
Hi Tyler,

I would guess you are using material charts, which don't support animation yet.  If you really want animation, use the classic charts.  

The material charts also have had problems with multiple charts on the same page.  Use the new gstatic loader with the more recent versions of the code and this should work for you.


On Thu, May 19, 2016 at 3:52 PM, Tyler Gerow <tyle...@gmail.com> wrote:
I'm literally having some serious issues with Google charts right now...  First of all I can't get the animation function to work properly.

Currently with coding that looks like this:
var options = {
          'title': 'Profits',
      'animation':{
       duration: 4000,
       easing: 'out',
       startup: true,
       },



Doesn't do the easing or start from 0.. it just loads the graph completely.


Also I have multiple charts on one page and it only loads the first chart on the page..  Any suggestions?  Thanks

--
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-visualization-api+unsub...@googlegroups.com.



--

Tyler Gerow

unread,
May 19, 2016, 4:21:57 PM5/19/16
to Google Visualization API
I'm using the gstatic loader as well I believe. 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

Daniel LaLiberte

unread,
May 19, 2016, 5:26:54 PM5/19/16
to Google Visualization API
You are using the material Bar chart.  You left out the call of google.charts.Bar(), but I see you are loading the 'bar' package.

Since you are using the gstatic loader, I thought we had fixed this problem for 'current', but perhaps there is still a problem.  Could you replace 'current' with '42' or '43' to see if that helps?  If it doesn't help, I'll need to see your web page.

On Thu, May 19, 2016 at 4:21 PM, Tyler Gerow <tyle...@gmail.com> wrote:
I'm using the gstatic loader as well I believe. 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

--
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 post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/76d1887b-9403-4160-9828-89c51ee27726%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Tyler Gerow

unread,
May 19, 2016, 5:33:45 PM5/19/16
to Google Visualization API
I replaced the 42.  still no animation.. Where do I find the documentation for the classic charts?


On Thursday, May 19, 2016 at 11:26:54 AM UTC-10, Daniel LaLiberte wrote:
You are using the material Bar chart.  You left out the call of google.charts.Bar(), but I see you are loading the 'bar' package.

Since you are using the gstatic loader, I thought we had fixed this problem for 'current', but perhaps there is still a problem.  Could you replace 'current' with '42' or '43' to see if that helps?  If it doesn't help, I'll need to see your web page.
On Thu, May 19, 2016 at 4:21 PM, Tyler Gerow <tyle...@gmail.com> wrote:
I'm using the gstatic loader as well I believe. 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

--
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-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

Daniel LaLiberte

unread,
May 19, 2016, 5:35:50 PM5/19/16
to Google Visualization API
The material charts will not support animation.  The non-material classic charts are everything else.  So use google.visualization.ColumnChart instead.  You'll have no problem with multiple charts in the same page also.

If you want the material colors and fonts in the classic charts, you can try adding theme: 'material' to your options.

On Thu, May 19, 2016 at 5:33 PM, Tyler Gerow <tyle...@gmail.com> wrote:
I replaced the 42.  still no animation.. Where do I find the documentation for the classic charts?

On Thursday, May 19, 2016 at 11:26:54 AM UTC-10, Daniel LaLiberte wrote:
You are using the material Bar chart.  You left out the call of google.charts.Bar(), but I see you are loading the 'bar' package.

Since you are using the gstatic loader, I thought we had fixed this problem for 'current', but perhaps there is still a problem.  Could you replace 'current' with '42' or '43' to see if that helps?  If it doesn't help, I'll need to see your web page.
On Thu, May 19, 2016 at 4:21 PM, Tyler Gerow <tyle...@gmail.com> wrote:
I'm using the gstatic loader as well I believe. 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

--
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 post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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 post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/781cef74-fb9c-4999-bbb7-dd305744c737%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--

Tyler Gerow

unread,
May 19, 2016, 5:54:01 PM5/19/16
to Google Visualization API
Your the man Daniel!  It worked after changing the package to corechart as well..!!  Thanks so much for the help!  but now I am having the problem of loading multiple charts.


On Thursday, May 19, 2016 at 11:35:50 AM UTC-10, Daniel LaLiberte wrote:
The material charts will not support animation.  The non-material classic charts are everything else.  So use google.visualization.ColumnChart instead.  You'll have no problem with multiple charts in the same page also.

If you want the material colors and fonts in the classic charts, you can try adding theme: 'material' to your options.
On Thu, May 19, 2016 at 5:33 PM, Tyler Gerow <tyle...@gmail.com> wrote:
I replaced the 42.  still no animation.. Where do I find the documentation for the classic charts?

On Thursday, May 19, 2016 at 11:26:54 AM UTC-10, Daniel LaLiberte wrote:
You are using the material Bar chart.  You left out the call of google.charts.Bar(), but I see you are loading the 'bar' package.

Since you are using the gstatic loader, I thought we had fixed this problem for 'current', but perhaps there is still a problem.  Could you replace 'current' with '42' or '43' to see if that helps?  If it doesn't help, I'll need to see your web page.
On Thu, May 19, 2016 at 4:21 PM, Tyler Gerow <tyle...@gmail.com> wrote:
I'm using the gstatic loader as well I believe. 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

--
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-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

Daniel LaLiberte

unread,
May 19, 2016, 6:01:17 PM5/19/16
to Google Visualization API
Only call google.charts.load() one time.  You don't need it more than once anyway if you are loading the same package every time.

On Thu, May 19, 2016 at 5:54 PM, Tyler Gerow <tyle...@gmail.com> wrote:
Your the man Daniel!  It worked after changing the package to corechart as well..!!  Thanks so much for the help!  but now I am having the problem of loading multiple charts.

On Thursday, May 19, 2016 at 11:35:50 AM UTC-10, Daniel LaLiberte wrote:
The material charts will not support animation.  The non-material classic charts are everything else.  So use google.visualization.ColumnChart instead.  You'll have no problem with multiple charts in the same page also.

If you want the material colors and fonts in the classic charts, you can try adding theme: 'material' to your options.
On Thu, May 19, 2016 at 5:33 PM, Tyler Gerow <tyle...@gmail.com> wrote:
I replaced the 42.  still no animation.. Where do I find the documentation for the classic charts?

On Thursday, May 19, 2016 at 11:26:54 AM UTC-10, Daniel LaLiberte wrote:
You are using the material Bar chart.  You left out the call of google.charts.Bar(), but I see you are loading the 'bar' package.

Since you are using the gstatic loader, I thought we had fixed this problem for 'current', but perhaps there is still a problem.  Could you replace 'current' with '42' or '43' to see if that helps?  If it doesn't help, I'll need to see your web page.
On Thu, May 19, 2016 at 4:21 PM, Tyler Gerow <tyle...@gmail.com> wrote:
I'm using the gstatic loader as well I believe. 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

--
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 post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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 post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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 post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/1d32dd41-8879-4918-a80a-82770cb26b37%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--

Sheng Yi Lee

unread,
May 24, 2016, 2:38:35 AM5/24/16
to Google Visualization API
Hi Daniel,

I'm having the same problem as Tyler - I can't seem to load multiple charts separately, they appear to be overlapping each other.

This is the code I'm using:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('43', {packages: ['corechart']});
  google.charts.setOnLoadCallback(drawGID);
  google.charts.setOnLoadCallback(drawGID2);

    // [START gid]
    function drawGID() {
      var query = new google.visualization.Query(
      query.send(handleQueryResponse);
    }

function handleQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }

      var data = response.getDataTable();

      var options = {
          curveType: 'function',
          legend: { position: 'bottom' },
          width: '100%',
          height: '600',
          chartArea: { height: '80%', width: '80%' },
          backgroundColor: '#fbf8f3',
          fontName: 'national',
          fontSize: '14',
         
        };
      var chart = new google.visualization.LineChart(document.getElementById('chart_growth'));
      chart.draw(data, options);
    }

    // [START gid]
    function drawGID2() {
      var query = new google.visualization.Query(
      query.send(handleQueryResponse);
    }

function handleQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }

      var data2 = response.getDataTable();

      var options2 = {
          curveType: 'function',
          legend: { position: 'bottom' },
          width: '100%',
          height: '600',
          chartArea: { height: '80%', width: '80%' },
          backgroundColor: '#fbf8f3',
          fontName: 'national',
          fontSize: '14',

         
        };
      var chart2 = new google.visualization.LineChart(document.getElementById('chart_index'));
      chart2.draw(data2, options2);
    }

$(window).resize(function(){
  drawGID();
  drawGID2();
});
    // [END gid]
</script>

And my HTML:
<div class="row">
<div id="chart_growth"></div>
</div>
<div class="row">
<div id="chart_index">
</div>

Is there something I've done wrong with my code?

On Friday, May 20, 2016 at 8:01:17 AM UTC+10, Daniel LaLiberte wrote:
Only call google.charts.load() one time.  You don't need it more than once anyway if you are loading the same package every time.
On Thu, May 19, 2016 at 5:54 PM, Tyler Gerow <tyle...@gmail.com> wrote:
Your the man Daniel!  It worked after changing the package to corechart as well..!!  Thanks so much for the help!  but now I am having the problem of loading multiple charts.

On Thursday, May 19, 2016 at 11:35:50 AM UTC-10, Daniel LaLiberte wrote:
The material charts will not support animation.  The non-material classic charts are everything else.  So use google.visualization.ColumnChart instead.  You'll have no problem with multiple charts in the same page also.

If you want the material colors and fonts in the classic charts, you can try adding theme: 'material' to your options.
On Thu, May 19, 2016 at 5:33 PM, Tyler Gerow <tyle...@gmail.com> wrote:
I replaced the 42.  still no animation.. Where do I find the documentation for the classic charts?

On Thursday, May 19, 2016 at 11:26:54 AM UTC-10, Daniel LaLiberte wrote:
You are using the material Bar chart.  You left out the call of google.charts.Bar(), but I see you are loading the 'bar' package.

Since you are using the gstatic loader, I thought we had fixed this problem for 'current', but perhaps there is still a problem.  Could you replace 'current' with '42' or '43' to see if that helps?  If it doesn't help, I'll need to see your web page.
On Thu, May 19, 2016 at 4:21 PM, Tyler Gerow <tyle...@gmail.com> wrote:
I'm using the gstatic loader as well I believe. 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

--
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-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

Daniel LaLiberte

unread,
May 24, 2016, 11:09:42 AM5/24/16
to Google Visualization API
Hi Sheng,

You need to rename your second handleQueryResponse function, since it otherwise replaces your first definition.  Otherwise looks fine.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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 post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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 post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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 post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/7816f3d6-6e41-40cf-b0be-c0ad299938ca%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--

Sheng Yi Lee

unread,
May 24, 2016, 7:59:40 PM5/24/16
to Google Visualization API
Thanks Daniel - all working now!
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--
Reply all
Reply to author
Forward
0 new messages