Issues with gauge animation

[GregM]

I am having issues with my gauge animating when changing values. Every
time I call chart.draw(), the gauge completely redraws it self instead
of animating the needle. In firefox. the gauge flashes white, then
redraws it self with the needle in the correct position, in chrome the
needle just jumps from position to position.

This is the javascript I am running.

<script type='text/javascript' src='https://www.google.com/jsapi'></
script>
<script type='text/javascript'>
var cpm, chart, data, options;
google.load('visualization', '1', { packages: ['gauge'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
data = new google.visualization.DataTable();
chart = new
google.visualization.Gauge(document.getElementById('chart_div'));
data.addColumn('string', 'Label');
data.addColumn('number', 'Value');
data.addRows(1);
data.setValue(0, 0, 'CPM');
data.setValue(0, 1, 100);
options = { width: 400, height: 400, redFrom: 600, redTo:
800,
yellowFrom: 400, yellowTo: 600, greenFrom: 200,
greenTo: 400, minorTicks: 10, majorTicks: 100, min: 0, max: 800
};
chart.draw(data, options);
setInterval(function () {
cpm = Math.floor(Math.random()*700);
data.setValue(0, 1, cpm);
chart.draw(data, options);
}, 400);
}
</script>

Thank you for all your help!

Greg

[NA]

I recommend using a ChartWrapper to create the Gauge. Then call the
ChartWrapper.draw() method without any inputs.

If you call Gauge.draw(dataTable, options), the chart is redrawn with
the datatable.

You might be able to call Gauge.draw() without any inputs, though I'm
not sure if the Gauge supports that. The ChartWrapper does, which is
one reason why it's useful for updates.

hth.

[asgallant]

You are using the majorTicks option wrong (comment it out and the gauge animates correctly).  It takes an array of string labels, not a number.  The gauge puts a number of major tick marks equal to the number of elements in the array (default is 5 elements, with the minimum and maximum values with 3 empty strings in between).  If you want major tick marks every 100, you need a 9-element array, like this:

majorTicks: ['0', '', '', '', '', '', '', '', '800']

[GregM]

This was the solution. Thank you very much!