create a multi line chart using Chart.js

Question

I am trying to create a multiline chart using Chart.js

I can do this for 1 line and i can do 2 lines using a fixed data structure but I cannot get multiple lines to display data passed to the data structure.

here is the example usage abbreviated from chart.js website

http://www.chartjs.org/docs/#getting-started

  var myLineChart = new Chart(ctx).Line(data);
  var data = {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [
          {fillColor: "rgba(220,220,220,0.2)",
           strokeColor: "rgba(220,220,220,1)",
           data: [65, 59, 80, 81, 56, 55, 40]
          },
          {fillColor: "rgba(151,187,205,0.2)",
           strokeColor: "rgba(151,187,205,1)",
           data: [28, 48, 40, 19, 86, 27, 90]
          }
      ]};

now my code,

   lineChartData = {};             //declare an object
   lineChartData.labels  = [];    //add 'labels' element to object (X axis)
   lineChartData.datasets = [];  //add 'datasets' array element to object

        dataset = {};       //a single dataset is an object
           dataset.fillColor = "rgba(0,0,0,0)";    
           dataset.strokeColor = "rgba(200,200,200,1)";  
           dataset.data = [];  //contains the 'Y; axis data

 for (line = 0; line < 4; line++) {
       y = [];
       lineChartData.datasets.push(dataset); //create a new line dataset

     for (x = 0; x < 10; x++) {
       y.push(line + x); //push some data aka generate 4 distinct separate lines
       lineChartData.labels += x; //adds x axis labels
     } //for x

      lineChartData.datasets[line].data = y; //send new line data to dataset
 } //for line

        ctx = document.getElementById("Chart1").getContext("2d");
        myLineChart = new Chart(ctx).Line(lineChartData);
    }

the chart always displays the same last generated line 4 times.

I am new to javascript and I am sure i am doing something wrong with the object structure creation, I have spent a day trying to work this out

there is a chart.js option to add values as follows, should I be using this

.addData( valuesArray, label )

potatopeelings potatopeelings · Accepted Answer · 2015-06-30T07:30:23

You were creating inserting the same object (dataset) at all 4 locations of the dataset. So any manipulations in the loop are being done on all of the array elements (actually it would be more accurate to say that it's being done on dataset and that dataset is there at all 4 indices of the array)

Notice that in the following code the {} object literal is actually being inserted 4 times into the array giving you a fresh element each time.

lineChartData = {}; //declare an object
lineChartData.labels = []; //add 'labels' element to object (X axis)
lineChartData.datasets = []; //add 'datasets' array element to object

for (line = 0; line < 4; line++) {
    y = [];
    lineChartData.datasets.push({}); //create a new line dataset
    dataset = lineChartData.datasets[line]
    dataset.fillColor = "rgba(0,0,0,0)";
    dataset.strokeColor = "rgba(200,200,200,1)";
    dataset.data = []; //contains the 'Y; axis data

    for (x = 0; x < 10; x++) {
        y.push(line + x); //push some data aka generate 4 distinct separate lines
        if (line === 0)
            lineChartData.labels.push(x); //adds x axis labels
    } //for x

    lineChartData.datasets[line].data = y; //send new line data to dataset
} //for line

ctx = document.getElementById("Chart1").getContext("2d");
myLineChart = new Chart(ctx).Line(lineChartData);

// for chart.js 2.0 the following will be to create `myLineChart`
// myLineChart = new Chart(ctx1, {
//      type: 'line',
//      data: lineChartData,
// });

I also made a small change for your labels - you just need 1 set of labels.

To draw an analogy, the original code was doing this

Series a = new Series()
Array chartData = []
for (var i = 0; i < 4; i++) {
    chartData.add(a);
    -- some modifications on a ---
}

At the end of this you basically have an array with 4 pointers to the same object a.

Fiddle - http://jsfiddle.net/tk78bosy/

create a multi line chart using Chart.js

2 Answers