Refresh Highcharts with data from AJAX using Handlebars

Question

I have a Highchart graph which receives data from backend in the form of Handlebars expressions. Something like this.

$('#container').highcharts({
    xAxis: {
        categories: [{{{histKeys}}}]
    },
    yAxis: {
        title: {
            text: 'Failure Percentage',
            style: {
                color: '#cc0000'
            }
        },
        labels: {
            format: '{value}%',
            style: {
                color: '#cc0000'
            }
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    credits: {
      enabled: false
    },
    plotOptions: {
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function() {
                        var index = this.series.name;
                        var tfs = epochKeys[Math.ceil(this.x)];
                        window.location.href = url;
                        return false; 
                        }
                    }
                }
            }

    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    },
    series: [
    {{#each histData as |index|}}
    {
        name: '{{@key}}',
        type: 'spline',
        allowPointSelect: true,
        {{#each index as |status|}}
        {{#if_eq @key "histSuccess"}}
        {{/if_eq}}
        {{#if_eq @key "histFailure"}} 
        data: [{{this}}],
        {{/if_eq}}
        {{/each}}
    },
    {{/each}}
    ]
});

Now i make an AJAX call to get data to refresh the graph. How do i pass the new value of Handlebars expressions to the variables used in the Highcharts code. So the data i receive in the AJAX call contains the values of all these expressions that have been used in the Highcharts function.

Since the code is dynamic, i can't manually update the series values also because the number of lines on the graph differ depending upon the data coming from the backend.

Thanks for any input.

Answer 1

You can get the (already existing) highcharts object in the ajax callback like this:

$('#container').highcharts()

There's in fact a quite good API to interact with this object, documented here: http://api.highcharts.com/highcharts

For starters, you can replace an existing chart by calling addSeries() again. For that to work, your series must have an id, and you add a series with the same id again:

$('#container').highcharts().addSeries({ id: 'myid', data: .... });

In the same way, you can also remove existing series:

$('#container').highcharts().removeSeries('myid');

It's also possible only to replace the data of a series, something along the lines of this:

$('#container').highcharts().getSeries('myid').setData(...);

I hope that is a little help for you.