Graph a CSV file
- This topic has 61 replies, 2 voices, and was last updated 4 years, 7 months ago by
.
-
[Update]
Now we have a Tutorial on Creating Charts from CSV Data in our documentation.
Hi Wallander,
For making a graph of your daily updated CSV file, you can use JQuery to get CSV file from server and can parse that CSV File into java script and can draw a chart using canvasJS. For Ex:<!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $.ajax({ type: "GET", url: "Data.csv", dataType: "text", success: function (data) { processData(data); } }); function processData(allText) { var allLinesArray = allText.split('\n'); if (allLinesArray.length > 0) { var dataPoints = []; for (var i = 0; i <= allLinesArray.length - 1; i++) { var rowData = allLinesArray[i].split(','); if(rowData && rowData.length > 1) dataPoints.push({ label: rowData[0], y: parseInt(rowData[1]) }); } chart.options.data[0].dataPoints = dataPoints; chart.render(); } } var chart = new CanvasJS.Chart("chartContainer", { theme: "theme2", title: { text: "Basic Column Chart – CanvasJS" }, data: [ { type: "column", dataPoints: [] } ] }); }); </script> <script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script> </head> <body> <div id="chartContainer" style="height: 300px; width: 100%;"></div> </body> </html>Please Let me know if you need any further assistance.
Thanks,
AnjalistefanA,
In every browser we have developer tool which you can open either from browser’s settings or using shortcut F12. In developer tools, console is available and you can see error there. But after looking into your code we know where it is going wrong. So please correct the below mention points :
1) You are not using jQuery file because of which $ is not define when you are trying to do $(document).ready. So please use jQuery before $(document).ready.
2) Both jquery.canvasjs.min.js (jQuery Plugin) and canvasjs.min.js (standalone) are CanvasJS files and you require only one of them at any time depending on whether you want to use it as a jQuery Plugin or as a standalone library. For this sample you’ll need standalone version (canvasjs.min.js)
Below is the code with the issues fixed
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="jquery-2.1.1.js"></script> <script type="text/javascript"> $(document).ready(function () { $.ajax({ type: "GET", url:"logg.csv", dataType: "text", success: function(data) {processData(data);} }); function processData( allText ) { var allLinesArray = allText.split("\n"); if( allLinesArray.length > 0 ){ var dataPoints = []; for (var i = 0; i <= allLinesArray.length-1; i++) { var rowData = allLinesArray[i].split(","); dataPoints.push({ label:rowData[0], y:parseInt(rowData[2]) }); } drawChart(dataPoints); } } function drawChart( dataPoints) { var chart = new CanvasJS.Chart("chartContainer", { title:{ text: "ID" }, axisX:{ labelAngle: 0, labelWrap:true, labelAutoFit: false, labelFontSize: 15, labelMaxWidth: 200, labelFontColor: "black" }, data: [ { indexLabelPlacement: "outside", indexLabelFontWeight: "bold", indexLabelFontColor: "black", type: "column", dataPoints: dataPoints } ] }); chart.render(); } }); </script> <script type="text/javascript" src="canvasjs.js"></script> </head> <body> <div id="chartContainer" style="height: 300px; width: 100%;"></div> <center><b>This a test text</b></center> </body> </html>
You must be logged in to reply to this topic.