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

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.

Answer 3

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 4

I have found that you can use the following code in the dynamically called function to get round the highstock option.series[0] = null problem

options.series= [{data:[]}];

// you can now add the dynamic data, eg

options.series[0].data.push([time, val]);

Answer 5

I achieved adding time series dynamically as follows:

the HTML part, nothing fancy is here:

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>

and javascript part:

  $(function () {

  var chart = Highcharts.chart('container', {
    chart: {
      type: 'line'
    },
    title: {
      text: ''
    },
    subtitle: {
      text: ''
    },
    yAxis: {
      title: {
        text: 'Values'
      }
    },
    plotOptions: {
      line: {
        dataLabels: {
          enabled: true
        },
        enableMouseTracking: true
      }
    },
    series: [{
      name: 'A',
      color: "#ea825f",
      data: []
      // 
    },{
      name: 'B',
      color: "#2a82ff",
      data: []
      // data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }]
  });

  var data1 = [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6];
  var data2 = [4.0, 11.9, 6.5, 12.5, 11.4, 15.5, 29.2, 24.5, 21.3, 15.3, 14.9, 8.6]

  function add_timeseries(data, chart, series_index) {
    $.map(data, function(i){
        chart.series[series_index].addPoint(i, true, false)
    })
  }
  add_timeseries(data1, chart, 0)
  add_timeseries(data2, chart, 1)
});

add_timeseries() function does the actual job, it fills the time series slot with given data

https://jsfiddle.net/muatik2/vxym5xx5/6/

Answer 6

You can create the template first and add the series later. But once you have added at least one series, you cannot remove the highcharts-navigator-series (auto-generated) from a HighStock chart. If you want to remove all the series, you can use below code:

while (chart.series.length > 0) {
    if (chart.series[0].options.id == 'highcharts-navigator-series') {
        break;
    }
    chart.series[0].remove(true);
}

This will remove all the series except the navigator series. You can then safely add new series to your chart.