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 4 weeks ago.

Viewing 15 posts - 16 through 30 (of 36 total)
  • Author
    Posts
  • #14820

    fbk
    Member

    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

    #14832

    fbk
    Member

    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

    #14833

    fbk
    Member

    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

    #14837

    fbk
    Member

    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

    #14842

    Suyash Singh
    Moderator

    @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

    #14844

    fbk
    Member

    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

    #14853

    Suyash Singh
    Moderator

    @fbk,

    Please have a look at this updated jsfiddle.

    ___
    Suyash Singh
    Team CanvasJS

    #14854

    fbk
    Member

    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

    #14855

    fbk
    Member

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

    #14921

    KingBib
    Member

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

    Suyash Singh
    Moderator

    @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

    #14931

    KingBib
    Member

    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

    #14937

    Suyash Singh
    Moderator

    @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

    #14938

    fbk
    Member

    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

    #14939

    fbk
    Member

    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

Viewing 15 posts - 16 through 30 (of 36 total)

You must be logged in to reply to this topic.