FORUMS

Select any forum below to ask question

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)
  • October 26, 2017 at 5:31 am #17388

    asingh

    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://cdn.canvasjs.com/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,

    October 26, 2017 at 7:22 pm #17394

    Bivek Singh

    @asingh,

    Please take a look at this jsFiddle.

    —–
    Bivek Singh,
    Team CanvasJS

    October 26, 2017 at 9:27 pm #17395

    asingh

    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.