Custom HTML block Gauge

Help
1

I’m using a custom gauge as in your example.

How could I get the time of last data received to show in that gauge, just like your defaukt gauge block?

3

Hi @Lars_Andersson,

Just as a quick tip, the pre-filled code in the Custom HTML Block will display the DashboardBlock.input object. When you include a query in the block, the preview will update and display the object from your query, here is an example:

29%20PM
29%20PM2268×1288 221 KB

With this example in mind, I can access the last data query time with DashboardBlock.input.queries.time-series-0.time and a Gauge Query:

05%20PM
05%20PM2298×1412 314 KB

Let me know if you have any further questions.

Thanks!
Julia

4

How do you get the code to show in the preview window?

5

I realized that if I leave the default text in header and body I can now see the the same preview.
What I’m not clear on is how I can show, just the timestamp for example, next to the gauge.

7

any help here would be greatly appreciated.

10

Hi @Lars_Andersson,

For us to help you best, it’s always useful if you can provide any screenshots or details about your configuration along with your questions.

Since the Custom HTML Block is an advanced block that allows you to create data visualization using your own custom HTML, CSS, and JavaScript, you fully control what things look like and where things are.

In the screenshot that @JuliaKempf posted, the block configuration is the default configuration. So, if you create a new Custom HTML Block, you will be able to see the full object ( and if you look at the example, you can see how it’s displayed.

If you started from the Google Chart Gauge Example, it’s documentation is here:

https://developers.google.com/chart/interactive/docs/gallery/gauge

Working with this block would be really difficult if you’re unfamiliar with HTML, CSS, and Javascript. Here are some good resources that may help you get up to speed:

https://www.w3schools.com/

11

I was able to build the example gauge in my custom HTML block, but I’m trying to build a cylinder gauge. Using the same DashboardBlock.input.queries.water_level to pull in the data, I can’t seem to get a value. Is there some dependency or library that is built into the google chart that I need to pull in?

13

Hi @Mark_Harrell,

Would you be able to provide a screenshot(s) of your custom HTML block?

Thank you,
Heath

16

The DashboardBlock section is currently commented out, but when I try to pull a value, I don’t see any value applied. When I use the check seen in the Google chart examples:
if (DashboardBlock.input.queries.water_level)
the condition is never true. (yes water_level is the correct name for the query). I have the Google chart example working, just trying to build something that looks more like a cylinder.

Code Block
Code Block985×754 79.5 KB

17

@Mark_Harrell,

Is there something our Tank Guage Block Type is missing that you’d like to see?

As for your code, you are able to use console.log() in the Custom HTML block, which can be a useful debugging technique.

Further, the dashboard query data may not be available in the anychart.onDocumentReady callback function. You will likely need to leverage one of the events we provide for this block. You will likely need to use DashboardbBlock.on('change') to access the block’s query data.

Thank you,
Heath

19

Thanks for the feedback, I don’t know how to implement the DashboardBlock.on(‘change’) method you are suggesting, I’ll have to look into it.

The Tank Gauge Block works well, the boss wants something that looks more like a cylinder, I am just testing out different methods to display the data.

22

@Mark_Harrell,

Here’s an example for you that we made using AnyCharts for you:

<script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-linear-gauge.min.js"></script>
<style>
  body {
    padding: 10px;
    background: transparent;
  }
</style>
<script type="text/javascript">
  let tank;

  anychart.onDocumentLoad(() => {
    tank = anychart.gauges.tank();
    tank.container('container-fluid');
  })

  DashboardBlock.on('change', (event) => {
    if (tank) {
      const fuel_level = event.queries.fuel.value;
      tank.addPointer(0);
      tank.data([fuel_level]);
      tank.addPointer(1);
      tank.draw();
    }
  });
</script>

This example also includes the two scripts from AnyChart needed to make this happen. Here’s what is happening in this code:

  1. We’re defining a variable tank
  2. We use the onDocumentLoad function provided by AnyChart to initialize a tank chart, and where we’re going to draw that chart (in an HTML div with ID container-fluid)
  3. We use Losant’s DashboardBlock.on function to then get the data from the query, add that to the data of the chart, and then draw the chart on the tank we initialized.

So, now anytime the dashboard changes, this block will update.

Let me know if this helps!

Thank you,
Heath

25

Thank you, I think this will get me moving in the right direction.

1 Like