Question

I am trying to create a highchart line graph using data from a .csv file. But my webpage is just showing the titles of x and y axis, but no data. The code is as follows:

$(document).ready(function() {
    var c = [];
    var d = [];

$.get('data.csv', function(data) {                  
    alert("data in the file: " + data);
    var lines = data.split('\n');   
    $.each(lines, function(lineNo, line) {
        var items = line.split(',');
        c.push(items[0]);       
        d.push(parseInt(items[1])); 
    });
});

var options = {
        chart: {
            renderTo: 'chart',
            defaultSeriesType: 'line'
        },
        title: {
            text: 'Weight Monitor'
        },
        xAxis: {
            title: {
                text: 'Date Measured'
            },
            categories: c
        },
        yAxis: {
            title: {
                text: 'Weight (in Lbs)'
            }
        },
        series: [{
            data: d
        }]
};
var chart = new Highcharts.Chart(options);
    });

i tried to print the data read from file on screen just to check if the file was read properly and i got the proper data, but still my graph is not showing anything.

following is the data in my csv file:

    2011-08-01 00:00:00,155
    2011-08-02 00:00:00,156
    2011-08-03 00:00:00,157
    2011-08-03 00:00:00,160

where left value is date to be shown in x axis and right value is reading points for graph.

any help will be thankful.

Answer 1

Your code works perfect.

<script type="text/javascript">

    $(document).ready(function() {

        var c = [];
        var d = [];

        $.get('data.csv', function(data) {
            var lines = data.split('\n');
            $.each(lines, function(lineNo, line) {
                var items = line.split(',');
                c.push(items[0]);
                d.push(parseInt(items[1]));
            });
        });

        var options = {
                chart: {
                    renderTo: 'chart',
                    defaultSeriesType: 'line'
                },
                title: {
                    text: 'reading'
                },
                xAxis: {
                    title: {
                        text: 'Date Measurement'
                    },
                    categories: c
                },
                yAxis: {
                    title: {
                        text: 'reading'
                    }
                },
                series: [{
                    data: d
                }]
        };

        var chart = new Highcharts.Chart(options);

    });


</script>   

Copy this whole code and save it as .html file in a directory and create the data.csv file in the same directory and make sure that there no empty lines, no spaces where they are not needed and no line-break at the end.

And then open the .html file, the chart should show up with the right data.