Fusioncharts data update

[Chandu_Poloju]

Hi,
Im working with fusion charts to customize the gauge block to cylinder… The data is getting updated only some times when page got refreshed… How to update dynamically based on data from device ?

[Heath]

@Chandu_Poloju,

It looks like you’ve got your DashboardBlock.on() function wrapped inside the FusionCharts.ready() function. When the dashboard is updated, the event will not “make it” to the DashboardBlock.on() function.

I have not worked with FusionCharts directly, but here is an example of a Custom HTML block using AnyChart to make a cylindrical tank:

  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();
    }
  });

Just to make sure, also, would you be able to share with me the query configuration you’re using for this block?

Thank you,
Heath

[Chandu_Poloju]

Thanks for the reply, here is the query

can you share ref for above anychart block?

[Heath]

@Chandu_Poloju,

can you share ref for above anychart block?

I’m not sure what you are asking for, could you explain a bit more?

The code that I shared is just JavaScript that is wrapped inside a <script> tag in the Custom HTML block.

Thank you,
Heath

[Chandu_Poloju]

any reference for anychart tank documentation ?

i tried the above code but its showing only half portion filled for every value

here the value is 100 but portion is half filled…

Thanks

[Heath]

@Chandu_Poloju,

Here’s is the whole code snippet:

<meta charset="UTF-8">
<!--
You can include any external JavaScript or CSS as needed.
This example demonstrates including Bootstrap and JQuery
into your custom HTML page.
-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<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>

Here is the documentation from AnyChart on their Linear Gauges.

Thank you,
Heath

[Chandu_Poloju]

Thank you @Heath it worked pretty well.