I'm trying to create a bar graph with Highcharts JS, but the bars won't draw on the graph?

Question

This is my coding it works for a small csv file having couple of rows and columns but not for the file with many rows and columns.

This is a part of the file for which I want to create graph:

Date    Time    Tcoll   Tstor   TglyHXin    TglyHXout   TH2OHXout   Tcold       Thot
01/01/2013  0:00:54 103.34  103.32  26.94   23.06   32.31   13.81   40.06   46.06
01/01/2013  0:01:55 103.29  103.3   26.94   23.06   32.31   13.81   40.06   46
01/01/2013  0:02:55 103.29  103.33  26.95   23.06   32.31   13.81   40.06   46
01/01/2013  0:03:55 103.29  103.03  26.94   23.06   32.31   13.81   40.06   46.05
01/01/2013  0:04:55 103.34  103.27  26.94   23.06   32.31   13.81   40.06   46.02
01/01/2013  0:05:55 103.39  103.33  26.94   23.06   32.31   13.81   40.04   45.99
01/01/2013  0:06:55 103.3   103.01  26.94   23.06   32.31   13.81   40.05   45.94
01/01/2013  0:07:55 103.42  103.17  26.94   23.06   32.31   13.81   40.06   45.89
01/01/2013  0:08:55 103.37  103.16  26.94   23.06   32.31   13.8    40.03   45.88
01/01/2013  0:09:55 103.34  103.28  26.94   23.06   32.31   13.8    40.01   45.88

Here is the coding:

var options = {
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'column'
    },
    title: {
        text: 'January Analysis'
    },
    xAxis: {
        categories: []
    },
    yAxis: {
        title: {
            text: 'Temperature'
        }
    },
    series: []
};

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

    // Iterate over the lines and add categories or series
    $.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);

        }

    });

    // Create the chart
    var chart = new Highcharts.Chart(options);
});
</script>

Hope this time I am specific with my question and will not get minus points and get closed..

Thanks

Answer 1

The problem is that you have inncorect parser to your CSV, You need to produce csv which items are separated by comma, or modify parser. Because ie in this line:

 $.each(lines, function(lineNo, line) {
    var items = line.split(',');

You try to extract all items from line, by comma, which doens't. You need to replace it by "white space":

var items = line.split(' ');

as you have in the CSV. Morever you try to push "Date Time Tcoll Tstor TglyHXin TglyHXout TH2OHXout Tcold Tho" these values to categories, but I assume that you would like ot have dates from first column. As a result it should be:

$.each(lines, function(lineNo, line) {
    var items = line.split(' ');

    // header line containes categories
    if (lineNo > 0) {
        var series = {
            data: []
        };

                options.xAxis.categories.push(item[0]);
                series.data.push(parseFloat(item[2]));

        options.series.push(series);

    }

});

In this series.data.push(parseFloat(item[2])) line you define which column should be y value. For instance, I choose third column.