How can I plot values from .txt file ?

[fbk]

hi
thanks for your kind reply but
– it doesnt display in my browser chrome (Version 57.0.2987.133 (64-bit)
– however please see this https://jsfiddle.net/rsoom3j1/ its taking random numbers and displaying live line graph
i just need to improvise on this and create a graph that would take inputs from file which has columns and display
values in graph – first column tells if its neg or positive and second the value
thanks a lot

[fbk]

hi
thanks to you the fiddle you referred worked after a few changes, i managed to work it out, great help :)
however how to make it work for three columns of same type?
thanks in advance

[fbk]

hi
thanks to you the fiddle you referred worked after a few changes, i managed to work it out, great help 🙂
however how to make it work for three columns of same type? please have a look whats going wrong
http://jsfiddle.net/a9ks2w43/5/
thanks in advance

[fbk]

dear all,
your kind reply would be highly appreciated
as mentioned earlier..

1- i want to be able to read all of the text file with ‘pos’ or ‘neg’ string inside and plot its values on Yaxis
right now its only doing the first column. however there are more than three columns.
http://jsfiddle.net/a9ks2w43/5/ for reference

apologies for constant bugging but i really am new to all of this
thanks for help

[Suyash Singh]

@fbk,

Kindly refer this jsfiddle on creating multiseries chart from text file.

The format of the text file( e.g. dataPoints.txt ) should be:

pos 0.20 0
neg 0.17 1
neg 0.43 1
pos 0.13 0
pos 0.27 2

The last column in the text file is the dataSeries index.
___
Suyash Singh
Team CanvasJS

[fbk]

thanks Suyash!
i had managed to traverse but unfortunately row wise
am looking into what you suggested,
the file has more than one columns like i mentioned

Neg 0.75 Pos 0.65 Neg 0.75
Pos 0.63 Pos 0.74 Pos 0.74
Pos 0.84 Pos 0.88 Pos 0.88
Neg 0.54 Neg 0.57 Neg 0.57
Pos 0.67 Pos 0.67 Pos 0.67
Pos 0.83 Pos 0.89 Pos 0.83
Neg 0.56 Neg 0.55 Neg 0.56
Pos 0.68 Pos 0.60 Pos 0.68
Neg 0.58 Neg 0.58 Neg 0.58
Neg 0.74 Neg 0.64 Neg 0.74

but my code http://jsfiddle.net/a9ks2w43/16/ goes line by line and not column wise!!
so its basically three graphs in one display
with their corresponding neg and pos

thanks for your suggestion am looking into it again

[Suyash Singh]

@fbk,

Please have a look at this updated jsfiddle.

___
Suyash Singh
Team CanvasJS

[fbk]

hi Suyash,
so nice of you to respond back, however like i said its still managing to go row wise and not column wise. i.e. the display should be in graph
neg .75 pos 0.65 neg0.80 and neg 0.54 however its displaying row wise in first set and it runs like this neg 0.75 pos 0.67 pos 0.65.
this is what my code is also displaying so far – and am trying to find some help that could bring the required result.
thanks a lot – looking forward, been a great help

[fbk]

hi
i got it :)) thanks a lott!
best

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

[Suyash Singh]

@kingbib,

Can you please brief us more about the source of your text file and the data format you are using to store data?

___
Suyash Singh
Team CanvasJS

[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

[Suyash Singh]

@kingbub,

It would be better if you create the chart once, update the dataPoints and render it again on every update.
Also you can use setInterval to update the chart after a fixed interval.
Please check the uploaded zip file.

___
Suyash Singh
Team CanvasJS

[fbk]

hi all,
thanks a lot specially Suyash for his kind help, Ok so now i have this running
http://jsfiddle.net/a9ks2w43/45/ but what i want now is

– it should read directly from the location the text file is placed in a local machine and user dont have to point it to open, as the file changes every 1sec and bring in new data
i tried using ‘get’ but i think im not placing something right, as im new to it

– how do i open this lower graph in a new browser window and not in this window
I again tried some tutorials but i guess some expert help is needed here.

help much appreciated
thanks

[fbk]

this is the text file..

Neg 0.75 Pos 0.65 Neg 0.75
Pos 0.63 Pos 0.74 Pos 0.74
Pos 0.84 Pos 0.88 Pos 0.88
Neg 0.54 Neg 0.57 Neg 0.57
Pos 0.67 Pos 0.67 Pos 0.67
Pos 0.83 Pos 0.89 Pos 0.83
Neg 0.56 Neg 0.55 Neg 0.56
Pos 0.68 Pos 0.60 Pos 0.68
Neg 0.58 Neg 0.58 Neg 0.58
Neg 0.74 Neg 0.64 Neg 0.74
Pos 0.66 Pos 0.56 Pos 0.66
Pos 0.89 Neg 0.94 Neg 0.94
Neg 0.76 Neg 0.70 Neg 0.76
Pos 0.67 Pos 0.69 Pos 0.69
Neg 0.80 Neg 0.56 Neg 0.80
Neg 0.78 Neg 0.87 Neg 0.87
Neg 0.69 Neg 0.69 Neg 0.69
Pos 0.88 Pos 0.84 Pos 0.88
Neg 0.75 Neg 0.78 Neg 0.78
Pos 0.66 Pos 0.64 Pos 0.66
Pos 0.89 Pos 0.87 Pos 0.89
Neg 0.77 Neg 0.75 Neg 0.77
Neg 0.54 Neg 0.58 Neg 0.58
Pos 0.57 Pos 0.58 Pos 0.58
Neg 0.57 Neg 0.59 Neg 0.59
Neg 0.58 Neg 0.54 Neg 0.58
Pos 0.54 Pos 0.54 Pos 0.54
Neg 0.56 Neg 0.59 Neg 0.59
Neg 0.68 Neg 0.64 Neg 0.68
Pos 0.75 Pos 0.74 Pos 0.75
Neg 0.65 Neg 0.69 Neg 0.69
Pos 0.58 Pos 0.59 Pos 0.59
Neg 0.75 Neg 0.74 Neg 0.75