Home forums Using CanvasJS load csv file dynamically upon user selection

This topic contains 2 replies, has 2 voices, and was last updated by  asingh 4 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #17388

    asingh
    Member

    Hi,

    I have the code below, the csv file in url (ajax call) is hardcoded, is there any way to let user select CSV file and load it into the chart? Basically what I would like to do is have a link to each CSV file printed out on the HTML page and let user Choose what CSV file he/she wants to use to see in the charts.

    Case scenario: CSV file is updated by a bash script every 30 minutes and backed up every 24 hours. I would like to have the functionality where users can see these backup files from the server, click them so they get loaded in the chart/graph.

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
    <script type=”text/javascript” src=”https://canvasjs.com/assets/script/jquery-1.11.1.min.js”></script>
    <script type=”text/javascript” src=”https://canvasjs.com/assets/script/canvasjs.min.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {

    $.ajax({
    type: “GET”,
    url:”file2.csv”,
    dataType: “text”,
    success: function(data) {processData(data);}
    });

    function processData( allText ) {
    var allLinesArray = allText.split(“\n”);
    if( allLinesArray.length > 0 ){
    var dataPoints = [];
    for (var i = 0; i <= allLinesArray.length-1; i++) {
    var rowData = allLinesArray[i].split(“,”);
    dataPoints.push({ label:rowData[0], y:parseInt(rowData[1]) });
    }
    drawChart(dataPoints);
    }
    }

    function drawChart( dataPoints) {
    var chart = new CanvasJS.Chart(“chartContainer”, {
    zoomEnabled: true,
    title:{
    text: “”
    },
    axisX:{
    labelAngle: 0,
    labelWrap:true,
    labelAutoFit: false,
    labelFontSize:15,
    labelMaxWidth: 50,
    labelFontColor: “black”
    },
    data: [
    {
    indexLabelPlacement: “outside”,
    indexLabelFontWeight: “bold”,
    indexLabelFontColor: “black”,
    type: “column”,
    dataPoints: dataPoints
    }
    ]
    });
    chart.render();
    }
    });
    </script>
    </head>
    <body style=” background-color: #FFFFFF; background-repeat: repeat-x;text-align:center”>
    <div id=”chartContainer” style=”text-align: center; height: 500px; width: 100%”></div>
    <div style=”text-align: center; color:black; font-size:25px;”><b>Something Monitor</b></div>
    </body>
    </html>

    Thanks,

    #17394

    Bivek Singh
    Moderator

    @asingh,

    Please take a look at this jsFiddle.

    —–
    Bivek Singh,
    Team CanvasJS

    #17395

    asingh
    Member

    Hi Bivek,
    Thank you for the prompt reply. I can see now how I can write a shell script which will update html automatically when a backup is taken for the CSV. I will try this approach and let you know how it went.

    Thank you.

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

You must be logged in to reply to this topic.