Google Chart API

[toujour]

You don't need any Lua scripting here, it can be done purely with Custom JavaScript.

Here's a Gauge example:

Code:

$(function(){
  // load chart JS
  $.getScript('https://www.gstatic.com/charts/loader.js', function() {
    google.charts.load('current', {'packages':['gauge']});
    
    google.charts.setOnLoadCallback(function() {
      // create empty element and add it to plan with ID=4
      var el = $('<div></div>').css({
        position: 'absolute',
        width: 200,
        height: 200,
        top: 200,
        left: 200
      }).appendTo('#plan-4');

      // (re)draw gauge on each object update
      grp.listen('32/1/1', function(object) {
        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Level', object.value]
        ]);

        // gauge options
        var options = {
          width: 200,
          height: 200,
          redFrom: 90,
          yellowFrom: 75,
          yellowTo: 90,
          redTo: 100,
          minorTicks: 5
        };

        var chart = new google.visualization.Gauge(el.get(0));
        chart.draw(data, options);
      });
    });
  });
});

Hi,

I'm trying this function...but I have a doubt. What is the empty element that I must put in PLAN ? And where Can I found the plan ID ?

Regards,
Alberto