Hey asgallant,
Your example really helped a lot. But here is my actual example. So show
you how you put listener in this example.
If it is too complicated then I can rewrite it as you did it in your code.
Here is my code:
[code]
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(drawChart);
var data1;
var data2;
var data3;
var chart;
var chart2;
var chart3;
var options1;
var options2;
var options3;
function drawChart() {
data1 = google.visualization.arrayToDataTable([
['Label', 'Value'],
['A', 0]
]);
data2 = google.visualization.arrayToDataTable([
['Label', 'Value'],
['B', 0]
]);
data3 = google.visualization.arrayToDataTable([
['Label', 'Value'],
['C', 0]
]);
options1 = {
redFrom: 100, redTo: 1000,
yellowFrom:90, yellowTo: 130,
min:0, max:1000,
animation:{
duration: 1000,
easing: 'inAndOut',
},
minorTicks: 5
};
options2 = {
redFrom: 5000, redTo: 7000,
yellowFrom:4000, yellowTo: 5000,
min:0, max:7000,
animation:{
duration: 1000,
easing: 'inAndOut',
},
minorTicks: 5
};
options3 = {
redFrom: 1, redTo: 2,
yellowFrom:8, yellowTo: 15,
greenFrom:0, greenTo:8,
min:0, max:30,
animation:{
duration: 1000,
easing: 'inAndOut',
},
minorTicks: 5
};
chart = new
google.visualization.Gauge(document.getElementById('visualization1'));
chart2 = new
google.visualization.Gauge(document.getElementById('visualization2'));
chart3 = new
google.visualization.Gauge(document.getElementById('visualization3'));
chart.draw(data1, options1);
chart2.draw(data2, options2);
chart3.draw(data3, options3);
}
function changeA(dir) {
data1.setValue(0, 1, dir);
chart.draw(data1, options1);
}
function changeB(dir) {
data2.setValue(0, 1, dir);
chart2.draw(data2, options2);
}
function changeC(dir) {
data3.setValue(0, 1, dir);
chart3.draw(data3, options3);
}
[/code]
On Thursday, June 21, 2012 6:37:22 PM UTC+2, asgallant wrote:
>
> You need to track the 'ready' state of each gauge and run the code only if
> all gauges are done. See an example here:
> http://jsfiddle.net/asgallant/NdRx8/5/
>
> On Thursday, June 21, 2012 11:44:22 AM UTC-4, Denonth wrote:
>>
>> Thank you for your help. This is working. But here is a another question.
>> What if I have more than one gauge in the div? Here we can see only one,
>> but as a matter of fact I have 3 inside it. How to put listener for that if
>> you got an idea?
>>
>> Each gauge is draw separately and they have different options and so on.
>> Its like you have that code for one gauge X 3 but each is different.
>>
>> Thank you
>>
>> On Thursday, June 21, 2012 5:00:58 AM UTC+2, asgallant wrote:
>>>
>>> What is happening here is that the document's 'ready' event is firing
>>> before the gauge finishes drawing, so the dimensions are all messed up.
>>> The solution is to move the document 'ready' code into a 'ready' event
>>> handler for the gauge. You might also want to consider changing the $(
>>> "#chart_div").hide(); and $("#chart_div").show(); lines to target the
>>> 'right' div instead.
>>>
>>> On Tuesday, June 19, 2012 3:42:01 PM UTC-4, Denonth wrote:
>>>>
>>>> Does anyone has some idea?
>>>
>>>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-visualization-api/-/3CKop6ndzAcJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
