chartist to display nice pie...

[admin]

1. Copy all code from this file: https://dl.openrb.com/misc/chartist.js and paste at the top of the Custom JavaScript code
2. Download source from here: https://github.com/gionkunz/chartist-js/...ag/v0.11.4 and copy/paste code from dist/chartist.min.css into Custom CSS.
3. Add to Custom JavaScript, and modify as needed:

Code:

$(function() {
  var chart;

  grp.listen('0/0/1', function(obj, type) {
    var planid = 1;
    var groups = [ '32/0/8', '32/0/9', '32/0/10' ];
  
    var labels = [];
    var series = [];
  
    for (var group of groups) {
      var obj = grp.find(group);
      console.log(group, obj);
      labels.push(obj.name);
      series.push(obj.value);
    }
  
    var data = {
      labels: labels,
      series: series
    };

    var options = {
      width: '300px',
      height: '300px',
      donut: true,
      donutWidth: 50,
      donutSolid: true,
      startAngle: 270,
      showLabel: true
    };

    if (chart) {
      chart.update(data);
    }
    else {
      var el = $('<div class="chart"></div>').css({
        position: 'absolute',
        top: '400px',
        left: '200px'
      }).appendTo('#plan-' + planid);

      chart = new Chartist.Pie('.chart', data, options);
    }
  }, true);
});

0/0/1 is the address that triggers chart re-draw. planid (1) is the ID of the plan where the chart will be placed. 32/0/8..32/0/10 are the group addresses that will be visible on the chart. 300px is the chart size, 400px/200px is the position on the plan from the top left corner.
Note that this won't work in the editor, only in the view mode.