Custom HTML block Gauge

Help
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