Google API : gauge animation

solidfox picture solidfox · Jul 5, 2012 · Viewed 9.6k times · Source

I am trying to make google gauge pointer move, but it is not moving, I have set animation configuration as it suppose to be set in var options , such as duration : 1000 and easing: 'inAndOut' , I am n00b in Google API so for give my ignorance attempt.

can anyone help me. here is the tutorial link that I am using it. the code is working but partially, the gauge pointer should move slowly to it's max, however, in my case it wont work. here is the code.

<html>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
  google.load('visualization', '1', {packages:['gauge']});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      ['Match',80],
    ]);

    var options = {
      width: 440, height: 140,
      greenFrom: 70, greenTo: 100,
      yellowFrom:50, yellowTo: 70,
      redFrom:0, redTo: 50,
      minorTicks: 5,
      animation:{
          duration: 1000,
          easing: 'inAndOut',
        },
      majorTicks : ['0','10','20','30','40','50','60','70','80','90','100']
    };

    var chart = new google.visualization.Gauge(document.getElementById('chart_div<%=id%>'));
    chart.draw(data, options);
    clearChart();
  }
</script>
</html>

Answer

Alex Weber picture Alex Weber · Jan 19, 2013

Turns out I figured this one out myself, there's a nice answer in a google forums here

The trick is to start the gauge off with a 0 (or whatever your minimum) value is and then update the value later (using setInterval() or any other method)

There's definitely better ways of updating the value instead of just writing a new array but you get the idea.

<html>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
  google.load('visualization', '1', {packages:['gauge']});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      ['Match',0],
    ]);

    var options = {
      width: 440, height: 140,
      greenFrom: 70, greenTo: 100,
      yellowFrom:50, yellowTo: 70,
      redFrom:0, redTo: 50,
      minorTicks: 5,
      animation:{
          duration: 1000,
          easing: 'inAndOut',
        },
      majorTicks : ['0','10','20','30','40','50','60','70','80','90','100']
    };

    var chart = new google.visualization.Gauge(document.getElementById('chart_div<%=id%>'));
    chart.draw(data, options);
    clearChart();

    // This is new.
    setTimeout(function(){
      var data = google.visualization.arrayToDataTable([
        ['Label', 'Value'],
        ['Match',80],
      ]);
      chart.draw(data, options);
    }, 200);
  }
</script>
</html>