Google API : gauge animation
-
19-06-2021 - |
سؤال
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>
المحلول
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>
نصائح أخرى
Not sure if this will help anyone now, but I found using the setValue method moved me from static to animated needles. Below is a code snippet (I've got a number of gauge widgets, hence the array).
// set up the value here that we are moving from - this allows the gauge needle to animate when we set the actual value later
if (!widgetArray[i].googleArrayToDataTable) { // check if we've initialised
widgetArray[i].googleArrayToDataTable = new google.visualization.arrayToDataTable([
['Label', 'Value'],
[widgetArray[i].label, 0]
]);
}
else {
widgetArray[i].googleArrayToDataTable = google.visualization.arrayToDataTable([
['Label', 'Value'],
[widgetArray[i].label, (widgetArray[i].googleOldNeedleValue * widgetArray[i].dialMax / widgetArray[i].googleOldDialMax)]
]);
}
// remember these values - I need to do this for my application to ensure the needle looks ok when switching values
widgetArray[i].googleOldNeedleValue = widgetArray[i].needleVal;
widgetArray[i].googleOldDialMax = widgetArray[i].dialMax;
majorTickIncrement = widgetArray[i].dialMax / 5;
var options;
if (widgetArray[i].range2End > 0)
options = {
height: 240,
animation: { duration: 1000, easing: 'inAndOut' },
//redFrom: 0, redTo: KRAvalues.targetVal,
redFrom: 0, redTo: widgetArray[i].range1End,
yellowFrom: widgetArray[i].range1End, yellowTo: widgetArray[i].range2End,
greenFrom: widgetArray[i].range2End, greenTo: widgetArray[i].range3End,
minorTicks: 5, max: widgetArray[i].dialMax,
majorTicks: ['0', majorTickIncrement, majorTickIncrement * 2, majorTickIncrement * 3, majorTickIncrement * 4, widgetArray[i].dialMax]
};
else
options = {
height: 240,
animation: { duration: 1000, easing: 'inAndOut' },
minorTicks: 5, max: widgetArray[i].dialMax,
majorTicks: ['0', majorTickIncrement, majorTickIncrement * 2, majorTickIncrement * 3, majorTickIncrement * 4, widgetArray[i].dialMax]
};
if (!widgetArray[i].googleChart) { // initialise gauge if required
widgetArray[i].googleChart = new google.visualization.Gauge(document.getElementById(widgetArray[i].name + 'chart_div'));
}
// this animates the needle
// draw old value
widgetArray[i].googleChart.draw(widgetArray[i].googleArrayToDataTable, options);
// set new value
widgetArray[i].googleArrayToDataTable.setValue(0, 1, widgetArray[i].needleVal);
// draw new value
widgetArray[i].googleChart.draw(widgetArray[i].googleArrayToDataTable, options);