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

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