File Loading A Csv File Into Highcharts

I'm plotting Csv column data in highcharts. Instead of the: $.get('5.csv', function(data) I want input a local desktop Csv file using: function handleFileSelect(evt) { var files =

Solution 1:

This works now upload by File API

function processFiles(files) {
    var chart;
    options = {
            chart: {
                zoomType: 'x',
                renderTo: 'container',
                type: 'line',
                zoomType: 'x'

            },
            title: {
                text: ''
            },
            subtitle: {
                text: '' 
            },
            xAxis: {
                type: 'linear',
                minorTickInterval: 0.1,
                title: {
                    text: 'Q'}
            },
            yAxis: {
                type: 'linear',
                minorTickInterval: 0.1,
                title: {
                    text: 'I(ntensity)'
                },
            },
            tooltip: {
                shared: true
            },
            legend: {
                enabled: true
            },
            plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: [0, 0, 0, 300],
                        stops: [
                            [0,      Highcharts.getOptions().colors[0]],
                            [0, 'rgba(2,0,0,0)']
                        ]
                    },
                    lineWidth: 1,
                    marker: {
                        enabled: false,
                        states: {
                            hover: {
                                enabled: true,
                                radius: 5
                            }
                        }
                    },
                    shadow: false,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    }
                }
            },
            series: [{
                name: 'Series'}]
    };



var file = files[0]
var reader = new FileReader();
reader.onload = function (e) {

str = e.target.result;
    var lines = str.split("\n");
    var c = [], d = [], er = [];
    $.each(lines, function(lineNo, line) {
            if(lineNo > 0 ){
                var items = line.split(','); 
                var strTemp = items[0];
                er = parseFloat(items[2])
                a = parseFloat(items[0])
                b = parseFloat(items[1])
                min = (b - (er/2))
                max = b + ((er/2))
                c = [a , b];
                var q = [], e = [];
                q = [min, max]
                e.push(q);

                d.push(c);

                console.log(c);
                console.log(q);
            }
    });

    options.xAxis.categories = c.name;
    lineWidth: 1
    options.series = [{
            data: d,
            type: 'scatter'
    }, {
        name: 'standard deviation',
        type: 'errorbar',
        color: 'black',
        data : e }
];
    $("#Linear").click(function(){
        $('#container').highcharts().yAxis[0].update({ type: 'linear'});
    });

    $("#Log").click(function(){
        $('#container').highcharts().yAxis[0].update({ type: 'logarithmic'});
    });

    $("#Guinier").click(function(){
        $('#container').highcharts().yAxis[0].update({ data: Math.log(d)});
        options.xAxis.categories = c.name;
        lineWidth: 1
        options.series = [{
            data: d
    }]
    });

  chart = new Highcharts.Chart(options);
}

    reader.readAsText(file)
    var output = document.getElementById("fileOutput")

};

Solution 2:

Due to security reasons you can't load a file directly on the client-side

To do this you need to use the HTML5 File API which will give the user a file dialog to select the file.

If you plan to use jquery-csv here's an example that demonstrates how to do that.

• File Handling Demo

I'm biased but I say use jquery-csv to parse the data, trying to write a CSV parser comes with a lot of nasty edge cases.

Source: I'm the author of jquery-csv

As an alternative, if jquery-csv doesn't meet your needs, PapaParse is very good too.