Revisiting the example I created for you, the animation doesn't work because you were recreating the chart itself each time. In order to animate a chart, you have to keep the same chart, so I moved the creation out of the drawChart() function so it is only done one time. https://jsfiddle.net/dlaliberte/ok93zju0/
On Mon, Dec 7, 2015 at 10:14 AM, Juan Enrique <juanenriqu...@gmail.com> wrote: > thank you very much my dear, I served much your help :) > > Cheers > > 2015-12-07 8:06 GMT-06:00 'Daniel LaLiberte' via Google Visualization API > <google-visualization-api@googlegroups.com>: > >> Hi Juan, >> >> Your code works for me, with modifications to simplify it: >> http://jsfiddle.net/dlaliberte/ok93zju0/ >> Try starting from this example and add missing things one at a time until >> it fails. >> >> On Sat, Dec 5, 2015 at 8:25 PM, Juan Enrique <juanenriqu...@gmail.com> >> wrote: >> >>> Hi!, >>> >>> I have a problem with google chart (Stepped Area Chart), trying to make >>> an example of changing the values with a button (Changing the view window) >>> but I do not have any graphic appears, even copying directly from the >>> official website forum, here is my code, I hope I can help with this and I >>> especially have patience, thanks in advance. >>> >>> <!DOCTYPE html> >>> <html> >>> <head> >>> <title>grafico animado</title> >>> >>> <!--Import Google Icon Font--> >>> <link href="http://fonts.googleapis.com/icon?family=Material+Icons"; >>> rel="stylesheet"> >>> <!--Import materialize.css--> >>> <link type="text/css" rel="stylesheet" >>> href="css/materialize.min.css" media="screen,projection"/> >>> >>> <!--Let browser know website is optimized for mobile--> >>> <meta name="viewport" content="width=device-width, >>> initial-scale=1.0"/> >>> >>> <script type="text/javascript" src="https://www.google.com/jsapi >>> "></script> >>> <script type="text/javascript"> >>> google.load("visualization", "1", {packages:["corechart"]}); >>> google.setOnLoadCallback(drawChart); >>> >>> var options = { >>> title: 'Control de llenado', >>> vAxis: {title: 'Galones'}, >>> animation: { >>> duration: 1000, >>> easing: 'in' >>> }, >>> hAxis: {viewWindow: {min:0, max:5}} >>> }; >>> >>> var prevButton = document.getElementById('b1'); >>> var nextButton = document.getElementById('b2'); >>> >>> >>> >>> function drawChart() { >>> var data = new google.visualization.DataTable(); >>> data.addColumn('string', 'x'); >>> data.addColumn('number', 'Nivel del agua'); >>> var MAX = 8; >>> for (var i = 0; i < MAX; ++i) { >>> data.addRow([i.toString(), Math.floor(Math.random() * >>> 100)]);//i = tiempo lo otro es la cantidad recibida del sensor >>> } >>> >>> /* >>> var data = google.visualization.arrayToDataTable([ >>> ['Director (Year)', 'Rotten Tomatoes', 'IMDB'], >>> ['Alfred Hitchcock (1935)', 8.4, 7.9], >>> ['Ralph Thomas (1959)', 6.9, 6.5], >>> ['Don Sharp (1978)', 6.5, 6.4], >>> ['James Hawes (2008)', 4.4, 6.2] >>> ]); >>> */ >>> >>> var chart = new >>> google.visualization.SteppedAreaChart(document.getElementById('chart_div')); >>> >>> chart.draw(data, options); >>> } >>> >>> prevButton.onclick = function() { >>> options.hAxis.viewWindow.min -= 1; >>> options.hAxis.viewWindow.max -= 1; >>> drawChart(); >>> } >>> nextButton.onclick = function() { >>> options.hAxis.viewWindow.min += 1; >>> options.hAxis.viewWindow.max += 1; >>> drawChart(); >>> } >>> drawChart(); >>> </script> >>> </head> >>> <body> >>> <div class="row"> >>> <div id="chart_div" style="width: 900px; height: 500px;"></div> >>> </div> >>> <div class="row"> >>> <div class="col s12 l4"> >>> <a id="b1" class="waves-effect waves-teal btn-flat">Anterior</a> >>> </div> >>> <div class="col s12 l4"> >>> <a id="b2" class="waves-effect waves-teal btn-flat">Siguiente</a> >>> </div> >>> </div> >>> >>> <!--Import jQuery before materialize.js--> >>> <script type="text/javascript" src=" >>> https://code.jquery.com/jquery-2.1.1.min.js";></script> >>> <script type="text/javascript" >>> src="js/materialize.min.js"></script> >>> </body> >>> </html> >>> >>> >>> -- >>> 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 >>> http://groups.google.com/group/google-visualization-api. >>> To view this discussion on the web visit >>> https://groups.google.com/d/msgid/google-visualization-api/65e7ddde-dd61-4e21-8fd3-849f91a1643f%40googlegroups.com >>> <https://groups.google.com/d/msgid/google-visualization-api/65e7ddde-dd61-4e21-8fd3-849f91a1643f%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 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/SRCbuXX7ebA/unsubscribe >> . >> To unsubscribe from this group and all its topics, 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 >> http://groups.google.com/group/google-visualization-api. >> To view this discussion on the web visit >> https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJMaULogQM6k52f2r1ZAQ_aSMff5juaoPU7SdsbRvqnUjA%40mail.gmail.com >> <https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJMaULogQM6k52f2r1ZAQ_aSMff5juaoPU7SdsbRvqnUjA%40mail.gmail.com?utm_medium=email&utm_source=footer> >> . >> >> For more options, visit https://groups.google.com/d/optout. >> > > -- > 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 > http://groups.google.com/group/google-visualization-api. > To view this discussion on the web visit > https://groups.google.com/d/msgid/google-visualization-api/CAHsBCn_YfBPFNrSOo95jCSXq0Hxq77%2BNWeXcAc4Eer%3D719iisg%40mail.gmail.com > <https://groups.google.com/d/msgid/google-visualization-api/CAHsBCn_YfBPFNrSOo95jCSXq0Hxq77%2BNWeXcAc4Eer%3D719iisg%40mail.gmail.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/CAOtcSJM4jPA%3DVUZ3xiGxXFK9TThrZ%2Bdwy-b_uLxzUseig9yAkw%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
