You must be logged in to post your query.
Home › Forums › Chart Support › line graph with multiple series from csv
Tagged: dataPoints, line graph, Multiple series
Hi,
I am trying to create a line graph from csv file, csv file have multiple series and format look like this.
Time, CPU0, CPU1, CPU2, CPU3 10:30, 10.40, 50, 60.78, 30.38
i prepared my page, first i read the CSV file and pass the data to prepared array of series, create four series like cpu0. cpu1, cpu2 and cpu3.
Then i set these series to canvas dataPoint. I am beginner in javascipting so i dont know much about dataPoints and structure. Could you please help in this matter. Here is my page markup.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script> <script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.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 cpu0 = []; var cpu1 = []; var cpu2 = []; var cpu3 = []; for (var i = 0; i <= allLinesArray.length - 1; i++) { var rowData = allLinesArray[i].split(';'); if (rowData && rowData.length > 1) { if (i != 0) { cpu0.push({ x: rowData[1], y: rowData[2] }); cpu1.push({ x: rowData[1], y: rowData[3] }); cpu2.push({ x: rowData[1], y: rowData[4] }); cpu3.push({ x: rowData[1], y: rowData[5] }); } } } var chart = new CanvasJS.Chart("chartContainer", { title: { text: "CPU Usage" }, data: [ { type: "Line", dataPoints: [cpu0] }, { type: "Line", dataPoints: [cpu0] }, { type: "Line", dataPoints: [cpu0] }, { type: "Line", dataPoints: [cpu0] } ] }); chart.render(); } } }); </script> </head> <body> <form id="form1" runat="server"> <div> <div id="chartContainer" style="height: 300px; width: 100%;"></div> </div> </form> </body> </html>
Shahid,
You are creating array of array while assigning [cpu0] to dataPoints. Passing cpu0 directly to dataPoints should work fine in your case as shown below in code snippet.
[cpu0]
cpu0
{ type: "Line", dataPoints: cpu0 },
If you are still facing problem, you can try to debug it by consoling cpu0.
—- Sanjoy Debnath Team CanvasJS
script is updated but still graph did not generated and no error in console.
<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 cpu0 = []; var cpu1 = []; var cpu2 = []; var cpu3 = []; for (var i = 0; i <= allLinesArray.length - 1; i++) { var rowData = allLinesArray[i].split(';'); if (rowData && rowData.length > 1) { if (i != 0) { cpu0.push({ x: rowData[1], y: rowData[2] }); cpu1.push({ x: rowData[1], y: rowData[3] }); cpu2.push({ x: rowData[1], y: rowData[4] }); cpu3.push({ x: rowData[1], y: rowData[5] }); } } } console.log(cpu0); var chart = new CanvasJS.Chart("chartContainer", { title: { text: "CPU Usage" }, data: [ { type: "Line", dataPoints: cpu0 }, { type: "Line", dataPoints: cpu0 }, { type: "Line", dataPoints: cpu0 }, { type: "Line", dataPoints: cpu0 } ] }); chart.render(); } } }); </script>
Console output
Hi again,
Now i write more clean code according to one of line graph example. Graph is still not generated but i see the border is bold of the graph area.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script> <script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.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 data = []; var dataPoints1 = []; var dataPoints2 = []; var dataPoints3 = []; var dataPoints4 = []; var dataSeries1 = { type: "line" }; var dataSeries2 = { type: "line" }; var dataSeries3 = { type: "line" }; var dataSeries4 = { type: "line" }; for (var i = 0; i <= allLinesArray.length - 1; i++) { var rowData = allLinesArray[i].split(';'); if (rowData && rowData.length > 1) { if (i != 0) { dataPoints1.push({ x: rowData[1], y: rowData[2] }); dataPoints2.push({ x: rowData[1], y: rowData[3] }); dataPoints3.push({ x: rowData[1], y: rowData[4] }); dataPoints4.push({ x: rowData[1], y: rowData[5] }); } } } dataSeries1.dataPoints = dataPoints1; dataSeries2.dataPoints = dataPoints2; dataSeries3.dataPoints = dataPoints3; dataSeries4.dataPoints = dataPoints4; data.push(dataSeries1); data.push(dataSeries2); data.push(dataSeries3); data.push(dataSeries4); var chart = new CanvasJS.Chart("chartContainer", { title: { text: "cpu usage" }, data: data }); chart.render(); } } }); </script> </head> <body> <div id="chartContainer"></div> </body> </html>
@shahid-majeed,
You are passing both x and y values in string value and CanvasJS expects x value to be dateTime or numeric and y value to be numeric. So, converting x value to a valid javascript DateTime format (or you can try with label instead of x) and y value to a number will render the chart properly.
Here is a similar example to render the chart with csv data.
—– Sanjoy Debnath Team CanvasJS
[Update]
Now we have a Tutorial on Creating Charts from CSV Data in our documentation.
You must be logged in to reply to this topic. Login/Register