Custom HTML Guage - stuck at initial value

Sunday_Ajiroghene · September 19, 2024, 11:01pm

Hello great minds,

I am exploring the new custon html feature, looks really great.

I have a code as below:

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
      crossorigin="anonymous"
    />
    <style>
      body {
        padding: 0px;
      }
      #chart_div {
        margin: 0 auto;
        width: 250px;
      }
      h4 {
        text-align: center;
      }
    </style>
    <title>Pressure Gauge</title>

    <div id="chart_div"></div>

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['gauge']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        let data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['PSI', 5]  // Set initial value
        ]);

        let options = {
          width: DashboardBlock.input.size.width - 5,
          height: DashboardBlock.input.size.height - 5,
          redFrom: 110, redTo: 220,
          yellowFrom: -20, yellowTo: 110,
          minorTicks: 5,
          max: 220,
           majorTicks: [
            "-20",
            "0",
            "20",
            "40",
            "60",
            "80",
            "100",
            "",
            "140",
            "160",
            "180",
            "200",
            "220",
          ],
        };

        let chart = new google.visualization.Gauge(document.getElementById('chart_div'));
        chart.draw(data, options);

        // Simulate value update
        // setInterval(function() {
        //   data.setValue(0, 1, Math.floor(Math.random() * 220));
        //   chart.draw(data, options);
        // }, 3000);  // Update value every 3 seconds

        DashboardBlock.on('change', drawChart);

        google.charts.load('current', { packages: ['gauge'] })
        google.charts.setOnLoadCallback(function() {
          googleLoaded = true
          drawChart()
        })
      }
    </script>

The widget appears as expected, but never gets updated, it stuck at the initial value 5.
The last value I transmitted is -15 but its not getting it.

Above is my code, I heed help on how to resolve this issue!

Dylan_Schuster · September 20, 2024, 12:02pm

I’m not seeing anywhere in your code where you are actually using the result of a query in the drawing of the chart, which would explain why you’re not seeing updates.

I think the best way to approach this is to start with the working example we have in our documentation:

This example assumes your Custom HTML Block is using a gauge query named “psi”. You can swap that name out for the name of your query to get started.

Sunday_Ajiroghene · September 20, 2024, 12:25pm

Hi @Dylan_Schuster ,

Find below code in the working directory

<script
  type="text/javascript"
  src="https://www.gstatic.com/charts/loader.js"
></script>
<script type="text/javascript">
  var googleLoaded = false
  var drawChart = function() {
    if (!googleLoaded) {
      return
    }
    var data = [['Label', 'Value']]
    if (DashboardBlock.input.queries.psi) {
      data.push(['PSI', DashboardBlock.input.queries.psi.value])
    }
    data = google.visualization.arrayToDataTable(data)
    var options = {
      width: DashboardBlock.input.size.width - 5,
      height: DashboardBlock.input.size.height - 5,
      redFrom: 40,
      redTo: 50,
      yellowFrom: 25,
      yellowTo: 40,
      minorTicks: 5,
      majorTicks: ['0', '10', '20', '30', '40', '50'],
      max: 50,
    }
    let chart = new google.visualization.Gauge(
      document.getElementById('chart_div')
    )
    chart.draw(data, options)
  }

  DashboardBlock.on('change', drawChart)

  google.charts.load('current', { packages: ['gauge'] })
  google.charts.setOnLoadCallback(function() {
    googleLoaded = true
    drawChart()
  })
</script>

This is the code I have too, the code I commented out was to simulate it, which worked. However, reverting back to the working directory, it stops working.

let data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['PSI', 5]  // Set initial value
        ]);

This line above was based on my changes, which also enables me to see it displayed, while this line below

 var data = [['Label', 'Value']]
    if (DashboardBlock.input.queries.psi) {
      data.push(['PSI', DashboardBlock.input.queries.psi.value])
    }

Nothing ever got displayed as below:

However my exact code gives me this:

Dylan_Schuster · September 20, 2024, 1:21pm

Attached is a full application example, which you can import into your sandbox / organization. It contains …

A device with a “psi” number attribute
A workflow generating random data and reporting it as state for that attribute (you will need to enable the workflow after importing)
A dashboard with a Custom HTML Block that has a “psi” gauge query and uses the code from the example in our documentation

My best guess is that the gauge query in your block has not been renamed to “psi”; I made that same mistake when setting up this example, and that is the one piece I’ve not seen from your setup yet.

export-66ed74d20c9d645dcec8858f-1726838146054-googleGauge.zip (3.8 KB)

