CODEWITHSUNDEEP
javascriptjqueryhighcharts
imagineerThat
imagineerThat

Reputation: 5553

Highcharts: Cannot get example to display chart

I cannot get the following chart to display. The following is the jQuery. I've tried other examples by replacing the jQuery and it works. I have all my files in the same folder, including data.csv. 

$(document).ready(function () {
    var options = {
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'column'
        },
        < ...more options here... >
    };


    $.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);
    });
});

The CSV file looks like:

Categories,Apples,Pears,Oranges,Bananas
John,8,4,6,5
Jane,3,4,2,3
Joe,86,76,79,77
Janet,3,16,13,15

Here is the example I am trying to get working:

http://www.highcharts.com/studies/data-from-csv.htm

EDIT: I just realized that the chart displays on Firefox. I have been using Chrome. Very weird. However, the example link above works on both.

Upvotes: 0

Views: 685

Answers (2)

imagineerThat
imagineerThat

Reputation: 5553

I was able to use this Chrome switch as a temporary fix to allow local file usage: --allow-file-access-from-files

Upvotes: 0

Paweł Fus
Paweł Fus

Reputation: 45079

In Chrome you are not allowed to use AJAX to get local files. If you want do such thing use XAMPP or WAMP to create local server. Firefox doens't have such limits.

Upvotes: 1

Related Questions