Render a d3 pie chart in angular with angular-nvd3

Question

I want to render an d3 pie chart in angular with angular-nvd3. I have no errors and all of the associated scripts are loading.

I'm not sure how to call the function inside of the directive-- The supplied directive is:

<nvd3 options='options' data='data'></nvd3>

which I changed to:

<nvd3 options='vm.options' data='vm.data'></nvd3>

HTML:

  <div ng-controller='MainController'>
    <nvd3 options='vm.options' data='vm.data'></nvd3>
  </div>

main.controller:

(function (angular) {
    'use strict';
    angular
        .module('blah').controller('MainController', MainController);

    function MainController () {
        var vm = this;

        vm.initSampleData = initSampleData; // set up the var

        function initSampleData() {
            vm.options = {
                'chart': {
                    'type': 'pieChart',
                    'height': 500,
                    'showLabels': true,
                    'duration': 500,
                    'labelThreshold': 0.01,
                    'labelSunbeamLayout': true,
                    'legend': {
                        'margin': {
                            'top': 5,
                            'right': 35,
                            'bottom': 5,
                            'left': 0
                        }
                    }
                }
            };

            vm.data = [
                {key: 'One', y: 5},
                {key: 'Two', y: 2},
                {key: 'Three', y: 9},
                {key: 'Four', y: 7},
                {key: 'Five', y: 4},
                {key: 'Six', y: 3},
                {key: 'Seven', y: .5}
            ];
        }
    }

})(window.angular);

Route (not using directive, getting ready for angular 2.0) if i add MainRoute.$inject = ['$routeProvider', 'nvd3']; it errors...

function MainRoute($routeProvider){
        $routeProvider.when('/', {
            controller: 'MainController as vm',
            templateUrl : 'main.html',
            bindToController: false
        });
    }

Mikki Kobvel Mikki Kobvel · Accepted Answer · 2016-08-25T17:42:38

I think you need to make an alias to your controller, and it will solve your problem.

<div ng-controller='MainController as vm'>

You assigned data to controllers object, but in view, before you will give your controller alias it could be called by its own name, so before you add alias it was MainController.data, after you add it like I mentioned before it will be - vm.data.

Hope it will help you

EDITED

Here is Plunker with working code. Your problems was:

You did not init angular module with ng-app="yourModule"
You inserted routing but did not use <ui-view> to make them know where it should be used

Render a d3 pie chart in angular with angular-nvd3

1 Answers