Using the Google Chart Tools: Gauge

Details

Another interesting gadget/widget, which can be placed within a htm page is a guage made availabe in fram of the Google Chart Tools.  You can find details of how it works, how it can be created and parametrized at http://code.google.com/intl/pl-PL/apis/chart/interactive/docs/gallery/gauge.html, (if the link does not work - google: „google guage”).

I will concentrate only on showing how to use the gauge to present the data red from the PLC.  Here is the link to the package with examples.

Example:

A gauge reading data from an analog input IW0, refreshed periodically:

$("#example").gauge({
	min: -20,
	max: 40,
	unitsLabel: '' + String.fromCharCode(186),
	label: 'Out. Temp',
	majorTicks: 4,
	minorTicks: 3,
});

$("#example").attr('data-read', 'IW0');
$("#example").attr('data-refresh', true);
$("#example").bind('OnReadSuccess', function(event,data){
	$(this).gauge('setValue', data/10);
	return false;
});

• Prev
• Next