Hi again,
the shifting with limited points are working fine thank you ! (i modified source to 3 rows only)
but if i set an interval now ive got an error every interval
it say:
cannot read prperty ‘split’ of undefined
at processData line 75 (var allLinesArray = allText.split(“\n”);)
i cannopt find my mistake at the moment -.-
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<!--<meta http-equiv="refresh" content="2">-->
<title>Framework</title>
<link rel="stylesheet" href="stylegraph.css">
<script type="text/javascript" src="addons/canvasjs/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="addons/canvasjs/canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = function() {
$.ajax(
{
type: "GET",
url: "share/cool_1.txt",
dataType: "text",
success: function (data) { processData(data); }
}
);
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: [
{
type: "line",
indexLabelPlacement: "outside",
name: "X-Axis",
indexLabelFontWeight: "bold",
indexLabelFontColor: "black",
legendText: "X-Axis",
showInLegend: true,
color: "orange",
dataPoints: []
},
{
type: "line",
indexLabelPlacement: "outside",
name: "Y-Axis",
indexLabelFontWeight: "bold",
indexLabelFontColor: "black",
legendText: "Y-Axis",
showInLegend: true,
color: "green",
dataPoints: []
},
{
type: "line",
indexLabelPlacement: "outside",
name: "Z-Axis",
indexLabelFontWeight: "bold",
indexLabelFontColor: "black",
legendText: "Z-Axis",
showInLegend: true,
color: "blue",
dataPoints: []
},
]
});
function processData(allText) {
var allLinesArray = allText.split("\n");
if( allLinesArray.length > 0 ) {
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) {
chart.options.data[0].dataPoints.push({x: parseInt(rowData[0]), y: parseInt(rowData[1])});
chart.options.data[1].dataPoints.push({x: parseInt(rowData[0]), y: parseInt(rowData[2])});
chart.options.data[2].dataPoints.push({x: parseInt(rowData[0]), y: parseInt(rowData[3])});
}
}
}
for(var i = 0; i < chart.options.data.length; i++) {
while(chart.options.data[i].dataPoints.length > 2000)
chart.options.data[i].dataPoints.shift();
}
chart.render();
}
setInterval(function(){ processData(); }, 1000);
}
}
</script>
</head>
<body bgcolor="#564B47" >
<div id="wrapper">
<div id="header">
<font color="#039A9A"><strong>S</strong> </font> Frame
</div>
<div id="chartContainercool" style="height: 100%; width: 100%; "></div>
<div id="footer">
<font></font>
</div>
</div>
</body>
</html>