Your code creates a new chart each time you push the buttons, and that's why the startup animation applies each time. So you need to instead only create the chart one time, and then only call chart.draw() when you change the data or options.
On Mon, May 23, 2016 at 9:26 AM, Nico van de Mortel <nicovdmor...@gmail.com> wrote: > I have one more question. I want to do this: > > https://developers.google.com/chart/interactive/docs/animation#changing-the-view-window > > But now the view is not changing from 0-5 to 4-5. It's redrawing > everything but I don't want to redraw it. > http://codepen.io/anon/pen/dMxVNY > > > Op maandag 23 mei 2016 12:48:50 UTC+2 schreef Daniel LaLiberte: >> >> The packages you load need to be consistent with the parts of the library >> that you are using. Loading 'corechart' is what you should do if you only >> use corechart functions. >> >> The problem the following: >> >> var chart = new google.charts.Bar(document.getElementById('columnchart')); >> >> >> That's what you need to change as well, to use >> google.visualization.ColumnChart instead. You will also need to NOT >> convert the options. >> >> Look at your JavaScript console for errors. >> >> On Sun, May 22, 2016 at 2:32 PM, Nico van de Mortel <nicovd...@gmail.com> >> wrote: >> >>> Sorry, I mean this: >>> >>> google.charts.load('43', {'packages':['corechart']}); >>> >>> >>> Is there any way to use column chart (with isStacked = true function) >>> with using animation? >>> >>> >>> Op zondag 22 mei 2016 20:27:14 UTC+2 schreef Nico van de Mortel: >>> >>>> So this should work? >>>> >>>> google.charts.load('43', {'packages':['bar', 'corechart']}); >>>> >>>> >>>> Because in this case all of my charts disappears.. >>>> >>>> >>>> Op zondag 22 mei 2016 19:04:04 UTC+2 schreef Daniel LaLiberte: >>>>> >>>>> The material Bar chart does not support animation. Use the >>>>> non-material (or 'classic') corecharts for animation. >>>>> >>>>> On Sun, May 22, 2016 at 6:45 AM, Nico van de Mortel < >>>>> nicovd...@gmail.com> wrote: >>>>> >>>>>> I'm using Google Charts. It has an animation function but this one is >>>>>> not working for me. The documentation says that you have to add something >>>>>> like this: >>>>>> >>>>>> animation: { >>>>>> startup:true, >>>>>> duration: 2000, >>>>>> easing: 'in', >>>>>> }, >>>>>> >>>>>> to your options. But that is not working for me and I can't see why. >>>>>> >>>>>> >>>>>> I made a codepen you can find here: http://codepen.io/anon/pen/ZWNrOg >>>>>> >>>>>> >>>>>> >>>>>> HTML: >>>>>> >>>>>> <script type="text/javascript" >>>>>> src="https://www.gstatic.com/charts/loader.js";></script> >>>>>> <div id="columnchart"></div><button type="button" >>>>>> onclick="drawChartColumn('zoom')">Zoom</button><button type="button" >>>>>> onclick="drawChartColumn('column1')">Column1</button><button >>>>>> type="button" onclick="drawChartColumn('column2')">Column2</button> >>>>>> >>>>>> CSS >>>>>> >>>>>> #columnchart { >>>>>> height: 300px; >>>>>> width: 500px;} >>>>>> >>>>>> Javascript >>>>>> >>>>>> google.charts.load('43', {'packages':['bar', 'corechart']}); >>>>>> google.charts.setOnLoadCallback(drawChart); >>>>>> function drawChart(category) { >>>>>> drawChartColumn();} >>>>>> function drawChartColumn(category) { >>>>>> >>>>>> var data = google.visualization.arrayToDataTable([ >>>>>> ['Jaar', 'Nummer1', 'Nummer2'], >>>>>> ['2015', 238000000, 9400000000], >>>>>> ['2016', 275000000, 9700000000], >>>>>> ['2017', 339000000, 9900000000], >>>>>> ['2018', 369000000, 10100000000], >>>>>> ['2019', 3690000, 101000000], >>>>>> ]); >>>>>> >>>>>> >>>>>> if(category == 'zoom'){ >>>>>> var options = { >>>>>> isStacked: true, >>>>>> animation: { >>>>>> startup:true, >>>>>> duration: 2000, >>>>>> easing: 'in', >>>>>> }, >>>>>> hAxis: {viewWindow: {min:3, max:4}}, >>>>>> vAxis: {viewWindow: {min:0, max:3000000}} >>>>>> }; >>>>>> } >>>>>> else { >>>>>> var options = { >>>>>> isStacked: true, >>>>>> animation: { >>>>>> startup:true, >>>>>> duration: 2000, >>>>>> easing: 'in', >>>>>> }, >>>>>> hAxis: {viewWindow: {min:0, max:5}} >>>>>> }; >>>>>> } >>>>>> >>>>>> var chart = new >>>>>> google.charts.Bar(document.getElementById('columnchart')); >>>>>> >>>>>> >>>>>> var view = new google.visualization.DataView(data); >>>>>> var viewColumns = [0]; >>>>>> >>>>>> switch (category) { >>>>>> case 'column2': >>>>>> viewColumns.push(1); >>>>>> viewColumns.push(2); >>>>>> break; >>>>>> >>>>>> case 'column1': >>>>>> viewColumns.push(1); >>>>>> break; >>>>>> >>>>>> default: >>>>>> viewColumns.push(1); >>>>>> } >>>>>> >>>>>> view.setColumns(viewColumns); >>>>>> chart.draw(view, google.charts.Bar.convertOptions(options));} >>>>>> >>>>>> Google has example code but that doesn't work for me. I want to do 2 >>>>>> things: >>>>>> >>>>>> - zoom to a value with animation like this example: >>>>>> >>>>>> https://developers.google.com/chart/interactive/docs/animation#changing-the-view-window >>>>>> - change number of columns like this example: >>>>>> >>>>>> https://developers.google.com/chart/interactive/docs/animation#adding-and-removing-columns >>>>>> >>>>>> -- >>>>>> 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+unsubscr...@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/9e0a404e-a5d5-400c-addc-0a18ac74b506%40googlegroups.com >>>>>> <https://groups.google.com/d/msgid/google-visualization-api/9e0a404e-a5d5-400c-addc-0a18ac74b506%40googlegroups.com?utm_medium=email&utm_source=footer> >>>>>> . >>>>>> For more options, visit https://groups.google.com/d/optout. >>>>>> >>>>> >>>>> >>>>> >>>>> -- >>>>> Daniel LaLiberte >>>>> <https://plus.google.com/100631381223468223275?prsrc=2> >>>>> dlali...@google.com 5CC, Cambridge 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 google-visualization-api+unsubscr...@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/88a2a007-a55d-4691-a225-cc140d13c2b3%40googlegroups.com >>> <https://groups.google.com/d/msgid/google-visualization-api/88a2a007-a55d-4691-a225-cc140d13c2b3%40googlegroups.com?utm_medium=email&utm_source=footer> >>> . >>> >>> For more options, visit https://groups.google.com/d/optout. >>> >> >> >> >> -- >> Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> >> dlali...@google.com 5CC, Cambridge 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 google-visualization-api+unsubscr...@googlegroups.com. > To post to this group, send email to > google-visualization-api@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/9aea355c-35a8-455d-983b-0564e9dfd84a%40googlegroups.com > <https://groups.google.com/d/msgid/google-visualization-api/9aea355c-35a8-455d-983b-0564e9dfd84a%40googlegroups.com?utm_medium=email&utm_source=footer> > . > > For more options, visit https://groups.google.com/d/optout. > -- Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> dlalibe...@google.com <dlalibe...@google.com> 5CC, Cambridge 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 google-visualization-api+unsubscr...@googlegroups.com. To post to this group, send email to google-visualization-api@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/CAOtcSJOQUT6SgHK0MFw%2BfQjhej720hpYpzhuYAXQuyuy8%2BTA0g%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
