Using unknown number of datasets in Chart.js

Question

I'm still fairly new to javascript and this has got me banging my head against the wall. I'm sure it's really simple but for some reason I cannot seem to get this working correctly. I have seen similar questions on stackoverflow but I can't make them work for me.

I am trying to plot an unknown number of datasets onto a Chartjs graph. I am able to get the data (using PHP it is output as data attributes on child elements of the canvas) and store them to a variable $rows.

var $rows = $('#graphCanvas').find('> div')

I then iterate through the rows and calculate the dataset.

var colors = [ '#2685CB', '#4AD95A', '#FEC81B', '#FD8D14', '#CE00E6', '#4B4AD3', '#FC3026', '#B8CCE3', '#6ADC88', '#FEE45F'  ];

for (var i=0; i<$rows.length; i++) {
    datasetdata[i] = {
        label:"Test " + i,
        data: getdata($rows[i]),
        backgroundColor: colors[i],
        hoverBackgroundColor: colors[i],
        borderStyle: 'solid',
        borderWidth: 2,
    }
}

function getdata($rows) {
    //returns raw data
}

This all works well however the problem starts when I try to use datasetdata

var graphContext = document.getElementById("graphCanvas").getContext("2d");
var graphData = {
    labels: labels,
    datasets: [datasetdata]
};

If I use it with an index it works fine: datasetdata[0]

If I knew for sure how many datasets there would be I could just add their indexes and it would be fine.

Any insight into what I'm doing wrong would be great

Does Chartjs allow for multiple data sets? Did you see this? stackoverflow.com/questions/26397009/… — Matt
– Matt, Commented Jun 15, 2017 at 21:20
Yes it does, you can plot several datasets on the same graph. — mikey242
– mikey242, Commented Jun 16, 2017 at 8:00

Tot Zam · Accepted Answer · 2017-06-15 21:49:27Z

6

Problem:

You have an extra set of brackets surrounding the datasetdata variable.

Solution:

Remove the brackets and set the datasets to just datasetdata:

var graphData = {
    labels: labels,
    datasets: datasetdata
};

Explanation:

The datasets option accepts a parameter that is an array of dataset objects. The wanted structure looks as following:

datasets: [
    { dataset1 },
    { dataset2 }
]

In your code, you surrounded the datasetdata by a set of brackets:

var graphData = {
    labels: labels,
    datasets: [datasetdata]
};

By adding another set of brackets, you are basically setting datasets to an array which contains the datasetdata array. The code renders a result that looks as following:

datasets: [
    [ { dataset1 }, { dataset2 } ]
]

If you add select the value of the array at a specific index, you are extracting a single dataset from the datasetdata array.

var graphData = {
    labels: labels,
    datasets: [datasetdata[0]]
};

Your structure is then an array with a single dataset inside it:

datasets: [
   { dataset1 }
]

This code won't throw and error, since the structure is valid, however, it will only display the first result.

answered Jun 15, 2017 at 21:49

Tot Zam

8,84411 gold badges55 silver badges81 bronze badges

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

1 Comment

mikey242 Over a year ago

I knew it would end up being something silly like that. Thanks for your help and taking the time to explain.

Collectives™ on Stack Overflow

Using unknown number of datasets in Chart.js

1 Answer 1

Problem:

Solution:

Explanation:

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Problem:

Solution:

Explanation:

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related