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://canvasjs.com/assets/script/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,
Here your data array should be as-
{ type: "Line", dataPoints: cpu0},
cpu0 is already an array. And still some problem persists you can debug it by consoling cpu0.
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://canvasjs.com/assets/script/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>
In your case both x and y are string type. So, converting
should render the chart fine. Here is an similar example with csv data.
[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.