Now that RGraph supports multiple charts on a single canvas creating a bank of Gauge charts or other meters is a simple matter and allows you to create powerful responsive control panels.
This example uses the Gauge chart though the principle is the same for all types of RGraph meter.
These are the original Gauge charts before they have been made adjustable.
<script> var myGauge1 = new RGraph.Gauge('cvs', 0,100,67); myGauge1.Set('chart.centerx', 100); myGauge1.Draw(); var myGauge2 = new RGraph.Gauge('cvs', 0,100,45); myGauge2.Set('chart.centerx', 300); myGauge2.Draw(); var myGauge3 = new RGraph.Gauge('cvs', 0,100,13); myGauge3.Set('chart.centerx', 500); myGauge3.Draw(); </script>
These are the Gauge charts now that they have been made adjustable.
<script> var myGauge1 = new RGraph.Gauge('cvs', 0,100,67); myGauge1.Set('chart.centerx', 100); myGauge1.Set('chart.adjustable', true); myGauge1.Draw(); var myGauge2 = new RGraph.Gauge('cvs', 0,100,45); myGauge2.Set('chart.centerx', 300); myGauge2.Set('chart.adjustable', true); myGauge2.Draw(); var myGauge3 = new RGraph.Gauge('cvs', 0,100,13); myGauge3.Set('chart.centerx', 500); myGauge3.Set('chart.adjustable', true); myGauge3.Draw(); </script>
By default the gauge charts aren't animated when they're adjustable, however this is a simple addition and involves handling the adjusting yourself.
<script>
var myGauge1 = new RGraph.Gauge('cvs', 0,100,67);
myGauge1.Set('chart.centerx', 100);
myGauge1.Draw();
var myGauge2 = new RGraph.Gauge('cvs', 0,100,45);
myGauge2.Set('chart.centerx', 300);
myGauge2.Draw();
var myGauge3 = new RGraph.Gauge('cvs', 0,100,13);
myGauge3.Set('chart.centerx', 500);
myGauge3.Draw();
/**
* Only need to add the custom event listener once
*/
myGauge1.canvas.onmousedown_rgraph = function (e)
{
var obj = RGraph.ObjectRegistry.getObjectByXY(e);
if (obj) {
obj.value = obj.getValue(e);
RGraph.Effects.Gauge.Grow(obj);
}
}
</script>