I wish to draw a canvas gauge by defining gauge components in HTML, but activating the drawing mechanism after the page has been drawn.
The user documentation says this can be achieved by doing the following
<script>window.GAUGES_NO_AUTO_INIT = true;</script>
<script src="../gauge.min.js"></script>
and defining the canvas gauge and then drawing it by using BaseGauge.fromElement(canvasGaugeElement);
I have a canvas element defined
<canvas class='canv' id='canv0' data-width=200 data-height=80 value=75 data-type='linear-gauge'></canvas>
I can successfully draw the gauge doing
BaseGauge.fromElement(canv0);
If I want to draw many canvas gauges at the same time, I could do
BaseGauge.fromElement(canv0);
BaseGauge.fromElement(canv1);
BaseGauge.fromElement(canv2);
However I thought to use the following code:
$('.canv').each(function(i, obj) {BaseGauge.fromElement($(this).attr('id'));});
However this fails because the BaseGauge.fromElement is expecting a HTMLElement and not a String
Any idea how to solve this?
You are passing the id attribute of the object obtained in each loop... As BaseGauge
requires an object you only have to pass the object itself:
$('.canv').each(function(i, obj) {BaseGauge.fromElement(this);});
And should work.