How to Display the Value of the Gauge in Text

If you want to display the value of the gauge in text alongside the visual gauge (like on the homepage) follow these steps.

Start with a basic gauge.

First

Add an empty HTML element which will hold the gauge value. This could be a paragraph tag, a div, a span, or anything. Give this element an id. <span id="gauge-value"></span>

Second

Now add a line of code when you're instantiating the gauge. We want to call the setTextField method and pass it the ID of the element we created in step 1. gauge.setTextField(document.getElementById("gauge-value"));

You may also add the precision of the value by adding a whole number precision of digits to report after the period. EG: 3.55 = 2, or 3.999 = 3 gauge.setTextField(document.getElementById("gauge-value"), 2);

Note. We're assuming you when you created a new Gauge object that you saved it into a variable called gauge

Third

You're done!

Additional tips:

How to position the text value.

In my case I used a DIV that contained both the canvas and another div for the text. I wanted to have the div centered horizontally and be able to move it across the vertical axis.

-horizontal centering using flex: set the parent div to: ` display: flex;justify-content: center;'

-vertical positioning: set the text div/span to: position:absolute and play with the top property in %

Another method for text value positioning

Use a table, eg.

<table>
  <tr>
    <td><canvas id="gauge-foobar"></canvas></td>
    <td><canvas id="gauge-quux"></canvas></td>
    <td><canvas id="gauge-zorkmid"></canvas></td>
  </tr>
  <tr>
    <td><output id="value-foobar"></output> foobars</td>
    <td><output id="value-quux"></output> quuxes</td>
    <td><output id="value-zorkmid"></output> zorkmids</td>
  </tr>

</table>

At which point you have 3 gauges for displaying your foobars, quuxes, and zorkmids; with their values and units below.