Google Chart API
#1
Hi everyone,

I've been looking for a way to introduce pie charts and bar graphs to our visualizations. I stumbled on the Google chart API and this example for other platform that uses lua script.

What I'd like to do is to get data from group addresses, send it to the API and present the chart in a frame.

I lack JS and HTML knowledge to understand all this, so any help is welcome.

BR,
A Neves
Reply
#2
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);
      });
    });
  });
});
Reply
#3
Thank you admin. This works just like I needed to.

How can I pass an array from a script to the custom JS? I'm thinking in combine Google charts with this example:

http://www.openrb.com/docs/trends-new.htm

Or simply creating a table like this and call it in JS:

Code:
kwh_lights = grp.getvalue('1/1/33')
kwh_sockets = grp.getvalue('1/1/53')
kwh_AC = grp.getvalue('1/1/73')
kwh_garden =  grp.getvalue('1/1/93')

energy_pie={{'Label', 'Value'},
           {'Lights', kwh_lights},
         {'Sockets', kwh_sockets},
           {'AC', kwh_AC },
            {'Garden', kwh_garden }
           }

log(energy_pie)

BR,
A Neves
Reply
#4
For smaller arrays you can use a virtual object with 250-byte string data type and put data converted via json.encode. For larger arrays you will need to create a sepearate .lp file that will output resulting data array.
Reply
#5
Unfortunately I don't know how to work with .lp files. Can you provide me an example, please?
Reply


Forum Jump: