chartist to display nice pie...

[bvanden]

I successfuly managed to display a pie chart. However, when trying to display a second one in the same page and position is 100px,100px instead of 100px,600px, I failed. I get the second one, and not the first one. Any idea ?

Code:

$(function() {
  var chart1, chart2;

  grp.listen('8/0/0', function(obj, type) {
    var planid = 4;

    // Premier graphique
    var groups1 = [ '0/1/11', '0/1/12', '0/1/13' ];
    var labels1 = [ 'ECL', 'PC', 'BECS' ];
    var series1 = [];

    for (var group of groups1) {
      var obj = grp.find(group);
      console.log(group, obj);
      labels1.push(obj.name);
      series1.push(obj.value);
    }

    var data1 = {
      labels: labels1,
      series: series1
    };

    var options1 = {
      width: '300px',
      height: '300px',
      donut: true,
      donutWidth: 50,
      donutSolid: true,
      startAngle: 270,
      total: series1.reduce((sum, value) => sum + value, 0),
      showLabel: true
    };

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

      chart1 = new Chartist.Pie('.chart', data1, options1);
    }

    // Deuxième graphique
    var groups2 = [ '0/1/1', '0/1/2' ];
    var labels2 = [ 'ECL', 'PC' ];
    var series2 = [];

    for (var group of groups2) {
      var obj = grp.find(group);
      console.log(group, obj);
      series2.push(obj.value);
    }

    var data2 = {
      labels: labels2,
      series: series2
    };

    var options2 = {
      width: '300px',
      height: '300px',
      donut: true,
      donutWidth: 50,
      donutSolid: true,
      startAngle: 270,
      total: series2.reduce((sum, value) => sum + value, 0),
      showLabel: true
    };

    if (chart2) {
      chart2.update(data2);
    } else {
      var el2 = $('<div class="chart"></div>').css({
        position: 'absolute',
        top: '100px',
        left: '600px' // Position différente pour le second graphique
      }).appendTo('#plan-' + planid);

      chart2 = new Chartist.Pie('.chart', data2, options2);
    }
  }, true);
});