Highcharts: Sort x-axis value from multiple CSV files

Question

I successfully generated a chart from 3 CSV files, the problem is their x-axis value is not sorted.

Here's the demo.

I have tried storing all the data into an array variable then sort it, but I can't seem to figure it out.

Piece of code(Please view the demo):

$.get('https://dl.dropboxusercontent.com/u/32420108/WL_FORECAST.CSV', function (data) {
    $.get('https://dl.dropboxusercontent.com/u/32420108/WL_ACTUAL.CSV', function (data1) {
        $.get('https://dl.dropboxusercontent.com/u/32420108/RAINFALL_ACTUAL.CSV', function (data2) {
            var lines = data.split('\n');
            options.series.push({
                name: "Forecasted Water Level",
                data: [],
                tooltip: {
                    valueSuffix: "  mm/hr."
                },
                color: "#FF0000"
            });
            $.each(lines, function (lineNo, line) {
                var items = line.split(',');
                if (lineNo > 0) {
                    $.each(items, function (itemNo, item) {
                        if (itemNo === 0) {
                            options.xAxis.categories.push(item);
                        } else if (itemNo === 1) {
                            options.series[0].data.push(parseFloat(item));
                        }
                    });
                }
            });

... I have managed to convert my string date to epoch time for Highcharts datetime type x-axis but I got this error: Uncaught TypeError: Cannot read property '3' of null.

 $.each(lines, function (lineNo, line) {
        var items = line.split(',');
        if (lineNo > 0) {
            var parts = items[0].match(/(\d{2})\/(\d{2})\/(\d{4}) (\d{2}):(\d{2})/);
            d.push([Date.UTC(+parts[3], parts[1] - 1, +parts[2], +parts[4], +parts[5]), parseFloat(items[1])]);

        }
    });

your data (time) is not in timestamp, Highcharts expects sorted data. While creating csv you can fill that with sorted values. So instead manipulating on UI you should sort it before creating the CSV — Nishith Kant Chaturvedi, Oct 07 '15 at 09:36
Ok, is it possible to sort the data? Coz I can't change the CSV file. It is generated. — Sachi Tekina, Oct 07 '15 at 09:47
You can load csv, push into data arrays and sort by prepering sort function. http://stackoverflow.com/questions/979256/sorting-an-array-of-javascript-objects — Sebastian Bochan, Oct 07 '15 at 13:14
Yah, but when I try to get all the values and store it in an array, Highcharts seems to stop working and no errors thrown. — Sachi Tekina, Oct 08 '15 at 12:45
How you sort that and how your output (series object) looks like ? — Sebastian Bochan, Oct 09 '15 at 09:10
I guess the problem is the format of my "date" (10/08/2015 17:20) which causes Highchart to sort the x-values incorrectly. — Sachi Tekina, Oct 09 '15 at 09:16
So you need to convert this dates in your back-end or in javascript (by split string and use Date.UTC) — Sebastian Bochan, Oct 09 '15 at 13:21
I can't change my CSV file. So, I'll try to use JavaScript. Any example? — Sachi Tekina, Oct 10 '15 at 12:46
I prepared you a versy simple demo which parse single point: http://jsfiddle.net/b88pLeeo/2/ So only what you need is adapt to your CSV and use a loops to push all points, instead of one. — Sebastian Bochan, Oct 13 '15 at 12:09

score 2 · Answer 1 · answered Oct 14 '15 at 06:35

I managed to solve this and all I did is convert the date and time(string) to epoch, something like this:

$.each(lines2, function (lineNo, line) {
    var items = line.split(',');
    if (lineNo > 0 && lineNo < lines2Len) {
        var parts = items[0].match(/(\d{2})\/(\d{2})\/(\d{4}) (\d{2}):(\d{2})/);
        f.push([Date.UTC(+parts[3], parts[1] - 1, +parts[2], +parts[4], +parts[5]), parseFloat(items[1])]);
    }
});

Highcharts will do the sorting. Thanks to @Sebastian Bochan for the idea. You can view the final output here: DEMO

Highcharts: Sort x-axis value from multiple CSV files

1 Answers1