Highcharts second series name labeled to ‘Series 2’?

Just started a week ago to learn and use Highcharts. In my application a user selects a key value from a list box and, out of that key an array of values will be retrieved and, used the data to create a multiple series of line graph. In the screenshot below the first series (in light blue color) has the name of CDEP158 and, on the second series (in black color), the series name shouldn’t be ‘Series 2’, it should be CDT158. ‘Series 2’ for the second series is the issue here.

This is the chart data preparation code which accepts dataChart (result) from jquery post callback function called in a click event.

    function prepareChartData(dataChart)
{
    var dataSeries = [];
    var xTitle;

    for (var i = 0; i < dataChart.length; i++) {
        var items = dataChart[i];
        var xDate = +moment(items.Time);
        var seriesData = parseFloat(items.Value);

        dataSeries.push([xDate, seriesData]);
        xTitle = items.Name;
    }

    if (aeChart === undefined || aeChart === null)
    {
        plotChartData(dataSeries, xTitle);
        return;
    }

    aeChart.addSeries({
        title: xTitle,
        data: dataSeries
    });
};

Function that creates a new instance of Highchart and its configuration:

    function plotChartData(dataseries, xtitle)
{
    aeChart = new Highcharts.Chart({
        chart: {
            renderTo: 'svgtrendspace',
            type: 'line',
            zoomType: 'xy',
            panning: true,
            panKey: 'shift',
            plotBorderWidth: 1
        },
        title: {
            text: ''
        },
        legend: {
            layout: 'horizontal',
            align: 'left',
            itemDistance: 10,
            borderWidth: 0,
            itemMarginTop: 0,
            itemMarginBottom: 0,
            padding: 20
        },
        plotOptions: {
            series: {
                states: {
                    hover: {
                        enabled: false
                    }
                },
                dataLabels: {
                    enabled: false,
                    format: '{y}'
                },
                allowPointSelect: false
            }
        },
        xAxis: {
            type: 'datetime',
            labels: {
                rotation: -65,
                style: {
                    fontSize: '9px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            gridLineColor: '#DDDDDD',
            gridLineWidth: 0.5
        },
        series: [{
            name: xtitle,
            data: dataseries,
            tooltip: {
                pointFormat: '{series.name}: <b>{point.y}</b><br/>',
                valueDecimals: 2
            }
        }]
    });
};

Why is that the first series gets the correct name but on the second one it did not? Is my highcharts configuration wrong? How should I properly configure or format it to address the issue?

I have googled it for similar issues related with multiple series but I couldn’t find any similar questions or answers that would help me.

Answer

The fact that it works for the first series implies that the issue isn’t with your code, but rather is with your init.

Can you put a console.log('Title: ' + xTitle); statement right before you call aeChart.addSeries() in the above function to check on what you are passing in? My suspicion is that the second series is not being passed a title, and that HighCharts is therefore putting in Series2 on its own.

Maybe you should not be setting the value of xTitle in every single iteration of the initial for loop?

Advertisement

Answer