Chartjs-Is there anyway add 2 or more chart with foreach loop

by

1đź‘Ť

âś…

You had a couple of issues:

  1. Chart reference was being overridden by the last chart in the collection
  2. A few references to variables did not exist from your original source dump

  3. Chart data source reference needed to be changed

    document.addEventListener('DOMContentLoaded', function(){
  var chartData = {
    CC: [{
      code: '123ASD',
      labels: ["7/2/2018", "7/3/2018", "7/4/2018", "7/5/2018", "7/6/2018", "7/9/2018", "7/10/2018"],
      datasets: [{
        label: 'AAA',
        backgroundColor: "rgba(255,0,0,1)",
        data: [32,41,21,78,0,0,0]
      },{
        label: 'BBB',
        backgroundColor: "rgba(0,255,0,1)",
        data: [10,80,12,70,65,44,18]
      },{
        label: 'CCC',
        backgroundColor: "rgba(0,0,205,1)",
        data: [915,400,233,398,334,766,1071]
      }]
    },{
      code: 'ASD123',
      labels: ["7/2/2018", "7/3/2018", "7/4/2018", "7/5/2018", "7/6/2018", "7/9/2018", "7/10/2018"],
      datasets: [{
        label: 'AAA',
        backgroundColor: "rgba(255,0,0,1)",
        data: [55,22,40,2,0,0,0]
      },{
        label: 'BBB',
        backgroundColor: "rgba(0,255,0,1)",
        data: [10,2,100,0,17,55,74]
      },{
        label: 'CCC',
        backgroundColor: "rgba(0,0,205,1)",
        data: [232,555,800,900,723,1001,942]
      }]
    }]
  };

  chartData.CC.forEach(function(data, index){
    var canvas = document.createElement('canvas'),
        chartId = 'chart' + data.code;

    canvas.id = chartId;

    document.body.appendChild(canvas);

    var context = document.getElementById(chartId).getContext('2d');

    window[chartId] = new Chart(context, {
      type: 'bar',
      data: data,
      options: {
        title: {
          display: true,
          text: data.code
        },
        tooltips: {
          mode: 'index',
          intersect: false
        },
        responsive: true,
        scales: {
          xAxes: [{
            stacked: true,
          }],
          yAxes: [{
            stacked: true
          }]
        }
      }
    });
  });
});

Stack snippet is throwing a script error because of chart.js so I created a Codepen

0đź‘Ť

You charts are not being loaded because your code should be item instead of data2.AA[0]. Also, you do not have any property with name kodu in your data object. Check out working version below:

var data2 = {
    CC: [{
            code: '123ASD',
            labels: ["7/2/2018", "7/3/2018", "7/4/2018", "7/5/2018", "7/6/2018", "7/9/2018", "7/10/2018"],
            datasets: [{
                    label: 'AAA',
                    backgroundColor: "rgba(255,0,0,1)",
                    data: [32, 41, 21, 78, 0, 0, 0]
                },
                {
                    label: 'BBB',
                    backgroundColor: "rgba(0,255,0,1)",
                    data: [10, 80, 12, 70, 65, 44, 18]
                },
                {
                    label: 'CCC',
                    backgroundColor: "rgba(0,0,205,1)",
                    data: [915, 400, 233, 398, 334, 766, 1071]
                },
            ]
        },
        {
            code: 'ASD123',
            labels: ["7/2/2018", "7/3/2018", "7/4/2018", "7/5/2018", "7/6/2018", "7/9/2018", "7/10/2018"],
            datasets: [{
                    label: 'AAA',
                    backgroundColor: "rgba(255,0,0,1)",
                    data: [55, 22, 40, 2, 0, 0, 0]
                },
                {
                    label: 'BBB',
                    backgroundColor: "rgba(0,255,0,1)",
                    data: [10, 2, 100, 0, 17, 55, 74]
                },
                {
                    label: 'CCC',
                    backgroundColor: "rgba(0,0,205,1)",
                    data: [232, 555, 800, 900, 723, 1001, 942]
                },
            ]
        },
    ]
};
data2.CC.forEach(function(item, arr) {
    var chartId = item.code;
    var canvas = document.createElement("Canvas");
    var ctx = canvas.getContext('2d');
    var chart = new Chart(ctx, {
        type: 'bar',
        data: item,
        options: {
            title: {
                display: true,
                text: chartId
            },
            tooltips: {
                mode: 'index',
                intersect: false
            },
            responsive: true,
            scales: {
                xAxes: [{
                    stacked: true,
                }],
                yAxes: [{
                    stacked: true
                }]
            }
        }
    });

    document.body.appendChild(canvas);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

Leave a comment