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
        }]
    });
});