This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm whether you accept or reject these cookies being set.

Google Chart API
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.

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

Here's a Gauge example:
  // load chart JS
  $.getScript('', 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

      // (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);
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:

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

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 }


A Neves
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.
Unfortunately I don't know how to work with .lp files. Can you provide me an example, please?
Docs on how to upload .lp files:

.lp file is a Lua script which is accessible from HTTP. Here's a minimal example that outputs data in JSON format:
data = { 1, 2, 3 }

Then, in Custom JavaScript you can load data from .lp like this (in callback function passed to google.charts.setOnLoadCallback). Once data is loaded you can create new chart and draw it.
$.getJSON('/user/data.lp', function(data) {
  // draw chart here

Forum Jump: