0

I need to bind an array of data to "data" part of highcharts which is embedded in Angular directives but I don't know how exactly to do that.

This is my controller part which fetches data from repository:

vm.data = [];     
function getVmAll(forceRefresh) {

            return datacontext.esxservers.getAllWithoutPaging(forceRefresh, vm.vmAllSearchTemp)
                .then(function (data) {
                    vm.data= data;

                    });
                    return data;
                }
            );
        }

and here is the template which I use the controller in it:

    <section class="mainbar" data-ng-controller="mbVirtualizationOverviewCtrl as vm">
    <mb-virtualization-overview-donut-chart value="vm.data"></mb-virtualization-overview-donut-chart>

</section>

and the last but not least one is my directive which I use highcharts settings:

'use strict';

angular.module('app').directive('mbVirtualizationOverviewDonutChart', [

    function () {
        return {
            restrict: "E",
            templateUrl: '/app/directives/virtualizationOverview/mbVirtualizationOverviewDonutChartTemplate.html',
            scope: {
                value : "="
            },
            link: function (scope, el, attrs) {

                scope.chart = Highcharts.chart(el[0], {
                    chart: {
                        type: 'pie',
                    },

                    title: {
                        text: scope.innerTitle
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: false

                            },
                            showInLegend: true
                        }
                    },
                    series: [{

                        data: undefined
                    }]
                });
                var init = true;
                scope.$watch(
                     function () {
                         var chart = scope.chart;
                         if (init && scope.value.length > 0) {
                             init = false;
                             scope.value.forEach(function (item, index) {
                                 chart.series[0].data.push(item);                               
                             });                            
                         }
                     });
            }
        };
    }
]);
Amin Mohammadi
  • 183
  • 2
  • 17

0 Answers0