You must be logged in to post your query.
Home › Forums › Chart Support › Dynamic Chart using CSV
Tagged: csv, dynamic charts
Hi i am new to canvasjs, my goal is to display temperature sensor real time data using canvas dynamic chart. Code from canvasjs is show below. It generated random number so how do i change following code so that it reads value from csv file?
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> window.onload = function () { var dps = []; // dataPoints var chart = new CanvasJS.Chart("chartContainer",{ title :{ text: "Live Random Data" }, data: [{ type: "line", dataPoints: dps }] }); var xVal = 0; var yVal = 100; var updateInterval = 100; var dataLength = 500; // number of dataPoints visible at any point var updateChart = function (count) { count = count || 1; // count is number of times loop runs to generate random dataPoints. for (var j = 0; j < count; j++) { yVal = yVal + Math.round(5 + Math.random() *(-5-5)); dps.push({ x: xVal, y: yVal }); xVal++; }; if (dps.length > dataLength) { dps.shift(); } chart.render(); }; // generates first set of dataPoints updateChart(dataLength); // update chart after specified time. setInterval(function(){updateChart()}, updateInterval); } </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>
I got one code from canvasjs blog in that graph reads data from csv file and code is shown below.
`<!DOCTYPE html> <html> <head> <script type=”text/javascript” src=”http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.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: “theme1”, title: { text: “Welcome to World of IOT” }, data: [ { type: “line”, dataPoints: [] } ] });
}); </script> <script type=”text/javascript” src=”canvasjs.min.js”></script> </head> <body> <div id=”chartContainer” style=”height: 500px; width: 80%;”></div> </body> </html> How can i modify above two code and achieve reading data from csv and do dynamic plotting.?
You must be logged in to reply to this topic. Login/Register