Highcharts: Preprocess data using CSV

Question

Hello I am getting started with Highcharts for Datajournalism and I am trying to load data from a CSV file as described in the documentation 'processing data from a file' (http://www.highcharts.com/docs/working-with-data/preprocessing-data-from-a-file-csv-xml-json)

However, the only thing I get is a blank page and this error: XMLHttpRequest cannot load file:///Users/.../data.csv. Received an invalid response. Origin 'null' is therefore not allowed access.

My file data.csv is in the same folder as the script highcharts_2.html itself. The folder 'js' that is contained in the Highcharts download is also in the same folder as the data and the script. Below is the highchart_2.html I used...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
<script src="js/highcharts.js" type="text/javascript"></script> <!--where you put the high charts library -->

<script>
        $(document).ready(function() {
            var options = {
                chart: {
                    renderTo: 'container',
                    type: 'column'
                },
                title: {
                    text: 'Fruit Consumption'
                },
                xAxis: {
                    categories: []
                },
                yAxis: {
                    title: {
                        text: 'Units'
                    }
                },
                series: []
            };


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

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

                    // the rest of the lines contain data with their name in the first position
                    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);
            });
        });


</script>




<div id="container" style="width:100%; height:400px;"></div>

I searched all forums already and just look at the html and think it should be working but it doesn't. I am pretty sure it will be a 'facepalm' but I just can't find the solution. Thank you so much for your help!

Answer 1

You need to load file from webserver, not from local filesystem. The browsers block this scenario.