I am in the process of plotting Csv column data using highcharts. Instead of utilizing the following code snippet:
$.get('5.csv', function(data)
I am interested in inputting a local desktop Csv file with the help of:
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
The current Javascript code that I have is as follows :
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'line'
},
title: {
text: 'Test'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Units',
}
},
series: []
};
// $.get('5.csv', function(data) {
var file = event.target.file;
var reader = new FileReader();
var txt=reader.readAsText(file);
var lines = txt.split('\n');
var c = [], d = [];
$.each(lines, function(lineNo, line) {
if(lineNo > 0 ){
var items = line.split(',');
var strTemp = items[0];
c = [parseFloat(items[0]), parseFloat(items[1])];
d.push(c);
console.log(c);
}
});
options.xAxis.categories = c;
options.series = [{
data: d
}];
chart = new Highcharts.Chart(options);
});
What would be the best approach to accomplish this task? I aim to upload a Csv file from a local desktop machine. How can I connect the File Reader upload of the file to highcharts for plotting, rather than relying on $.get(5.csv', function(data) { ? Or should I consider using jquery-csv (https://github.com/evanplaice/jquery-csv). I understand there might be browser security concerns. My Csv file consists of 3 columns with a single-line header - column 1 represents the x-axis, column 2 signifies the y-axis, and column 3 will depict the error bar (which I have not implemented yet):
Q,I,E
0.009,2.40E-01,5.67E-02
0.011,2.13E-01,3.83E-02
0.013,2.82E-01,2.28E-02
and so on ....