'How to set the realtime value to Radial Gauge in Visual Studio Code

I have a real-time of sensors data pulling from firebase and would like to display in web app. I need to use radial gauges for the data to display. I can pull the data from firebase and display in the web app as text but not on to the gauges.

I would really appreciate if someone could help me out. Below is my code of JS and HTML. And the image of the web app for your reference.

HTML Code:

 <body>
      <!--TOP BAR-->
      <div class="topnav">
        <h1 style="text-align:center;">Ossus Application</h1>
      </div>
 
      <!--TEMPERATURE-->
      <div class="wrapper">
        <p> TEMPERATURE</p>
        <canvas id="gauge"></canvas>

        <p><span class="reading"><span id="temp"></span> &deg;C</span></p> 
      </div>

    <script src="scripts/auth.js"></script>
    <script src="scripts/index.js"></script>

  </body>

JavaScript Code:

const loginElement = document.querySelector('#login-form');
const contentElement = document.querySelector("#content-sign-in");
const userDetailsElement = document.querySelector('#user-details');
const authBarElement = document.querySelector("#authentication-bar");

//---------------------------- Elements for sensor readings ----------------------------

const tempElement = document.getElementById("temp");

var gauge = new RadialGauge({
  renderTo: 'gauge',
  width: 200,
  height: 200,
  units: "C",
  value: temp,
  minValue: 0,
  startAngle: 90,
  ticksAngle: 180,
  valueBox: true,
  maxValue: 100,
  majorTicks: [
      "0",
      "25",
      "50",
      "75",
      "100",
  ],
  minorTicks: 2,
  strokeTicks: true,
  highlights: [
      {
        "from": 0,
        "to": 25,
        "color": "rgba(100, 255, 100, .2)"
      },
      {
        "from": 25,
        "to": 50,
        "color": "rgba(220, 200, 0, .75)"
      },
      {
          "from": 50,
          "to": 100,
          "color": "rgba(200, 50, 50, .75)"
      }
  ],
  colorPlate: "#fff",
  borderShadowWidth: 0,
  borders: false,
  needleType: "arrow",
  needleWidth: 5,
  needleCircleSize: 2,
  needleCircleOuter: true,
  needleCircleInner: false,
  animationDuration: 1500,
  animationRule: "linear"
}).draw();


//---------------------------- MANAGE LOGIN/LOGOUT UI ----------------------------

const setupUI = (user) => {
  if (user) {

    //----------------------------toggle UI elements ----------------------------

    loginElement.style.display = 'none';
    contentElement.style.display = 'block';
    authBarElement.style.display ='block';
    userDetailsElement.style.display ='block';
    userDetailsElement.innerHTML = user.email;

    //---------------------------- get user UID to get data from database --------------------------------------

    var uid = user.uid;
    console.log(uid);

    //---------------------------- Database paths (with user UID) ----------------------------

    var dbPathTemp = 'GCU1/' + uid.toString() + '/temperature';
   

    //---------------------------- Database references ----------------------------

    var dbRefTemp = firebase.database().ref().child(dbPathTemp);
   

    //---------------------------- Update page with new readings ----------------------------

    dbRefTemp.on('value', snap => {
      tempElement.innerText = snap.val().toFixed(2);
    });

    
  //---------------------------- if user is logged out ----------------------------

  } else{

    //---------------------------- toggle UI elements ----------------------------
    
    loginElement.style.display = 'block';
    authBarElement.style.display ='none';
    userDetailsElement.style.display ='none';
    contentElement.style.display = 'none';
  }[enter image description here][1]
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How to set the realtime value to Radial Gauge in Visual Studio Code

Sources

Related Questions