Canvas not showing even though the code is there

Question

I am trying to show a Gauge on my Magic Mirror Dashboard in my module programmatically.

The below is a sample of my code:

    var indoorGauge = document.createElement('canvas');
    indoorGauge.id = 'indoorGauge';
    ...
    indoorGauge.setAttribute('data-animation-target','plate');  
    indoorPressure.appendChild(indoorGauge);        
    insideTele.appendChild(indoorPressure);
    wrapper.appendChild(insideTele);

The gauge doesn't show or render. What I'm finding odd is that when I inspect element, the canvas is all there and it works, because when I cut out the element and re-paste it, it will show up and work perfectly!

If I 'cut' and 'paste' the above canvas element, the gauge will show just fine.

Answer 1

According to the documentation, you should be using their API if you want to load a gauge with Javascript.

const indoorGauge = document.createElement('canvas');

indoorGauge.id = "indoorGauge"
document.body.appendChild(indoorGauge);

new LinearGauge({
  renderTo: 'indoorGauge'
}).draw();

<script src="https://unpkg.com/[email protected]/gauge.min.js"></script>

I would imagine that because you are appending the canvas with Javascript, but not using the gauge API that's why you're seeing issues with the script not picking up your dynamically created canvas element the first time you add it