Home › Forums › Chart Support › How can I plot values from .txt file ?

How can I plot values from .txt file ?

Viewing 6 posts - 31 through 36 (of 36 total)
1 2 3
  • April 25, 2017 at 2:26 pm #14941

    Suyash Singh

    @fbk,

    For security reasons, browsers restrict cross-origin requests. The text and the html files both have to be on the same server. You can set up a local server if you want to read the file directly.

    Please refer stackOverflow for more information.

    ___
    Suyash Singh
    Team CanvasJS

    April 26, 2017 at 5:09 pm #14947

    KingBib

    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 7 years, 6 months ago by KingBib.
    April 27, 2017 at 10:41 am #14956

    Suyash Singh

    Hi @kingbib,

    processData(allText) requires an argument. Since you are not passing any argument to it, setInterval(function(){ processData(); }, 1000); an error is thrown when you try to split the variable allText since it is undefined.

    Instead of calling the processData() only, you can put the entire ajax call in setInterval.

    setInterval(function(){
    $.ajax({
        type: "GET",
        url: "dataSmall.txt",
        dataType: "text",
        success: function (data) { processData(data); }	
    });		
 }, 1000);

    This will resolve your issue.

    ___
    Suyash Singh
    Team CanvasJS

    April 28, 2017 at 11:25 am #14967

    KingBib

    Hi,

    this is working to avoid the error. Some remarks for others.

    1) using cache: false, within ajax call else the browser cache exploid with setintervall function
    2) using Timeout function instead setintervall, setintervall will stack tasks if the focus is not on the window
    3) i get problems with refreshing and showing “live” cause my file have 200.000 + lines in it and reread costs me around 1+ seconds some times.

    correct me if im wrong

    best regards

    May 26, 2017 at 8:26 pm #15195

    fbk

    hi again,
    i have an assignment to change the charting library from epoch charts to any other – which i decided to chose canvasjs – can anyone give me an example to it? however, the file is coming in from a local server and is being rendered via charting lirary – it has nodejs and sockets.io , since im new to it i dont know where to start from..
    any helpful comments appreciated
    thanks

    May 29, 2017 at 1:21 pm #15201

    Suyash Singh

    @fbk,

    If you are switching from any other library to CanvasJS, you will need to parse the data in the format accepted by CanvasJS. Also please refer this thread on rendering CanvasJS Chart using Socket.io.

    ___
    Suyash Singh
    Team CanvasJS

Viewing 6 posts - 31 through 36 (of 36 total)
1 2 3

You must be logged in to reply to this topic.