I am trying to make line garph from canvasjs using database data. But I am having problem with passing data to datapoints.
$.ajax({
dataType : "json",
type: "POST",
url: base_url + 'index.php/dashboard/line_graph',
data: {},
success: function(data)
{
for(var i = 0; i < data.length; i++)
{
var firstdate = data[i].nextdate;
var res = firstdate.replace(/[-]/g,',');
fd += '{ x: new Date(' + res + '), y:' + data[i].count +'},';
}
var fin = fd.slice(0,-1);
finals = "[" + fin + "]";
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Booking - per month (DEMO)"
},
data: [
{
type: "line",
dataPoints: finals
}
]
});
chart.render();
}
});
When I alert finals and copy paste the alerted data to datapoints and run then its working. But when variable containing same data is passed to datapoint then its not working.
In console log, I get this error.
TypeError: l.dataPoints[q].x is undefined
The format of the datapoints is this. And variable finals also contains same data when I do alert.
[
{ x: new Date(2015,03,6), y:4},
{ x: new Date(2015,03,11), y:0},
{ x: new Date(2015,03,16), y:0},
{ x: new Date(2015,03,21), y:0},
{ x: new Date(2015,03,26), y:0},
{ x: new Date(2015,03,31), y:14}
]
My page returns this json_encode format.
[
{"firstdate":"2015-03-01","nextdate":"2015-03-6","count":"4"},
{"firstdate":"2015-03-6","nextdate":"2015-03-11","count":"0"},
{"firstdate":"2015-03-11","nextdate":"2015-03-16","count":"0"},
{"firstdate":"2015-03-16","nextdate":"2015-03-21","count":"0"},
{"firstdate":"2015-03-21","nextdate":"2015-03-26","count":"0"},
{"firstdate":"2015-03-26","nextdate":"2015-03-31","count":"14"}
]
I don't get the issues. Please Help.
You don't have to create finals variable like a string, you can use directly object format of Javascript :
$.ajax({
type: "POST",
url: base_url + 'index.php/dashboard/line_graph',
data: {},
success: function(data)
{
var tabData = JSON.parse(data);
var finals = [];
for(var i = 0; i < tabData.length; i++)
{
var firstdate = tabData[i].nextdate;
var res = firstdate.split('-');
finals.push({ 'x': new Date(res[2],res[1],res[0]), 'y': tabData[i].count });
}
var chart = new CanvasJS.Chart("chartContainer",{
title:{
text: "Booking - per month (DEMO)"
},
data: [
{
type: "line",
dataPoints: finals
}
]
});
chart.render();
}
});