Home Forums Chart Support load csv file dynamically upon user selection

load csv file dynamically upon user selection

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


    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.

    <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://cdn.canvasjs.com/canvasjs.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    		type: "GET",
    		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]) });
    	function drawChart( dataPoints) {
    		var chart = new CanvasJS.Chart("chartContainer", {
    			zoomEnabled: true,
    				text: ""
    				labelAngle: 0,
    				labelAutoFit: false,
    				labelMaxWidth: 50,
    				labelFontColor: "black"
    			data: [
    				indexLabelPlacement: "outside",
    				indexLabelFontWeight: "bold",
    				indexLabelFontColor: "black",
    				type: "column",
    				dataPoints: dataPoints
    <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>




    Please take a look at this jsFiddle.

    Bivek Singh,
    Team CanvasJS


    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.