Search code examples
javascriptjquerycanvasgauge

Converting String to HTMLElement

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?

Solution

  • 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.