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

Tagged: 

This topic contains 5 replies, has 5 voices, and was last updated by  Vishwas R 2 months, 2 weeks ago.

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

    Baekmark
    Member

    Hi all
    I found this great piece of tool yesterday, and I’m already using this recipe: http://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.

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

You must be logged in to reply to this topic.