using array values in chart.js data and label field
Asked Answered
P

2

7

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

Polyphyletic answered 10/8, 2016 at 9:46 Comment(3)
values are getting inserted into LabelResult at LabelResult[counter] =[Data[counter].TIME];Polyphyletic
yes this is how they are declared var LabelResult = []; var DataResult = [];Polyphyletic
it appears as if only one label having all the array valuessuch as a stack piled up.Polyphyletic
T
17

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
        }]
    }    
});
Torero answered 10/8, 2016 at 10:4 Comment(1)
in case of it seem to work but now in case of labels: LabelResult but not in case of data: DataResultPolyphyletic
C
3

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.

Chittagong answered 10/8, 2016 at 10:4 Comment(1)
in case of it seem to work but now in case of labels: LabelResult but not in case of data: DataResultPolyphyletic

© 2022 - 2024 — McMap. All rights reserved.