Multi Series Line Graphs

[jamesf]

Hi Sunil,

I am trying to figure out how to create a line graph using 2 sets of data which are stored in a json object.

Below is the code for a single line graph:

Demo

$( document ).ready(function() {

var dps = [ {x: 1, y: 10}, {x: 2, y: 20}, {x: 3, y: 30} ]; //dataPoints.

var chart = new CanvasJS.Chart(“chartContainer”,{
title :{
text: “Live Data”
},
axisX: {
title: “Axis X Title”
},
axisY: {
title: “Units”
},
data: [{
type: “line”,
dataPoints : dps
}]
});

chart.render();

});

What I would like to do is modify dps so that 2 lines are graphed, meaning the dps variable looks something like:
var dps = [ [{x: 1, y: 10}, {x: 2, y: 20}, {x: 3, y: 30}] , [{x: 1, y: 30}, {x: 2, y: 50}, {x: 3, y: 70}] ];

How do you build such a json object by merely modifying the above variable dps from above?

Thanks,
Jim

[Sunil Urs]

Jim,

In order to show two line charts, you need to add two separate dataSeries – one for each line. You can just modify the same dataPoints array. So the code would go something like this

data: [
	{
		type: "line",
		dataPoints : dps1
	},
	{
		type: "line",//or column, area, etc
		dataPoints : dps2
	}
]

Follow the link to learn more about Multi Series Charts & Combination Charts

[jamesf]

Sunil thanks alot on this. I modified the above code to wok with 2 data sets now. See below for anyone having same issue.

Demo

$( document ).ready(function() { // Begin jQuery ready function

//Creating a multi-series line graph from 2 sets of data. Namely dps1 and dps2.

var dps1 = [ {x: 0, y: 10}, {x: 2, y: 17}, {x: 3, y: 29} ]; //dataPoints – line 1
var dps2 = [ {x: 1, y: 15}, {x: 2, y: 28}, {x: 3, y: 42} ]; //dataPoints. – line 2

var chart = new CanvasJS.Chart(“chartContainer”,{
title :{
text: “Live Data”
},
axisX: {
title: “Axis X Title”
},
axisY: {
title: “Units”
},

// begin data for 2 line graphs. Note dps1 and dps2 are
//defined above as a json object. See http://www.w3schools.com/json/
data: [
{ type: “line”, dataPoints : dps1},
{ type: “line”, dataPoints : dps2}
]
// end of data for 2 line graphs

}); // End of new chart variable

chart.render();

}); // End of jQuery ready function

[Sunil Urs]

The above code works for me except that the quotes had to be changed from “ to “.

Here is the working code
http://jsfiddle.net/canvasjs/HA2JY/

If this is not what you expected, can you please tell me the expected behavior?

[jamesf]

Sunil,

Your Fiddle is just what I needed to know. Once you know the structure for 2 series,
then to build for N series becomes really easy.

Thanks,
Jim