Gauge Chart animation doesn't seem to work.

[Bevan]

Hello.

In the options part for a Gauge Chart, I have this:

        var options = {
          width: 400, height: 400,
 greenFrom: 0, greenTo: sales,
          minorTicks: 5, max: dayTarget
 
        };

That works fine.

If I want to add animation, the docs say to use animation.easing: 'out' to make it slow down at the end. Instead, the gauge simply fails to render.

What am I doing wrong?

[Bevan]

Also, if I do this :

 var options = {
          width: 400, height: 400,
 greenFrom: 0, greenTo: sales,

          minorTicks: 5, max: dayTarget,
animation:{duration: 5000, easing: 'inAndOut'}
 
        };

the gauge renders, but the animation does not work. I want a slowly climbing needle over about 5 seconds. 

[Sergey Grabkovsky]

Hi Bevan,

Animation only occurs when there is a change in data. If you initially render your chart with an animation, that animation will not play. So if you want the chart to animate from zero, you will have to draw it twice; once with the values set to zero, and another time with the values set to where you want them to animate to. Here is an example: http://jsfiddle.net/73wztez3/

--
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.
For more options, visit https://groups.google.com/d/optout.

[Bevan]

OK, I've got that working bar one thing: the value shown in the gauge changes, but the label does not. So the pointer climbs to [value] but the big letters say the value is 0. 

Here's my code:

<!--  ------------------------  make Code for Today graph  -------------------------------  -->
      google.setOnLoadCallback(drawChart);
      function drawChart() {
var sales = @todaySales;
var dayTarget = @dailyTarget;
var apdTarget = 22500;
var green = 0;
if (sales < 0) {green = 0} else {green = sales};
        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Today', 0],           
        ]);

// format column 1 of DataTable data

 

var formatter = new google.visualization.NumberFormat({pattern: '$#,###.00'});
formatter.format(data, 1);

 

        var options = {
          width: 400, height: 400,

 greenFrom: 0, greenTo: green,

          minorTicks: 5, max: dayTarget,
 animation: {duration: 5000, easing: 'inAndOut'}
        };

        var chart = new google.visualization.Gauge(document.getElementById('daily_Sales'));
        chart.draw(data, options);
  data.setValue(0,1, sales);
        chart.draw(data, options);

      }; 

The variables prefixed with an @ are declared higher up in the CSHTML page. If i substitute them for a fixed value, i still get 0. See attached image. 

[Andrew Gallant]

You are setting the formatted value of the cell when you call formatter.format(data, 1); and the formatted value is not overwritten when you change the actual value of the cell.  You need to reformat your data after calling #setCell:

chart.draw(data, options);

data.setValue(0,1, sales);

formatter.format(data, 1);

chart.draw(data, options);

[Bevan]

Perfect. Thanks. BTW, how do we mark the question as answered or solved?

[Sergey Grabkovsky]

This is just a forum, we don't keep track of questions being resolved or not. Conceivably, we could lock or delete the thread, but it's far more useful if people can come back to it and ask follow-up questions if they need to.

--