[jo]

Hi,

I would like a help.. my code is not in php. I’m using in mvc. I would like time in x axis and a count in y axis. There would be 4 graphs plotted in the same one. Now my graph is not getting plotted when taken from db. Please help. My code is:-
function FetchDashBoardGraph() {
var input, input1;
$.ajax({
url: ‘@Url.Content(“~/Dashboard/FetchDashBoardGraph”)’,
type: ‘POST’,
responseType: “text/html”,
success: function (data) {
debugger;
input = DataCall(data);
input1 = input[0];
debugger;
var chart = new CanvasJS.Chart(“chartContainer”,
{
axisY: {
maximum: 600
},

axisX: {
interval: 3
},
legend: {
verticalAlign: “bottom”,
horizontalAlign: “center”
},
data: [input1],
//[{
// name: “Universe”,
// showInLegend: true,
// legendMarkerType: “square”,
// type: “splineArea”,
// color: “rgba(40,175,101,0.6)”,
// markerSize: 1,
// dataPoints: [
// { x: new Date(2013, 0, 1, 00, 00), label: “midnight”, y: data[0] },
// { x: new Date(2013, 0, 1, 01, 00), y: data[0] },
// { x: new Date(2013, 0, 1, 02, 00), y: data[0] },
// { x: new Date(2013, 0, 1, 03, 00), y: data[0] },
// { x: new Date(2013, 0, 1, 04, 00), y: data[0] },
// { x: new Date(2013, 0, 1, 05, 00), y: data[0] },
// { x: new Date(2013, 0, 1, 06, 00), y: data[0] },
// { x: new Date(2013, 0, 1, 07, 00), y: data[0] },
// { x: new Date(2013, 0, 1, 08, 00), y: data[0] },
// { x: new Date(2013, 0, 1, 09, 00), y: data[0] },
// { x: new Date(2013, 0, 1, 10, 00), y: data[0] },
// { x: new Date(2013, 0, 1, 11, 00), y: data[0] },
// { x: new Date(2013, 0, 1, 12, 00), y: data[0], label: “noon” },
// { x: new Date(2013, 0, 1, 13, 00), y: data[0] },
// { x: new Date(2013, 0, 1, 14, 00), y: data[0] },
// { x: new Date(2013, 0, 1, 15, 00), y: data[0] },
// { x: new Date(2013, 0, 1, 16, 00), y: data[0] },
// { x: new Date(2013, 0, 1, 17, 00), y: data[0] },
// { x: new Date(2013, 0, 1, 18, 00), y: data[0] },
// { x: new Date(2013, 0, 1, 19, 00), y: data[0] },
// { x: new Date(2013, 0, 1, 20, 00), y: data[0] },
// { x: new Date(2013, 0, 1, 21, 00), y: data[0] },
// { x: new Date(2013, 0, 1, 22, 00), y: data[0] },
// { x: new Date(2013, 0, 1, 23, 00), y: data[0] }
// ]
//},
//{
// name: “Current”,
// showInLegend: true,
// legendMarkerType: “square”,
// type: “splineArea”,
// color: “rgba(0,75,141,0.7)”,
// markerSize: 0,
// label: “”,
// dataPoints: [

// { x: new Date(2013, 0, 1, 00, 00), label: “midnight”, y: 12 },
// { x: new Date(2013, 0, 1, 01, 00), y: 10 },
// { x: new Date(2013, 0, 1, 02, 00), y: 3 },
// { x: new Date(2013, 0, 1, 03, 00), y: 5 },
// { x: new Date(2013, 0, 1, 04, 00), y: 50 },
// { x: new Date(2013, 0, 1, 05, 00), y: 200 },
// { x: new Date(2013, 0, 1, 06, 00), y: 210 },
// { x: new Date(2013, 0, 1, 07, 00), y: 198 },
// { x: new Date(2013, 0, 1, 08, 00), y: 300 },
// { x: new Date(2013, 0, 1, 09, 00), y: 211 },
// { x: new Date(2013, 0, 1, 10, 00), y: 221 },
// { x: new Date(2013, 0, 1, 11, 00), y: 240 },
// { x: new Date(2013, 0, 1, 12, 00), y: 280, label: “noon” },
// { x: new Date(2013, 0, 1, 13, 00), y: 260 },
// { x: new Date(2013, 0, 1, 14, 00), y: 170 },
// { x: new Date(2013, 0, 1, 15, 00), y: 23 },
// { x: new Date(2013, 0, 1, 16, 00), y: 28 },
// { x: new Date(2013, 0, 1, 17, 00), y: 22 },
// { x: new Date(2013, 0, 1, 18, 00), y: 10 },
// { x: new Date(2013, 0, 1, 19, 00), y: 9 },
// { x: new Date(2013, 0, 1, 20, 00), y: 6 },
// { x: new Date(2013, 0, 1, 21, 00), y: 4 },
// { x: new Date(2013, 0, 1, 22, 00), y: 12 },
// { x: new Date(2013, 0, 1, 23, 00), y: 14 }
// ]
//},
//{
// name: “Swiped In”,
// showInLegend: true,
// legendMarkerType: “square”,
// type: “splineArea”,
// color: “rgba(54,158,173,.6)”,
// markerSize: 0,
// label: “”,
// dataPoints: [

// { x: new Date(2013, 0, 1, 00, 00), label: “midnight”, y: 12 },
// { x: new Date(2013, 0, 1, 01, 00), y: 10 },
// { x: new Date(2013, 0, 1, 02, 00), y: 30 },
// { x: new Date(2013, 0, 1, 03, 00), y: 50 },
// { x: new Date(2013, 0, 1, 04, 00), y: 20 },
// { x: new Date(2013, 0, 1, 05, 00), y: 10 },
// { x: new Date(2013, 0, 1, 06, 00), y: 30 },
// { x: new Date(2013, 0, 1, 07, 00), y: 60 },
// { x: new Date(2013, 0, 1, 08, 00), y: 140 },
// { x: new Date(2013, 0, 1, 09, 00), y: 150 },
// { x: new Date(2013, 0, 1, 10, 00), y: 210 },
// { x: new Date(2013, 0, 1, 11, 00), y: 240 },
// { x: new Date(2013, 0, 1, 12, 00), y: 280, label: “noon” },
// { x: new Date(2013, 0, 1, 13, 00), y: 260 },
// { x: new Date(2013, 0, 1, 14, 00), y: 170 },
// { x: new Date(2013, 0, 1, 15, 00), y: 230 },
// { x: new Date(2013, 0, 1, 16, 00), y: 280 },
// { x: new Date(2013, 0, 1, 17, 00), y: 220 },
// { x: new Date(2013, 0, 1, 18, 00), y: 100 },
// { x: new Date(2013, 0, 1, 19, 00), y: 90 },
// { x: new Date(2013, 0, 1, 20, 00), y: 60 },
// { x: new Date(2013, 0, 1, 21, 00), y: 40 },
// { x: new Date(2013, 0, 1, 22, 00), y: 120 },
// { x: new Date(2013, 0, 1, 23, 00), y: 140 }
// ]
//},
//{
// name: “Swiped Out”,
// showInLegend: true,
// legendMarkerType: “square”,
// type: “splineArea”,
// color: “rgba(127,96,132,.6)”,
// markerSize: 0,
// label: “”,
// dataPoints: [

// { x: new Date(2013, 0, 1, 00, 00), label: “midnight”, y: 12 },
// { x: new Date(2013, 0, 1, 01, 00), y: 10 },
// { x: new Date(2013, 0, 1, 02, 00), y: 3 },
// { x: new Date(2013, 0, 1, 03, 00), y: 5 },
// { x: new Date(2013, 0, 1, 04, 00), y: 2 },
// { x: new Date(2013, 0, 1, 05, 00), y: 10 },
// { x: new Date(2013, 0, 1, 06, 00), y: 30 },
// { x: new Date(2013, 0, 1, 07, 00), y: 60 },
// { x: new Date(2013, 0, 1, 08, 00), y: 140 },
// { x: new Date(2013, 0, 1, 09, 00), y: 15 },
// { x: new Date(2013, 0, 1, 10, 00), y: 210 },
// { x: new Date(2013, 0, 1, 11, 00), y: 24 },
// { x: new Date(2013, 0, 1, 12, 00), y: 280, label: “noon” },
// { x: new Date(2013, 0, 1, 13, 00), y: 206 },
// { x: new Date(2013, 0, 1, 14, 00), y: 17 },
// { x: new Date(2013, 0, 1, 15, 00), y: 23 },
// { x: new Date(2013, 0, 1, 16, 00), y: 28 },
// { x: new Date(2013, 0, 1, 17, 00), y: 22 },
// { x: new Date(2013, 0, 1, 18, 00), y: 10 },
// { x: new Date(2013, 0, 1, 19, 00), y: 90 },
// { x: new Date(2013, 0, 1, 20, 00), y: 60 },
// { x: new Date(2013, 0, 1, 21, 00), y: 40 },
// { x: new Date(2013, 0, 1, 22, 00), y: 12 },
// { x: new Date(2013, 0, 1, 23, 00), y: 14 }
// ]
//}
//]
});
chart.render();
},
error: function () {
RedirectToErrorPage();
}
});
}

function DataCall(details) {
var data = [];
var dataSeries = {
name: “Swiped Out”,
showInLegend: true,
legendMarkerType: “square”,
type: “splineArea”,
color: “rgba(127,96,132,.6)”,
markerSize: 0,
label: “”,
};
var dataPoints = [];
for (var i = 0, j = 0; i < details.length; i = i + 2, j++) {
y = details[i];
dateTime = new Date(2013, 0, 1, j, 00);
//dateTime.setMilliseconds(dateTime.getMilliseconds() + i);
//dateTime.setSeconds(dateTime.getSeconds() + i);
//dateTime.setMinutes(dateTime.getMinutes() + i);
//dateTime.setHours(dateTime.getHours() + i);
//dateTime.setDate(dateTime.getDate() + i);
//dateTime.setMonth(dateTime.getMonth() + i);
//dateTime.setFullYear(dateTime.getFullYear() + i);

dataPoints.push({
//x: (i+1) % 50 === 0 ? dateTime.getTime() : dateTime,
//x: i + 345345,
x: dateTime.toLocaleString(),
///x: i,
y: y
});
}
dataSeries.dataPoints = dataPoints;
data.push(dataSeries);
debugger;
return data;
}