Gauge "easing" animation is not working as expected

[Ivan Antić]

Hi devs,

I've successfully implemented real-time gauge charts with "refresh" and it works great!. 

One issue though, an animation has no "ease" effect at all, it just jumps from one value to updated one with no animation.

Any clue where am I doing wrong?.

The java script part:

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

function RefreshState() {

loadXMLDocIntoDiv('ActiveCalls','realtime.php?refresh=1'); <--- returns the data from php file with fsocket and sore it to div

GraphGaugeRealTimeActive();

}

function GraphGaugeRealTimeActive() {

var numActive = document.getElementById('ActiveCalls').innerText;

google.charts.load('current', {'packages':['gauge']});

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([

['Label', 'Value'],

['Active', 0],

['Ringing', 0],

['Waiting', 0],

]);

var options = {

width: 500, height: 250,

redFrom: 7, redTo: 10,

yellowFrom:5, yellowTo: 7,

//greenFrom:0, greenTo: 6,

minorTicks: 2,

majorTicks: [0,2,4,6,8,10],

max: 10,

//animation: {duration: 1000, easing: 'inAndOut'}

};

var chart = new google.visualization.Gauge(document.getElementById('gaugechart_active'));

data.setValue(0,1, numActive);

chart.draw(data, options);

}

}

The php part where the chart is sitting:

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

<div id="gaugechart_active" style="width:500px;"></div>

<div id="ActiveCalls" style="display:none"></div> <--- gauge function grabs the values from here and stores it.

<img src='onload.png' onload='setInterval(function() {RefreshState();}, 3000);'/>

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Thanks