Custom Html tags?

Code Feedback
1

Hello I’m trying to build a side project that uses https://canvas-gauges.com/

I placed a snippet of the html below.

I want to use JS or even Jquery to update the “data-max-value” below among other values.

Is there a way to do something similar to document.getElementById() here to adjust that value?

          <canvas data-type="radial-gauge" 
data-width="400" 
data-height="400" 
data-units="Temperature" 
data-title="degF" 
data-value="100" 
data-min-value="0" 
data-max-value="400" 
data-major-ticks="0,50,100,150,200,250,300,350,400" 
data-minor-ticks="5" 
data-stroke-ticks="false" 
data-highlights='[
            { "from": 350, "to": 400, "color": "rgba(255,30,0,.25)" }
        ]' 
data-color-plate="#222" 
data-color-major-ticks="#f5f5f5" 
data-color-minor-ticks="#ddd" 
data-color-title="#fff" 
data-color-units="#ccc" 
data-color-numbers="#eee" 
data-color-needle-start="rgba(240, 128, 128, 1)" 
data-color-needle-end="rgba(255, 160, 122, .9)" 
data-value-box="true" 
data-animation-rule="bounce" 
data-animation-duration="500" 
data-font-value="Led" 
data-animated-value="true">
</canvas>

          <div class="toolbar">
            <button class="btn btn-primary col-md-2 mr-1">test</button>
            <button class="btn col-md-2 btn-danger">reset</button>
          </div>

        </div>
2

can’t you do this?

document.querySelector("canvas").setAttribute("data-max-value", /* <new value> */ )
3

I just took a brief look at their documentation, gauges have their own update method which should be better if you use

4

Ahh thank you, as always. I will try both for practice. I can’t believe I missed the update method in the documentation.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.