Home forums Using CanvasJS Graph a CSV file with number of points

Tagged: 

This topic contains 7 replies, has 6 voices, and was last updated by  Suyash Singh 6 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #10540

    Baekmark
    Member

    Hi all
    I found this great piece of tool yesterday, and I’m already using this recipe: https://canvasjs.com/forums/topic/graph-a-csv-file/
    Works like a charm, but is it possible to state how many lines you want to display? I’m thinking like last ten lines, og maybe based on date

    Thanks in advance

    /Lars

    #10557

    Sanjoy
    Moderator

    Baekmark,

    For showing certain number of lines from the end you can modify the processData function as below for iterating over number of lines.

    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
    <script type="text/javascript">
    
    $(document).ready(function () {
    
        $.ajax({
            type: "GET",
            url: "Data.csv",
            dataType: "text",
            success: function (data) { processData(data); }
        });
    
        function processData(allText) {
            var numberOfLinesFromEnd = 10;
            var allLinesArray = allText.split('\n');
            if (allLinesArray.length > 0) {
                var dataPoints = [];
                for (var i = Math.max(0, allLinesArray.length - numberOfLinesFromEnd) ; i <= allLinesArray.length - 1; i++) {
    	        var rowData = allLinesArray[i].split(',');
    	        if(rowData && rowData.length > 1)
    	            dataPoints.push({ label: rowData[0], y: parseInt(rowData[1]) });
                }
                chart.options.data[0].dataPoints = dataPoints;
                chart.render();
            }
        }
    
                
        var chart = new CanvasJS.Chart("chartContainer", {
            theme: "theme2",
            title: {
                text: "Basic Column Chart – CanvasJS"
            },
            data: [
            {
                type: "column",
                dataPoints: []
            }
            ]
        });
                
    });
    </script>
    <script type="text/javascript" src="canvasjs.min.js"></script>
    </head>
    <body>
    <div id="chartContainer" style="height: 300px; width: 100%;"></div>
    </body>
    </html>
    #10560

    Baekmark
    Member

    Hi Sanjoy

    That did it!

    Thanks a million

    /Lars

    #12535

    Sunil Urs
    Keymaster

    [Update]

    Now we have a Tutorial on Creating Charts from CSV Data in our documentation.

    #12579

    KingBib
    Member

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

    #12581

    Vishwas R
    Keymaster

    @kingbib,

    Please check this jsfiddle.

    #14915

    KingBib
    Member

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

    Suyash Singh
    Moderator

    @kingbib,

    Please refer this thread on creating graph from text file.

    ___
    Suyash Singh
    Team CanvasJS

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

You must be logged in to reply to this topic.