chartist to display nice pie...

[hocine]

Click "Show code" under the example and it will show the relevant code.

I tried like that, but I don't have the color in front of the legend like in the example

Code:

$(function() {
  var chart;

  grp.listen('32/1/22', function(obj, type) {
    var planid = 12;
    var groups = ['32/2/19','32/2/21', '32/2/23','32/2/25','32/2/27','32/2/29','32/2/31','32/2/33','32/2/35','32/2/37','32/2/39','32/2/41'];

    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: false
    };

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

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

      // Ajout des légendes
      var legendContainer = $('<div class="legend"></div>'); // Création du conteneur de légende
      data.labels.forEach(function(label, index) {
        legendContainer.append('<div><span class="dot" style="background-color: ' + chart.data.series[index].meta + '"></span>' + label + '</div>'); // Ajout de chaque élément de légende avec la couleur associée
      });
      el.append(legendContainer); // Ajout du conteneur de légende au graphique
    }
  }, true);
});