Reply To: Multiple dynamic data

[Anjali]

Hello,

After looking into your code we found couple of issues. Please correct the below mentioned issues:

1) You are adding both the series inside same object while they should be two different objects as shown below.

`[
{
“type”: “line”,
“showInLegend”: “true”,
“name”: “name1”,
“dataPoints”: [
{ “x”: “2015-3-01”, “y”: 34 },
{ “x”: “2015-4-01”, “y”: 41 },
{ “x”: “2015-5-01”, “y”: 23.800000026822 }
]
},
{
“type”: “line”,
“showInLegend”: “true”,
“name”: “name2”,
“dataPoints”: [
{ “x”: “2015-2-01”, “y”: 14 },
{ “x”: “2015-3-01”, “y”: 37 },
{ “x”: “2015-4-01”, “y”: 39.20000000298 },
{ “x”: “2015-5-01”, “y”: 50.10000000149 }
]
}
]`

2) In your JSON data, x values are in string form which you need to convert back to Number/Date before assigning it to the chart as shown below.

function displayChart(data) {
	for (var i = 0; i <= data.length - 1; i++) {
		var dataPointss = [];
		for (var j = 0; j <= data[i].dataPoints.length - 1; j++) {
			dataPointss.push({ x: new Date(data[i].dataPoints[j].x), y: data[i].dataPoints[j].y });
		}
		data[i].dataPoints = dataPointss;
		chart.options.data[i] = data[i];
	}
	chart.render();
}

Below is the code with issue fixed:

var chart = new CanvasJS.Chart("chartContainer",
{
	zoomEnabled: false,
	animationEnabled: true,
	title:{
		text: "PROJECTS"
	},
	axisY2:{
		valueFormatString:"0.0 days",
		interlacedColor: "#F5F5F5",
		gridColor: "#D7D7D7",
		tickColor: "#D7D7D7"
	},
	theme: "theme2",
	toolTip:{
		shared: true
	},
	legend:{
		verticalAlign: "bottom",
		horizontalAlign: "center",
		fontSize: 15,
		fontFamily: "Lucida Sans Unicode",
		cursor:"pointer",
		itemclick : function(e) {
		if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
			e.dataSeries.visible = false;
		}
		else {
			e.dataSeries.visible = true;
		}
		chart.render();
		}
	},
	data: []
});

function displayChart(data) {
	for (var i = 0; i <= data.length - 1; i++) {
		var dataPointss = [];
		for (var j = 0; j <= data[i].dataPoints.length - 1; j++) {
			dataPointss.push({ label: data[i].dataPoints[j].x, y: data[i].dataPoints[j].y });
		}
		data[i].dataPoints = dataPointss;
		chart.options.data[i] = data[i];
	}
	chart.render();
}

function1();

function function1(){
	return $.ajax({
		type: "GET",
		url: "data1.js",
		dataType: "json",
		error: function(){
			alert("impossible de chercher ce project");
		},
		success: function (json) { displayChart(json); }
	});
}

__
Anjali