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 )
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/2Ld6d5op/