chartist to display nice pie...

[admin]

This will apply reverse scaling to the chart container element. chart object should be defined outside the grp.listen callback otherwise caching will not work.

Code:

//instantane pie
$(function(){
    var chart={};

    grp.listen('20/3/200', function(obj, type) {

    var classImage ='pie1';
    var idChart ='chart1';
    const variableCourbes = ["20/3/0", "20/3/1", "20/3/2", "20/3/3", "20/3/4"];
    const hauteur='300px';
    const largeur='300px';
    
    var labelTab = [];
        var serieTab = [];
    var separateurNom = ' '
    
    for (let i = 0; i < variableCourbes.length; i++) {
      var id = Scada.encodeGroupAddress(variableCourbes[i]);
        var obj = objectStore.getObject(id);
        var nom = obj.name.split(separateurNom)[0]
      
      labelTab.push(nom);
      serieTab.push(obj.value);
    }
    
    var data = {
      labels: labelTab,
      series: serieTab
    };
    var options = {
      width: largeur,
      height: hauteur,
      donut: true,
          donutWidth: 50,
          donutSolid: true,
          startAngle: 270,
          showLabel: true
    };

    if (chart[idChart]) {
      chart[idChart].update(data);
    }
    else {
      var plans = $('.' + classImage)[0]
      plans.innerHTML = '';
      chart[idChart] = new Chartist.Pie('.'+classImage, data, options);
    }

    var transform = chart[idChart].container.parentElement.parentElement.style.transform;
    var scale = parseFloat(transform.replace('scale(', '').replace(')', ''));
    if (!isNaN(scale)) {
      chart[idChart].container.style.transform = 'scale(' + (1 / scale) + ')';
    }
  }, true);
});