Loop Dataset ChartJS Javascript

Question

I am fetching an array of datasets from an API that returns the following :

[
"[0,0,0,0,0,0,0,0,0,0,0,0,0,58,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]",
"[0,0,53,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]",
"[0,0,381,0,0,649,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]"
]

I need to iterate each one of the above in my Chart JS Linechart as shown below :

 var lineChartData = {
labels: ['1', '2', '3', '4', '5', '6', '7','8', '9', '10', '11', '12', '13', '14','15', '16', '17', '18', '19', '20', '21','22', '23', '24', '25', '26', '27','28','29','30','31'],
datasets: [{
  label: 'My First dataset',
  fillColor: 'rgba(220,220,220,0.2)',
  strokeColor: 'rgba(220,220,220,1)',
  pointColor: 'rgba(220,220,220,1)',
  pointStrokeColor: '#fff',
  pointHighlightFill: '#fff',
  pointHighlightStroke: 'rgba(220,220,220,1)',
  data: dataset[0]
}, {
  label: 'My Second dataset',
  fillColor: 'rgba(151,187,205,0.2)',
  strokeColor: 'rgba(151,187,205,1)',
  pointColor: 'rgba(151,187,205,1)',
  pointStrokeColor: '#fff',
  pointHighlightFill: '#fff',
  pointHighlightStroke: 'rgba(151,187,205,1)',
  data: dataset[1]
},
{
  label: 'My Third dataset',
  fillColor: 'rgba(151,187,205,0.2)',
  strokeColor: 'rgba(151,187,205,1)',
  pointColor: 'rgba(151,187,205,1)',
  pointStrokeColor: '#fff',
  pointHighlightFill: '#fff',
  pointHighlightStroke: 'rgba(151,187,205,1)',
  data: dataset[2]
}]

The number of datasets fetched from the API are variable, so I may require x number of datasets on the Line Chart.

How do I loop the array in my dataset?

The logic I thought of :

var lineChartData = {
labels : [1,2,3..]
for(i=0;i<array.length;i++)
{
     datasets : [{
     data : array[i]}]
}

New Updated Code after Nina's Help :

var xmlhttp = new XMLHttpRequest();
var url = "http://www.autosys.xyz/api/v1/getAllEmpDailyData?clientid=132617";

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var myArr = JSON.parse(xmlhttp.responseText);
        myFunction(myArr);
    }
};
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(arr) {

  var lineChartData = { 
    labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'], 
    datasets: [{ 
      label: 'My First dataset', 
      fillColor: 'rgba(220,220,220,0.2)', 
      strokeColor: 'rgba(220,220,220,1)', 
      pointColor: 'rgba(220,220,220,1)', 
      pointStrokeColor: '#fff', 
      pointHighlightFill: '#fff', 
      pointHighlightStroke: 'rgba(220,220,220,1)', 
      data: null }, 
      { 
        label: 'My Second dataset', 
        fillColor: 'rgba(151,187,205,0.2)', 
        strokeColor: 'rgba(151,187,205,1)', 
        pointColor: 'rgba(151,187,205,1)', 
        pointStrokeColor: '#fff', 
        pointHighlightFill: '#fff', 
        pointHighlightStroke: 'rgba(151,187,205,1)', 
        data: null }, 
        { 
          label: 'My Third dataset', 
          fillColor: 'rgba(151,187,205,0.2)', 
          strokeColor: 'rgba(151,187,205,1)', 
          pointColor: 'rgba(151,187,205,1)', 
          pointStrokeColor: '#fff', 
          pointHighlightFill: '#fff', 
          pointHighlightStroke: 'rgba(151,187,205,1)', 
          data: null }] },
    array = arr;

array.forEach(function (a, i) {
    lineChartData.datasets[i].data = JSON.parse(a);
});

console.log(lineChartData);

Nina Scholz · Accepted Answer · 2016-07-19 07:40:06Z

7

You could use a loop (Array#forEach) and assign the parsed items (JSON.parse) of the array.

var lineChartData = { labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'], datasets: [] },
    array = ["[0,0,0,0,0,0,0,0,0,0,0,0,0,58,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]", "[0,0,53,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]", "[0,0,381,0,0,649,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]"];

array.forEach(function (a, i) {
    lineChartData.datasets.push({
        label: 'Label ' + i,
        fillColor: 'rgba(220,220,220,0.2)',
        strokeColor: 'rgba(220,220,220,1)',
        pointColor: 'rgba(220,220,220,1)',
        pointStrokeColor: '#fff',
        pointHighlightFill: '#fff',
        pointHighlightStroke:
        'rgba(220,220,220,1)',
        data: JSON.parse(a)
    });
});

console.log(lineChartData);

edited Jul 19, 2016 at 7:40

answered Jul 17, 2016 at 13:10

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

Aaditya Damani Over a year ago

This works only if I have 3 datasets, however the number of datasets are not fixed. They could be more than 3 also.

Nina Scholz Over a year ago

it works with more than 3. in the forEach is no limitation.

Aaditya Damani Over a year ago

xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var myArr = JSON.parse(xmlhttp.responseText); myFunction(myArr); } }; xmlhttp.open("GET", url, true); xmlhttp.send(); Im using the above to get the dataset from the url api. The code after linechartData = comes inside myfunction(arr)

Aaditya Damani Over a year ago

The code I have mentioned above, var linechartData = { is inside the function myfunction(arr) { } which is called by the ajax api call method.

Nina Scholz Over a year ago

Let us continue this discussion in chat.

|

Aaditya Damani · Accepted Answer · 2016-07-19 08:59:39Z

3

I got the answer with help from Nina Scholz.

function getDataset(index, data) { 
return { 
label: 'Label '+ index, 
fillColor: 'rgba(220,220,220,0.2)', 
strokeColor: 'rgba(220,220,220,1)', 
pointColor: 'rgba(220,220,220,1)', 
pointStrokeColor: '#fff', 
pointHighlightFill: '#fff', 
pointHighlightStroke: 'rgba(220,220,220,1)', 
data: data 
}; 
}


array.forEach(function (a, i) { 
lineChartData.datasets.push(getDataset(i,JSON.parse(a))); 
});

console.log(lineChartData);

Created a function getDataset within the parent function and iterated it using array.forEach function.

Thank you Nina for your help.

answered Jul 19, 2016 at 8:59

Aaditya Damani

3561 gold badge2 silver badges13 bronze badges

1 Comment

gic186 Over a year ago

If anyone is getting undefined with lineChartData.datasets, try lineChartData.chart.data.datasets

Nefise Özşahin · Accepted Answer · 2023-01-03 11:14:02Z

Ninas answer completely worked

<div>
    <canvas id="myChart"></canvas>
</div>

@section Scripts{
    <script>
       
        var lineChartData = {
            labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
            datasets: []
        },
            array = [
                "[0,0,0,0,0,0,0,0,0,0,0,0,0,58,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]",
                "[0,0,53,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]",
                "[0,0,381,0,0,649,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]"
                    ];

        array.forEach(function (a, i) {
            lineChartData.datasets.push({
                label: 'Label ' + i,
                fillColor: 'rgba(220,220,220,0.2)',
                strokeColor: 'rgba(220,220,220,1)',
                pointColor: 'rgba(220,220,220,1)',
                pointStrokeColor: '#fff',
                pointHighlightFill: '#fff',
                pointHighlightStroke:
                    'rgba(220,220,220,1)',
                data: JSON.parse(a)
            });
        });

        const ctx = document.getElementById('myChart');

        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: lineChartData.labels,
                datasets: lineChartData.datasets
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>

Collectives™ on Stack Overflow

Loop Dataset ChartJS Javascript

3 Answers 3

15 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

15 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related