First, this is a jsfiddle of my example: /

I have 2 charts. One with columns and one with lines. What I want is when I click on a column of the first chart, a serie can be add on the second one.

On my example, when I click on a column, the serie is added on the configuration of the second chart but the chart is not redraw. We can see that because when I click on the button add series, all series appears and the graph is redrawn.

My question is why he is not when I fire the event from the column chart and how do that?

Thank you

//See: 
var myapp = angular.module('myapp', ["highcharts-ng"]);

myapp.controller('myctrl', function ($scope) {


    $scope.addSeries = function () {
        var rnd = []
        for (var i = 0; i < 10; i++) {
            rnd.push(Math.floor(Math.random() * 20) + 1)
        }
        $scope.highchartsNG.series.push({
            data: rnd
        })
    }



    $scope.highchartsNG = {
        options: {
            chart: {
                type: 'line',
                events: {
                    redraw: function() {
                        alert ('The chart is being redrawn');
                    }

                }
            }
        },
        series: [{
            data: [10, 15, 12, 8, 7]
        }],
        title: {
            text: 'Hello'
        },
        loading: false
    }

    $scope.bubbleConfig = {
        options: {
            chart: {
                type: 'column'

            },
            plotOptions: {
                bubble: {
                    dataLabels: {
                        enabled: true,
                        color: 'black',
                        style: { textShadow: 'none' },
                        formatter: function() {
                                return this.point.name;
                        }
                    }
                },
                series: {
                    cursor: 'pointer',
                    events: {
                        click: function(event) {
                            $scope.addSeries();
                        }
                    }
                }
            },
            legend: {
                enabled: false
            },
            tooltip: {
            formatter: function() {
                return this.point.name;
            }
        },

        },


        series: [
            { 
                data: 

                [
                    {"name":"test","x":0.6,"y":1.9},                
                    {"name":"test2","x":0.8,"y":1.5}
                ]

            }

        ]  

    }

});

First, this is a jsfiddle of my example: http://jsfiddle/Kn4PW/4/

I have 2 charts. One with columns and one with lines. What I want is when I click on a column of the first chart, a serie can be add on the second one.

On my example, when I click on a column, the serie is added on the configuration of the second chart but the chart is not redraw. We can see that because when I click on the button add series, all series appears and the graph is redrawn.

My question is why he is not when I fire the event from the column chart and how do that?

Thank you

//See: https://github./pablojim/highcharts-ng
var myapp = angular.module('myapp', ["highcharts-ng"]);

myapp.controller('myctrl', function ($scope) {


    $scope.addSeries = function () {
        var rnd = []
        for (var i = 0; i < 10; i++) {
            rnd.push(Math.floor(Math.random() * 20) + 1)
        }
        $scope.highchartsNG.series.push({
            data: rnd
        })
    }



    $scope.highchartsNG = {
        options: {
            chart: {
                type: 'line',
                events: {
                    redraw: function() {
                        alert ('The chart is being redrawn');
                    }

                }
            }
        },
        series: [{
            data: [10, 15, 12, 8, 7]
        }],
        title: {
            text: 'Hello'
        },
        loading: false
    }

    $scope.bubbleConfig = {
        options: {
            chart: {
                type: 'column'

            },
            plotOptions: {
                bubble: {
                    dataLabels: {
                        enabled: true,
                        color: 'black',
                        style: { textShadow: 'none' },
                        formatter: function() {
                                return this.point.name;
                        }
                    }
                },
                series: {
                    cursor: 'pointer',
                    events: {
                        click: function(event) {
                            $scope.addSeries();
                        }
                    }
                }
            },
            legend: {
                enabled: false
            },
            tooltip: {
            formatter: function() {
                return this.point.name;
            }
        },

        },


        series: [
            { 
                data: 

                [
                    {"name":"test","x":0.6,"y":1.9},                
                    {"name":"test2","x":0.8,"y":1.5}
                ]

            }

        ]  

    }

});

• javascript
• angularjs
• charts
• highcharts
• redraw

1 Answer 1

You need to call $scope.$apply() to ensure that the changes to the scope are applied.

This is not normally required, but it seems as though somewhere in the process the code within HighCharts or HighCharts-ng is using a timeout.

See this fiddle...

http://jsfiddle/Kn4PW/7/

click: function(event) {
    $scope.addSeries();
    $scope.$apply();
}

More info on timeout, $timeout and $apply can be found here https://coderwall./p/udpmtq