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

This topic contains 35 replies, has 7 voices, and was last updated by  Suyash Singh 1 year, 10 months ago.

Viewing 6 posts - 31 through 36 (of 36 total)
  • Author
    Posts
  • #14941

    @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

    #14947

    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 1 year, 11 months ago by  KingBib.
    #14956

    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

    #14967

    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

    #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

    #15201

    @fbk,

    If you are switching from any other library to CanvasJS, you will need to parse the data in the format required 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)

You must be logged in to reply to this topic.