Forum Replies Created by KingBib

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

April 28, 2017 at 11:25 am 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

April 26, 2017 at 5:09 pm in reply to: How can I plot values from .txt file ? #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, 7 months ago by KingBib.

April 24, 2017 at 12:18 pm in reply to: How can I plot values from .txt file ? #14931

KingBib

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

April 21, 2017 at 11:43 am in reply to: How can I plot values from .txt file ? #14921

KingBib

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();
                }
            }
        });

April 20, 2017 at 7:03 pm in reply to: Graph a CSV file with number of points #14915

KingBib

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();
                }
            }
        });

September 19, 2016 at 7:09 pm in reply to: Graph a CSV file with number of points #12579

KingBib

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)

FORUMS

Forum Replies Created by KingBib

Quick Links

Server Side Technologies

Front Side Technologies

Contact

FORUMS

Login to Ask a Question or Reply

Forum Replies Created by KingBib