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,
.
