Angular-nvD3 Pie Chart Not Displaying

Question

I am trying to follow a simple example to make a pie chart but it does not render the chart. Even viewing the source, no chart code appears (only the original directive code). The controller is getting loaded as I do see the log file statement and the title property within the scope. I am not getting any errors to the console and a bit confused at the moment.

Thanks in advance

I am using the latest version of the libraries, added at the index.html file

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-nvd3-directives/0.0.7/angularjs-nvd3-directives.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.css"/>

Chart.html

<div >
    <div ng-controller="chartsController" >
        <div>
        {{title}}
        </div>
         <nvd3ChartDirectives options="options" data="data" id="chartId" config="config" class="with-3d-shadow with-transitions">
        </nvd3ChartDirectives>
    </div>
</div>

Index.js

var app = angular.module('seApp', ['ngRoute', 'ngResource', 'ngMessages', 'ngAnimate', 'ui.bootstrap', 'smart-table', 'nvd3ChartDirectives']);

(Injecting as nvd3 does not work).

Chart.js

app.controller('chartsController', ['$scope', '$log', function($scope, $log) {
    $scope.title = 'Chart Title';
    $log.info ("Create Chart");

    $scope.options = {
        chart: {
           type: 'pieChart',
           height: 500,
           width: 600,
           x: function(d){return d.key;},
           y: function(d){return d.y;},
           showLabels: true,
           transitionDuration: 500,
           labelThreshold: 0.01,
           legend: {
               margin: {
                   top: 5,
                   right: 35,
                   bottom: 5,
                   left: 0
               }
           }
        }
    }


    $scope.config = {
        visible: true, // default: true
        extended: false, // default: false
        disabled: false, // default: false
        autorefresh: true, // default: true
        refreshDataOnly: false, // default: false
        deepWatchOptions: true, // default: true
        deepWatchData: false, // default: false
        deepWatchConfig: true, // default: true
        debounce: 10 // default: 10
    };

   $scope.xFunction = function(){
       return function(d){
           return d.key;
       };
   };

   $scope.yFunction = function(){
       return function(d){
           return d.y;
       };
   };


    $scope.data = [
        {
            key: "435fdfg",
            y: 16
        },
        {
            key: "fgfsgsg",
            y: 12
        },
        {
            key: "lodfrr",
            y: 3
        },
        {
            key: "yuiiyui",
            y: 7
        },
        {
            key: "adffd",
            y: 4
        }
    ]

}]);

Radu Cojocari Radu Cojocari · Accepted Answer · 2015-12-31T11:56:12

I had a similar problem. After using ng-inspector I found out that the options where not passed in correctly due to a typo).

I did however tried to register the dependency with "nvd3ChartDirectives" but received an exception so I just used nvd3. Maybe this could be a possible problem.

I would recommend doing some debugging with ng-inspector or Batarang and check that the scope is set properly.

BTW, I'm using Angular 1.4.8.

Angular-nvD3 Pie Chart Not Displaying

1 Answers