Sunday_Ajiroghene · September 20, 2024, 2:00pm

Many thanks @Dylan_Schuster

I just imported it now, guess what I found below:

and

Is somthing wrng with my dashboard or something is broken on the losant servant ?

Sunday_Ajiroghene · September 20, 2024, 2:01pm

Everything Blank

Dylan_Schuster · September 20, 2024, 2:48pm

I checked in your account … You did not enable the workflow that is generating the data for the gauge, hence why it is not populating.

Sunday_Ajiroghene · September 20, 2024, 3:07pm

Holly molly,

Many thanks @Dylan_Schuster,

Now, it’s working as below:

I have one question, in my real life application, if I have the query in psi, and the code you provided, things will work out, as twice as nice ?

Dylan_Schuster · September 20, 2024, 3:11pm

Assuming the following, it should work …

You are defining a Gauge Query in a Custom HTML Block
That query is returning data (you can verify this within the query editor as we display the returned result there)
You are using the provided code without any adjustments (you can certainly adjust it if you’d like, but that introduces the chances of more errors)
You name the gauge query “psi” - OR, you adjust this code example to change the query name from “psi” to whatever you name the query when defining it

Glad to hear it’s on the right track now. Let us know if you get stuck again.

Sunday_Ajiroghene · September 20, 2024, 3:15pm

Ok cool,

would hit back with the progress. Let me catch some rest now.

Meanwhile, for real device, I sure don’t need workflow right, since my hardware would push the data directly - just to be clear @Dylan_Schuster, right ?

Thanks again

Dylan_Schuster · September 20, 2024, 4:04pm

Correct; the workflow I included was just to generate some data to actually display in the gauge for our testing. Your real-world device would be reporting state through whichever method it is doing so currently without needing the workflow I included.

Sunday_Ajiroghene · September 23, 2024, 12:47pm

Hi @Dylan_Schuster ,

Today I was able to get it done as shown below

During the demo, I noticed I can not get/receive live update on device digital gauge, and the resolution is quite spaced apart.

Anyway, thanks to you for the kind assistance. At least I could have it working.

While every thing works for now, I would be glad to see if live update is possible or something close to real time like the needle gauge is doing already.

Regards

Sunday_Ajiroghene · September 23, 2024, 1:09pm

here is the link:

Check it out!

Dylan_Schuster · September 23, 2024, 1:16pm

Very nicely done!

During the demo, I noticed I can not get/receive live update on device digital gauge, and the resolution is quite spaced apart.

It looks like your dashboard data refresh rate is set to 60 seconds. You can lower that to 5 seconds to have the graphs update far more frequently in the “Edit Dashboard Settings” page, accessible by clicking the dropdown button in the top right corner.

I would be glad to see if live update is possible or something close to real time like the needle gauge is doing already.

I’ll file a feature request for this. Thanks for the feedback.

Sunday_Ajiroghene · September 23, 2024, 1:32pm

Thanks for your prompt response.

I would be glad to see it fixed.

I am open to work as IoT engineer, I have a wide range of experience in embedded system (IoT) and software engineering.

here is my strength

FRONT END DEVELOPMENT | ReactJS •NextJS •Context •Redux •JavaScript •Bootstrap • Material UI • Styled-Component • HTML • CSS • Materialize •Tailwind
BACKEND DEVELOPMENT | Python • Flask • Express • NodeJS
IoT DEVELOPMENT | C/C++ • FreeRTOS • PlatformIO • Arduino • Embedded • Losant
DATA PIPELINES | Amazon Redshift • Amazon EFS • S3
MISCELLANEOUS | •Responsive Design • Amazon AWS • Amazon IoT Core • AWS •Losant • ML• AWS Cloud Architect • MongoDB • RESTful APIs • Docker • CI/CD • MQTT
SOFT SKILLS | Team player • Bias for Action • Deliver results:

Sunday_Ajiroghene · September 23, 2024, 1:33pm

Thanks, the dashboard setting has been adjusted!

Super…

Topic		Replies	Views
Custom HTML tutorial errors Help custom-chart-block	5	420	June 11, 2022
Custom html block Help dashboard	5	496	October 21, 2019
Custom HTML block Gauge Help dashboard	12	1841	June 10, 2021
Custom html gauge query Help dashboard	1	590	March 28, 2020
Responsive HTML Custom Block Help dashboard	1	522	May 19, 2020

Custom HTML Guage - stuck at initial value

Related topics