Home › Forums › Chart Support › Creating line chart from csv › Reply To: Creating line chart from csv
stuart,
In your csv file you have dateTime values which you are assigning to label property. Instead you should be assign dateTime values to x-value which can be done as shown below :
<!DOCTYPE html> <html> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function () { var dataPoints1 = []; var dataPoints2 = []; $.ajax({ type: "GET", url: "http://www.cuedup.biz/vgraphing/demoui/BT01.csv", dataType: "text", success: function (data) { processData1(data); } }); function processData1(allText) { var allLinesArray = allText.split('\n'); if (allLinesArray.length > 0) { for (var i = 0; i <= allLinesArray.length - 2; i++) { var rowData = allLinesArray[i].split(','); var labelData = rowData[0].split(":"); if( labelData[2] === undefined ) labelData[2] = 0; labelData[0] = parseInt(labelData[0]); labelData[1] = parseInt(labelData[1]); labelData[2] = parseInt(labelData[2]); if (rowData.length >= 2) dataPoints1.push({ x: new Date(2012, 1, 1, labelData[0], labelData[1], labelData[2]), y: parseInt(rowData[1]) }); } } requestTempCsv(); } function requestTempCsv() { $.ajax({ type: "GET", url: "http://www.cuedup.biz/vgraphing/demoui/GP01.csv", dataType: "text", success: function (data) { processData2(data); } }); } function processData2(allText) { var allLinesArray = allText.split('\n'); if (allLinesArray.length > 0) { for (var i = 1; i <= allLinesArray.length - 1; i++) { var rowData = allLinesArray[i].split(','); var labelData = rowData[0].split(":"); if (labelData[2] === undefined) labelData[2] = 0; labelData[0] = parseInt(labelData[0]); labelData[1] = parseInt(labelData[1]); labelData[2] = parseInt(labelData[2]); if (rowData.length >= 2) dataPoints2.push({ x: new Date(2012, 1, 1, labelData[0], labelData[1], labelData[2]), y: parseInt(rowData[1]) }); } drawChart(dataPoints1, dataPoints2); } } function drawChart(dataPoints1, dataPoints2) { var chart = new CanvasJS.Chart("GP01", { theme: "theme2", title: { text: "Master bedroom temperature and heating demand" }, zoomEnabled: true, data: [ { type: "stepLine", dataPoints: dataPoints1 }, { type: "spline", dataPoints: dataPoints2 } ] }); chart.render(); } }); </script> <script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script> </head> <body> <div id="GP01" style="height: 300px; width:100%;"></div> </body> </html>
__ Anjali