CODEWITHSUNDEEP
angularjshighcharts2-way-object-databinding
LS2
LS2

Reputation: 152

Two way data binding in Angular JS for graphs implemented using HighCharts

I'm trying to write a directive for HighCharts in AngularJS which supports two way data binding. On click of a function in the HTML, am trying to load the graph with new data.

Please check the below snipet.

HTML:

<hc-area-chart data="areaData"></hc-area-chart>
<button ng-click="updateGraph()">Update function</button>

Controller:

 angular.module('myModule', [])
        .directive('hcAreaChart', function () {
            return {
                restrict: 'E',
                template: '<div></div>',
                scope: {
                    title: '@',
                    data: '='
                },
                link: function (scope, element) {
                    Highcharts.chart(element[0], {
                        chart: {
                            type: 'area'
                        },
                        title: {
                            text: null
                        },
                        xAxis: {
                            categories: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun']
                        },

                        plotOptions: {
                            pointStart: 4,
                        },
                        series: [{
                            showInLegend: false,
                            data: scope.data

                        }]
                    });
                }
            };
        })
        .controller('myController', function ($scope) {
            $scope.areaData = [0,6,5,7,5,4.5,10];

            $scope.updateGraphData = function () {
                console.log("inside update function");
                $scope.areaData = [10,20,30,40,50,60,70];
            }
        });

Upvotes: 1

Views: 586

Answers (1)

Leguest
Leguest

Reputation: 2137

I think you should try something like this

      link: function (scope, element) {

            scope.$watch('data', function(){

                Highcharts.chart(element[0], {
                    chart: {
                        type: 'area'
                    },
                    title: {
                        text: null
                    },
                    xAxis: {
                        categories: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun']
                    },

                    plotOptions: {
                        pointStart: 4,
                    },
                    series: [{
                        showInLegend: false,
                        data: scope.data

                    }]
                });

              })
            }

Upvotes: 1

Related Questions