Reading uploaded csv file in highcharts

Question

What i want to do is upload csv file and then use it in highcharts as a data source (complete code for chart)

$(document).ready(function() {

        var options = {
            chart: {
                renderTo: 'cont2',
                type: 'column'
            },
            title: {
                text: ''
            },
            xAxis: {
                categories: []
            },
            yAxis: {

                title: {
                    text: 'Units'
                }
            },
            series: []
        };


$.get('datasample.csv', function(data) {
            // Split the lines
            var lines = data.split('\n');
            $.each(lines, function(lineNo, line) {
                var items = line.split(',');

                // Categories in header
                if (lineNo == 0) {
                    $.each(items, function(itemNo, item) {
                        if (itemNo > 0) options.xAxis.categories.push(item);
                    });
                }


                else {
                    var series = { 
                        data: []
                    };
                    $.each(items, function(itemNo, item) {
                        if (itemNo == 0) {
                            series.name = item;
                        } else {
                            series.data.push(parseFloat(item));
                        }
                    });

                    options.series.push(series);
                }

            });

            var chart = new Highcharts.Chart(options);
        });


    });

as you can see path to csv file is set manually, im using button for csv upload

<b>CSV</b> <input type="file" id="csvfile" accept=".csv"> 

if i set "location" for csv like this

document.getElementById('csvfile', function(data)

it won't work.. please help me with this one im desperate, i would like to try this api http://jquery-csv.googlecode.com/git/examples/flot.html (load from file) but i don't really get it ( just in case source code for jquery-csvgooglecode: https://code.google.com/p/jquery-csv/source/browse/examples/flot.html?r=fe4f71afe603b037303c9f5597fb606df1c33ce0&spec=svnfe4f71afe603b037303c9f5597fb606df1c33ce0 ) Thanks for any kind of help, much appreciated! ps: im not using server so no php solution

Answer 1

So this is how you can bind event to load file:

$('#csvfile').on('change', readFile);

And then callback can look this way:

function readFile(e) {
    //Load first file:
    var f = e.target.files[0]; 
    if (f) {
        var r = new FileReader();
        r.onload = renderChart;
        r.readAsText(f);
    } else { 
        alert("Error, file not loaded");
    }
}

Now you loaded file and need to create renderChart method, where you put your code responsible for creating chart:

function renderChart(e) {
    var data = e.target.result;  //get data

    // here comes the rest of the code:

    // Split the lines
    var lines = data.split('\n'); 
    .
    .
    .
    var chart = new Highcharts.Chart(options);
}  

And HTML part:

<input type="file" id="csvfile" accept=".csv" name="files[]" >