Google Chart (SteppedAreaChart)

57 views
Skip to first unread message

Juan Enrique

unread,
Dec 5, 2015, 8:25:47 PM12/5/15
to Google Visualization API
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>


Daniel LaLiberte

unread,
Dec 7, 2015, 9:07:00 AM12/7/15
to Google Visualization API
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.

--
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.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/65e7ddde-dd61-4e21-8fd3-849f91a1643f%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

Juan Enrique

unread,
Dec 7, 2015, 10:14:43 AM12/7/15
to google-visua...@googlegroups.com
thank you very much my dear, I served much your help :)

Cheers

--
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-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.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJMaULogQM6k52f2r1ZAQ_aSMff5juaoPU7SdsbRvqnUjA%40mail.gmail.com.

Daniel LaLiberte

unread,
Jun 28, 2016, 10:52:51 AM6/28/16
to Google Visualization API
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/

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAHsBCn_YfBPFNrSOo95jCSXq0Hxq77%2BNWeXcAc4Eer%3D719iisg%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages