CODEWITHSUNDEEP
javascriptjqueryhighcharts
Sachi Tekina
Sachi Tekina

Reputation: 1810

Y-Axis Series is Duplicated in Highcharts

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: enter image description here

Here's the fiddle.

Upvotes: 1

Views: 618

Answers (1)

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

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/

Upvotes: 2

Related Questions