Y-Axis Series is Duplicated in Highcharts

Question

This is the snippet of my code:

$.get('https://dl.dropboxusercontent.com/u/75734877/data.csv', function (data) {
    var lines = data.split('\n');
    $.each(lines, function (lineNo, line) {
        var items = line.split(',');
        if (lineNo === 0) {
            $.each(items, function (itemNo, item) {
                if (itemNo > 1) { // "DateTime" word in first line
                    options.series.push({
                        name: "Rainfall Intensity",
                        data: [],
                        tooltip: {
                            valueSuffix: "  mm/hr."
                        },
                        color: "#0000ff"
                    }, {
                        name: "Accumulated Rainfall",
                        data: [],
                        tooltip: {
                            valueSuffix: " mm"
                        },
                        yAxis: 1,
                        color: "#ff0000"
                    });
                }
            });
        } else {
            $.each(items, function (itemNo, item) {
                if (itemNo === 0) {
                    options.xAxis.categories.push(item);
                } else if (itemNo === 2) {
                    options.series[2].data.push(parseFloat(item));
                } else if (itemNo === 3) {
                    options.series[3].data.push(parseFloat(item));
                }
            });
        }
    });
    var chart = new Highcharts.Chart(options);
});

Although the graph is plotted correctly, categories are duplicated. This is based on this example but it has only one series in Y-axis so, I modified it but got this problem.

Here's the image:

Here's the fiddle .

Answer 1

The problem is causes by incorrect parsing of CSV, because you push series multiple time. Better is initialise series before loops, then refer to particular serie. Last step is add points.

$.get('https://dl.dropboxusercontent.com/u/75734877/AGUSAN_DEL_NORTE-CABADBARAN-RAIN2-.csv', function (data) {
                var lines = data.split('\n');

                options.series.push({
                    name: "Rainfall Intensity",
                    data: [],
                    tooltip: {
                        valueSuffix: "  mm/hr."
                    },
                    color: "#0000ff"
                }, {
                    name: "Accumulated Rainfall",
                    data: [],
                    tooltip: {
                        valueSuffix: " mm"
                    },
                    yAxis: 1,
                    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 === 2) {
                                options.series[0].data.push(parseFloat(item));
                            } else if (itemNo === 3) {
                                options.series[1].data.push(parseFloat(item));
                            }
                        });
                    }
                });

                var chart = new Highcharts.Chart(options);
            });

Example: http://jsfiddle.net/tZayD/78/