Cannot update Highcharts series in click event with highcharts-ng

Question

I am using angular.js and highcharts-ng (https://github.com/pablojim/highcharts-ng) to display a group of charts. I need to update a chart based on a click event of another chart. I can do everything I want to in the controller but when I have code in the click event (even though $scope is available) I cannot seem to get the chart to redraw after I set the series data. This works fine in a method in the controller.

I have tried using $apply, and also looking up the chart object in the Highcharts.charts array to call redraw on the chart and it did not work. I noticed that the charts instantiated with highcharts-ng do not seem to have the same functions on them as ones instantiated in the JQuery style (such as Series.setData).

From this fiddle (http://jsfiddle.net/gregorydickson/mJjk2/):

var myapp = angular.module('myapp', ["highcharts-ng"]);
myapp.controller('myctrl', function ($scope) {

    $scope.addSeries = function () {
        $scope.highchartsNG.series = [{
            data: [55, 33, 41, 23, 37]
        }]  
    }
    $scope.highchartsNG = {
        options: {
            chart: {
                type: 'line'
            }
        },
        series: [{data: [10, 15, 12, 8, 7]}],
        title: {
            text: 'Hello'
        },
        loading: false
    }

    $scope.highchartsNG2 = {
        options: {
            chart: {
                type: 'line'
            }
        },
        series: [{
            data: [1, 2, 3, 8, 7],
             events: {
                        click: function (e) {
                            alert("hit the click");
                            //this does not work!!
                            $scope.highchartsNG.series = [{
                                data: [11, 22, 33, 44, 33,22,11]}];
                        }
                    }
        }],
        title: {
            text: 'Hello 2'
        },
        loading: false
    }

});

HTML:

<div ng-app="myapp">
    <div ng-controller="myctrl">

        <button ng-click="addSeries()">Change Data</button>

        <highchart id="chart1" config="highchartsNG"></highchart>
        <highchart id="chart2" config="highchartsNG2"></highchart>
    </div>
</div>

I think I might have found a solution, it works to directly access the chart in the Highcharts.charts array and call addSeries (then remove other series). Highcharts.charts[0].addSeries({ data: [11, 22, 33, 44, 33,22,11]},true); — Gregory D. Dickson
Ok, here is the solution I am going with unless I find a highcharts-ng approach: jsfiddle.net/gregorydickson/GCwRj — Gregory D. Dickson
Running into the same problem here using ng-highcharts 0.0.7. Wondering if you have got a better solution now? manipulating Highcharts.charts[0].series seems dirty as hell... — saladinxu
I can give you access to my github repo for this project if you want to see the code, it is for a client so it is a private repo but you are welcome to see how it works. — Gregory D. Dickson
That'll be great. Am thinking it's probably more beneficial for the public if you could share how you tackled it(without hacking) here but of course it's totally up to you. — saladinxu

Paweł Fus Paweł Fus · Accepted Answer · 2014-07-23T10:44:05

Not a perfect, but you can use that solution: http://jsfiddle.net/mJjk2/14/

    series: [{
        data: [1, 2, 3, 8, 7],
        events: {
            click: function (e) {
                angular.element('#myselector').trigger('click');
            }
        }
    }],

But if you don't have such button to trigger, it won't work. From dev-tools I can say that $watch() won't be called from that callback (no idea why, good question for author of that plugin). Note: I'm not angular expert ;)

Cannot update Highcharts series in click event with highcharts-ng

2 Answers