Home › Forums › Chart Support › How can I plot values from .txt file ? › Reply To: How can I plot values from .txt file ?
Hi guys,
this code is working fine static for me.
Now i try to update my chart and showing live graph.
The text file is getting bigger and bigger continously and i want to show always the last 2000 lines in a graph dynamic.
right now im not getting it done with my code can you help me ?
$(document).ready(function () {
$.ajax(
{
type: "GET",
url: "share/cool_1.txt",
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 dataPoints5 = [];
var dataPoints6 = [];
var dataPoints7 = [];
var dataSeries1 = { type: "line" };
var dataSeries2 = { type: "line" };
var dataSeries3 = { type: "line" };
var dataSeries4 = { type: "line" };
var dataSeries5 = { type: "line" };
var dataSeries6 = { type: "line" };
var dataSeries7 = { type: "line" };
for (var i = 0; i <= allLinesArray.length - 1; i++)
if (!(allLinesArray[i].indexOf('#') !== -1))
{
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]) });
dataPoints4.push({ label:rowData[0], y:parseInt(rowData[4]) });
dataPoints5.push({ label:rowData[0], y:parseInt(rowData[5]) });
dataPoints6.push({ label:rowData[0], y:parseInt(rowData[6]) });
dataPoints7.push({ label:rowData[0], y:parseInt(rowData[7]) });
}
}
}
dataSeries1.dataPoints = dataPoints1;
dataSeries2.dataPoints = dataPoints2;
dataSeries3.dataPoints = dataPoints3;
dataSeries4.dataPoints = dataPoints4;
dataSeries5.dataPoints = dataPoints5;
dataSeries6.dataPoints = dataPoints6;
dataSeries7.dataPoints = dataPoints7;
data.push(dataSeries1);
data.push(dataSeries2);
data.push(dataSeries3);
data.push(dataSeries4);
data.push(dataSeries5);
data.push(dataSeries6);
data.push(dataSeries7);
var chart = new CanvasJS.Chart("chartContainercool",{
backgroundColor: "#e5ecf0",
animationEnabled: true,
zoomEnabled:true,
zoomType: "x",
title: {
text: "CCcool 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
},
{
indexLabelPlacement: "outside",
name: "X-Axis Tourque",
indexLabelFontWeight: "bold",
indexLabelFontColor: "black",
legendText: "X-Axis Tourque",
showInLegend: true,
color: "orange",
type: "line",
dataPoints: dataPoints4
},
{
indexLabelPlacement: "outside",
name: "Y-Axis Tourque",
indexLabelFontWeight: "bold",
indexLabelFontColor: "black",
legendText: "Y-Axis Tourque",
showInLegend: true,
color: "green",
type: "line",
dataPoints: dataPoints5
},
{
indexLabelPlacement: "outside",
name: "Z-Axis Tourque",
indexLabelFontWeight: "bold",
indexLabelFontColor: "black",
legendText: "Z-Axis Tourque",
showInLegend: true,
color: "blue",
type: "line",
dataPoints: dataPoints6
},
{
indexLabelPlacement: "outside",
name: "SP-Axis Tourque",
indexLabelFontWeight: "bold",
indexLabelFontColor: "black",
legendText: "SP-Axis Tourque",
showInLegend: true,
color: "yellow",
type: "line",
dataPoints: dataPoints7
},
]
});
chart.render();
}
}
});