Automatically animate graph when loaded, and loop infinitely

719 views
Skip to first unread message

arob...@mcgindex.com

unread,
Mar 17, 2015, 3:24:03 PM3/17/15
to google-visua...@googlegroups.com
I am a bit new to programming, and even newer to google charts.  I am pretty blown away with what is possible, and I think the instructions are great, however, the section in google charts for animation (https://developers.google.com/chart/interactive/docs/animation), is missing what I was trying to do.

I wanted to create a few charts on my homepage that are constantly animating, without the user clicking a button, just like the chart at the very top of the animation page (https://developers.google.com/chart/interactive/docs/animation).  But the instructions on this page only show me how to animate a chart once the user clicks a button, for example.  Is there a way to just go ahead and animate the chart once the page loads, and then just keep looping back and forth (adding data points, removing data points, etc.) until the user leaves the page?  It looks like I can do that, but there aren't any examples, which makes it a bit more difficult for me.

Similarly, I am having trouble understanding where the code is supposed to go for the animate features.  I can make a basic graph, but the examples on the animate page don't necessarily start from scratch.  It says "Start with an already rendered chart", which I did, but then I don't understand where to place the new code?

Thank you in advance to whomever can offer some insight into my issue.

Daniel LaLiberte

unread,
Mar 17, 2015, 4:13:43 PM3/17/15
to google-visua...@googlegroups.com
Generally what you need to do is use something like JavaScript's setTimeout (repeatedly) or setInterval (one time) to call the draw() method on the same chart giving it new data or options each time.  In your chart options, specify the animation duration, and use the same duration in your setInterval call, something like this:

var options = {
  animation: { duration: 1000 }
...
}

var chart = new google.visualization.LineChart(document.getElementById('myChart'));

// Draw the first time
chart.draw(data, options);

// Draw again every second.
setInteval(function() {
  chart.draw(newData, options);
}, 1000);

So basically, you could use the same function that you would give to the click handler, but it would be called on a timed basis instead.
Hope that helps. 

--
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 http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.



--
dlaliberte@Google.com   5CC, Cambridge MA
daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

arob...@mcgindex.com

unread,
Mar 17, 2015, 5:01:43 PM3/17/15
to google-visua...@googlegroups.com
Hi Daniel,

Thank you so much for responding!  I am still learning, but what you've outlined seems fairly straight forward.  I think I added the code into the correct section, but it isn't working.  I apologize in advance, I am not an advanced coder, but I am taking online classes to learn.

That being said, I am having trouble debugging this.  I've attached my code, but I will also paste it below.  Sorry if this seems very basic, but I am extremely grateful for your help.

Best,
Adam

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1.1", {packages:["bar"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);
        
var newData = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 2000, 800, 400],
          ['2015', 2000, 720, 500],
          ['2016', 1220, 2240, 600],
          ['2017', 2060, 1000, 700]
        ]);

        var options = {
          animation: { duration: 5000 }
 chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          }
        };

        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

        chart.draw(data, options);
// Draw again every second.
           setInteval(function() {
           chart.draw(newData, options);
           }, 1000);
      }
    </script>
  </head>
  <body>
    <div id="columnchart_material" style="width: 900px; height: 500px;"></div>
  </body>
</html>


That being said, I think I either placed the code in the wrong space, or I think their might be an issue when I get to the variable titled 'newData'.  

On Tuesday, March 17, 2015 at 1:13:43 PM UTC-7, Daniel LaLiberte wrote:
Generally what you need to do is use something like JavaScript's setTimeout (repeatedly) or setInterval (one time) to call the draw() method on the same chart giving it new data or options each time.  In your chart options, specify the animation duration, and use the same duration in your setInterval call, something like this:

var options = {
  animation: { duration: 1000 }
...
}

var chart = new google.visualization.LineChart(document.getElementById('myChart'));

// Draw the first time
chart.draw(data, options);

// Draw again every second.
setInteval(function() {
  chart.draw(newData, options);
}, 1000);

So basically, you could use the same function that you would give to the click handler, but it would be called on a timed basis instead.
Hope that helps. 
On Tue, Mar 17, 2015 at 3:24 PM, <arob...@mcgindex.com> wrote:
I am a bit new to programming, and even newer to google charts.  I am pretty blown away with what is possible, and I think the instructions are great, however, the section in google charts for animation (https://developers.google.com/chart/interactive/docs/animation), is missing what I was trying to do.

I wanted to create a few charts on my homepage that are constantly animating, without the user clicking a button, just like the chart at the very top of the animation page (https://developers.google.com/chart/interactive/docs/animation).  But the instructions on this page only show me how to animate a chart once the user clicks a button, for example.  Is there a way to just go ahead and animate the chart once the page loads, and then just keep looping back and forth (adding data points, removing data points, etc.) until the user leaves the page?  It looks like I can do that, but there aren't any examples, which makes it a bit more difficult for me.

Similarly, I am having trouble understanding where the code is supposed to go for the animate features.  I can make a basic graph, but the examples on the animate page don't necessarily start from scratch.  It says "Start with an already rendered chart", which I did, but then I don't understand where to place the new code?

Thank you in advance to whomever can offer some insight into my issue.

--
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 http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.



--
dlali...@Google.com   5CC, Cambridge MA
daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA
AnimateExample2.html

Daniel LaLiberte

unread,
Mar 17, 2015, 5:08:39 PM3/17/15
to google-visua...@googlegroups.com
I just used newData to represent whatever you will provide for new data.  The first example code on the animation docs page https://developers.google.com/chart/interactive/docs/animation will give you an idea of one way you can change the data and call chart.draw() with it.


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 http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.



--
dlaliberte@Google.com   5CC, Cambridge MA
daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

Adam Robbins

unread,
Mar 17, 2015, 5:34:50 PM3/17/15
to google-visua...@googlegroups.com
Can I loop those though so, for instance, instead of this calling some new datatable after 5 seconds, it calls a new datatable with random datapoints?  I was thinking something comparable to the the excel function... randbetween(x,y).

I am essentially trying to show a graph on my website that changes every 5 seconds.  Doesn't really matter what the data is, I am really just trying to visually show changing data every 5 seconds.  Is that even possible?

Thanks again.

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/utx2tXMnb2s/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.



--
Adam Robbins | Director
Supply Chain Engagement
MindClick
phone: (845) 548-3846 email: arob...@mcgindex.com
Bend-San Francisco
www.mcgindex.com



This electronic message was sent from MindClick and may contain confidential or privileged information. If you believe that you are not the intended recipient, be aware that any disclosure, copying, distribution or use of this electronic message or its contents is prohibited. If you received this electronic message in error, please immediately notify the sender by telephone or by electronic mail. MindClick reserves the right to monitor all e-mail communications.

Daniel LaLiberte

unread,
Mar 17, 2015, 7:10:57 PM3/17/15
to google-visua...@googlegroups.com
Your new data can either be a new datatable or the same datatable with changed data.  You can also use DataViews by the way.  The key thing for animation is that it is the same chart object, so keep using the same chart object rather than creating a new one.

Adam Robbins

unread,
Mar 17, 2015, 8:40:17 PM3/17/15
to google-visualization-api
Hi Daniel,

I really appreciate all of your input today, but I think I've bitten off more than I can chew.  I've only really got a basic understanding of html/css and some javascript.  This is proving to be a bit more complex than I had hoped, so I might have to table this idea until I can figure out how to code this properly.

Thanks again for your time today.
Reply all
Reply to author
Forward
0 new messages