using array values in chart.js data and label field

6
votes

I wish to pass values of an array to the data and label fields of the chart.js dataset.

Here the code from success of ajax call made to fetch json data. I fetch the json data and store it into an array.

Data = jQuery.parseJSON(result);
var count = Data.length;
var counter = 0;
while(count > 0) {
    LabelResult[counter] =[Data[counter].TIME];
    counter++;
    count --;
}

Now i wish to use this label values into the labels filed. 

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [LabelResult],
        datasets: [{
            label: '# of Votes',
            data: [DataResult],
            borderWidth: 1
        }]
    }    
});

But there seems some issue and the data is not getting rendered on the chart

2
javascriptarraysajaxchart.jschart.js2
values are getting inserted into LabelResult at LabelResult[counter] =[Data[counter].TIME]; – Salil Lambay
yes this is how they are declared var LabelResult = []; var DataResult = []; – Salil Lambay
it appears as if only one label having all the array valuessuch as a stack piled up. – Salil Lambay

2 Answers

16
votes

LabelResult is an array, change

labels: [LabelResult]

to

labels: LabelResult

Also:

data: [DataResult]

to

data: DataResult

Like:

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: LabelResult,
        datasets: [{
            label: '# of Votes',
            data: DataResult,
            borderWidth: 1
        }]
    }    
});
3
votes

I think you could try to remove some brackets.

while(count > 0){
     LabelResult[counter] = Data[counter].TIME; // here removed brackets
      counter++;
      count --;
}

and

data: {
    labels: LabelResult, // here removed brackets
    datasets: [{
        label: '# of Votes',
        data: DataResult, // here removed brackets
        borderWidth: 1
    }]
},

I hope that will works.