Home forums Using CanvasJS Graph a CSV file with number of points Reply To: Graph a CSV file with number of points

#12579

KingBib
Member

Hi,

I do have a question about graph csv file

This is how my File look like:

0 246.438 243.078 114.506 246.438 243.078 114.506
1 246.438 243.078 114.506 246.438 243.078 114.506
2 246.438 243.078 114.506 246.438 243.078 114.506
3 246.438 243.078 114.506 246.438 243.078 114.506
# any comment
4 246.438 243.078 114.506 246.438 243.078 114.506
5 246.438 243.078 114.506 246.438 243.078 114.506
6 246.438 243.078 114.506 246.438 243.078 114.506
7 246.438 243.078 114.506 246.438 243.078 114.506

first: is it possible to use “space” as split value?
second: how can I ignore lines which begins with # (comment) by parsing

my code:

`function processData( allText ) {
var allLinesArray = allText.split(“\n”);
if( allLinesArray.length > 0 ){

var data = [];

var dataPoints1 = [];
var dataPoints2 = [];
var dataPoints3 = [];

var dataSeries1 = { type: “line” };
var dataSeries2 = { type: “line” };
var dataSeries3 = { 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({ label:rowData[0], y:parseInt(rowData[1]) });
dataPoints2.push({ label:rowData[0], y:parseInt(rowData[2]) });
dataPoints3.push({ label:rowData[0], y:parseInt(rowData[3]) });

}
}
}

dataSeries1.dataPoints = dataPoints1;
dataSeries2.dataPoints = dataPoints2;
dataSeries3.dataPoints = dataPoints3;

data.push(dataSeries1);
data.push(dataSeries2);
data.push(dataSeries3);

var chart = new CanvasJS.Chart(“chartContainercool”,{
backgroundColor: “#e5ecf0”,
animationEnabled: true,
zoomEnabled:true,
zoomType: “x”,
title: {
text: “cool Data”
},
axisX:{
labelAngle: 0,
labelWrap:true,
labelAutoFit: false,
labelFontSize: 15,
labelMaxWidth: 200,
labelAngle: -30,
labelFontColor: “black”
},

data: [
{
indexLabelPlacement: “outside”,
name: “X-Axis”,
indexLabelFontWeight: “bold”,
indexLabelFontColor: “black”,
legendText: “X-Axis”,
showInLegend: true,
color: “orange”,
type: “line”,
dataPoints: dataPoints1
},
{
indexLabelPlacement: “outside”,
name: “Y-Axis”,
indexLabelFontWeight: “bold”,
indexLabelFontColor: “black”,
legendText: “Y-Axis”,
showInLegend: true,
color: “green”,
type: “line”,
dataPoints: dataPoints2
},
{
indexLabelPlacement: “outside”,
name: “Z-Axis”,
indexLabelFontWeight: “bold”,
indexLabelFontColor: “black”,
legendText: “Z-Axis”,
showInLegend: true,
color: “blue”,
type: “line”,
dataPoints: dataPoints3
},

]
});

chart.render();
}
}
});