Home › Forums › Chart Support › How can I use PHP MySQL Dynamic data › Reply To: How can I use PHP MySQL Dynamic data
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; }