Adding a series dynamically with HighCharts Stock Charts

Question

I have the following code: http://jsfiddle.net/maniator/vTjW8/

var createChartTemplate = function() {
    return {
        chart: new Highcharts.StockChart({

            chart: {
                renderTo: 'container'
            },
            series: []
        }),
        addSeries: function(name) {
            this.chart.addSeries({
                name: name,
                data: [],
                id: Math.floor(Math.random()*1000)
            });
        },
        addPoint: function(data, series) {
            var seriesIndex = this.seriesExists(series);
            if (!(seriesIndex === false)) {
                this.chart.series[seriesIndex].addPoint(data, false);
            }
            this.chart.redraw();
        },
        seriesExists: function(series) {
            var seriesIndex = false;
            $.each(this.chart.series, function(index, item) {
                if ($.trim(item.name) == $.trim(series)) {
                    seriesIndex = index;
                    return false;
                }
            });
            return seriesIndex;
        }
    }
}
$(function() {
    var data = usdeur.splice(0, 700);
    var chart = createChartTemplate();
    chart.addSeries("New Series");
    for (var i = 0; i < data.length; i++) {
        chart.addPoint(data[i], "New Series");
    }

});

It has the following error in the console:

Uncaught TypeError: Cannot read property 'options' of undefined

This code works fine if it is a normal highchart, but for some reason it does not work with a HighStock chart.

How can I make it so that it works with the chart type that I need?

---

Update:

I figures out a sort of way around getting the 1st series dynamically, but then when I try to add a second series it has an error of:

Uncaught TypeError: Cannot read property 'stacks' of undefined

Fiddle: http://jsfiddle.net/maniator/V5WAJ/

Answer 1

You are creating the chart with an empty series, hence the error. When this line of you code runs it's initializing the Highchart immediately, before the series option has been set.

var chart = createChartTemplate();

I've had better experience with Highcharts when I build the series array first, then add it to the options of the constructor in the last step.

Specific to your example, the usdeur.js file already includes an initialized array of data. You simply need to pass it along in the options array. Your jsfiddle can be simplified to this.

$(function() {
    var chart = new Highcharts.StockChart({
        chart: {
            renderTo: 'container'
        },
        series: [{
            name: 'New Series',
            data: usdeur
        }]
    });
});

Answer 2

I found one workaround. My use case was to plot values over time, so first value that I was adding to the chart was a pair of valid time stamp with a null for data:

series : [{
    name : 'Random data',
    data : (function() {
        var data = [], time = (new Date()).getTime();
        data.push([time, null]);                
        return data;
    })()
}]

Then whenever new values had to be plotted just added them simply as:

var value = rawData['My Data Set']
var plot  = [new Date().getTime(), value]
mychart.series[0].addPoint(plot, true, false)

This can be tested here, just replace the original definition of the series with the one from here.

Answer 3

From the HighStock API Reference on addSeries:

In a StockChart with the navigator enabled, the base series can't be added dynamically.

That is to say, if you're using the Navigator, you have to start with at least one series. According to the same API Reference, the Navigator displays by default.