Forum Replies Created by KingBib

Viewing 6 posts - 1 through 6 (of 6 total)
  • in reply to: How can I plot values from .txt file ? #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

    in reply to: How can I plot values from .txt file ? #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 7 years, 6 months ago by KingBib.
    in reply to: How can I plot values from .txt file ? #14931

    Sure i can :)
    I have some issues im facing rigth now.

    1) the file is text format (csv possible) and really big like 150000 lines

    2) it have 7 rows in a line (123 456 789 999 999 999 999)

    first i tried to build a update function, what happens is i have to run every time ajax read ( i guess so)
    it is really slow and fill up the browser cache pretty fast cause it reread the the copmplete file everytime and store it.

    what i want is to show a live update with the last 1000 lines and shifting the graph.
    I know text format seems not to be the best source

    in reply to: How can I plot values from .txt file ? #14921

    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();
                    }
                }
            });	
    in reply to: Graph a CSV file with number of points #14915

    Hi Again,

    this is my code working fine right now :)

    how can i update the chart using txt file as source as in my code ?
    (the text file will raise continously)
    Can you help me with changing my code ?

    $(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();
                    }
                }
            });		
    in reply to: Graph a CSV file with number of points #12579

    Hi,

    I do have a question about graph csv file

    This is how my File look like:

    0 246.438 243.078 114.506 246.438 243.078 114.506
    1 246.438 243.078 114.506 246.438 243.078 114.506
    2 246.438 243.078 114.506 246.438 243.078 114.506
    3 246.438 243.078 114.506 246.438 243.078 114.506
    # any comment
    4 246.438 243.078 114.506 246.438 243.078 114.506
    5 246.438 243.078 114.506 246.438 243.078 114.506
    6 246.438 243.078 114.506 246.438 243.078 114.506
    7 246.438 243.078 114.506 246.438 243.078 114.506

    first: is it possible to use “space” as split value?
    second: how can I ignore lines which begins with # (comment) by parsing

    my code:

    `function processData( allText ) {
    var allLinesArray = allText.split(“\n”);
    if( allLinesArray.length > 0 ){

    var data = [];

    var dataPoints1 = [];
    var dataPoints2 = [];
    var dataPoints3 = [];

    var dataSeries1 = { type: “line” };
    var dataSeries2 = { type: “line” };
    var dataSeries3 = { type: “line” };

    for (var i = 0; i <= allLinesArray.length – 1; i++) {
    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]) });

    }
    }
    }

    dataSeries1.dataPoints = dataPoints1;
    dataSeries2.dataPoints = dataPoints2;
    dataSeries3.dataPoints = dataPoints3;

    data.push(dataSeries1);
    data.push(dataSeries2);
    data.push(dataSeries3);

    var chart = new CanvasJS.Chart(“chartContainercool”,{
    backgroundColor: “#e5ecf0”,
    animationEnabled: true,
    zoomEnabled:true,
    zoomType: “x”,
    title: {
    text: “cool 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
    },

    ]
    });

    chart.render();
    }
    }
    });

Viewing 6 posts - 1 through 6 (of 6 total)