Home forums Using CanvasJS How can I plot values from .txt file ? Reply To: How can I plot values from .txt file ?

#14947

KingBib
Member

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>
  • This reply was modified 5 months, 4 weeks ago by  KingBib.