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.
On Tue, Mar 17, 2015 at 5:34 PM, Adam Robbins <[email protected]> wrote: > 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. > > On Tue, Mar 17, 2015 at 2:08 PM, 'Daniel LaLiberte' via Google > Visualization API <[email protected]> wrote: > >> 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. >> >> >> On Tue, Mar 17, 2015 at 5:01 PM, <[email protected]> wrote: >> >>> 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, <[email protected]> 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 [email protected]. >>>>> To post to this group, send email to [email protected]. >>>>> Visit this group at http://groups.google.com/ >>>>> group/google-visualization-api. >>>>> For more options, visit https://groups.google.com/d/optout. >>>>> >>>> >>>> >>>> >>>> -- >>>> Daniel LaLiberte >>>> <https://plus.google.com/100631381223468223275?prsrc=2> - 978-394-1058 >>>> [email protected] 5CC, Cambridge MA >>>> [email protected] 9 Juniper Ridge Road, Acton MA >>>> >>> -- >>> 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 [email protected]. >>> To post to this group, send email to >>> [email protected]. >>> Visit this group at >>> http://groups.google.com/group/google-visualization-api. >>> For more options, visit https://groups.google.com/d/optout. >>> >> >> >> >> -- >> Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> >> - 978-394-1058 >> [email protected] <[email protected]> 5CC, Cambridge MA >> [email protected] <[email protected]> 9 Juniper Ridge >> Road, Acton MA >> >> -- >> 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 >> [email protected]. >> To post to this group, send email to >> [email protected]. >> 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: [email protected] > 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. > > -- > 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 [email protected]. > To post to this group, send email to > [email protected]. > Visit this group at > http://groups.google.com/group/google-visualization-api. > For more options, visit https://groups.google.com/d/optout. > -- Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> - 978-394-1058 [email protected] <[email protected]> 5CC, Cambridge MA [email protected] <[email protected]> 9 Juniper Ridge Road, Acton MA -- 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 [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/d/optout.
