setInterval(function () {
refreshGauge();
}, 5000);
var chart1 = null;
function refreshGauge() {
$.ajax({
type: "POST",
url: "Default.aspx/GetGuageData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var data;
var options = {
title: 'Run-rate',
width: 500, height: 500,
min: 0, max: 120,
redFrom: 0, redTo: 80,
yellowFrom: 101, yellowTo: 120,
greenFrom: 81, greenTo: 100,
minorTicks: 5,
majorTicks: ['0', '30', '60', '90', '120'],
animation: {
duration: 1000,
easing: 'inAndOut'
},
};
if (chart1 === null) {
chart1 = new google.visualization.Gauge($("#guageChart")[0]);
data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Production', 0]
]);
chart1.draw(data, options);
google.visualization.events.addOneTimeListener(chart1, 'ready', function () {
data = google.visualization.arrayToDataTable(response.d);
chart1.draw(data, options);
});
}
else {
data = google.visualization.arrayToDataTable(response.d);
}
chart1.draw(data, options);
},
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
}
The Google Gauge chart code above is having an issue with the animation not working properly. The needle on the gauge stays fixed to one value and does not move as intended at regular intervals. When the data is updated, the gauge lines are redrawn instead of smoothly animated. Looking for a solution to fix this cool animation effect.