Error With NVD3

In this example below you will see how to do a Error With NVD3 with some HTML / CSS and Javascript

Demo of using NVD3 to generate Harvey Balls. The getData method takes to parameters, value (less than 1) and slices. When rendering the chart we round the value to the nearest "slice" so 0.2 with 2 slices would render as 25%. Next step is to refactor this to a directive component.

Thumbnail
This awesome code was written by timbrown81, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright timbrown81 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Error With NVD3</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">

  
  <link rel='stylesheet prefetch' href='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css'>
<link rel='stylesheet prefetch' href='https://material.angularjs.org/1.1.0-rc.5/docs.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div ng-app="app">
<harvey-ball value="1" max="1" slices="4"></harvey-ball>
</div>
  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.8/angular-nvd3.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-aria.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.6/angular-sanitize.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc.5/angular-material.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/timbrown81/error-with-nvd3-dXwVZO */

/*
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at https://material.angularjs.org/license.
*/

/*Downloaded from https://www.codeseek.co/timbrown81/error-with-nvd3-dXwVZO */
angular
    .module('app', ['nvd3'])
    .component('harveyBall', new HarveyBall());
var HarveyBallComponent = /** @class */ (function () {
    /* @ngInject */
    function HarveyBallComponent() {
        this.options = {
            chart: {
                type: 'pieChart',
                height: 100,
                y: this.value,
                pie: {
                    endAngle: function (d) { return this.value / this.max * 2 * Math.PI; },
                    y: this.value
                },
                showLegend: false
            }
        };
        this.config = {
            deepWatchData: false // default: true
        };
        this.data = [{
                key: "",
                y: 4
            }];
    }
    return HarveyBallComponent;
}());
var HarveyBall = /** @class */ (function () {
    function HarveyBall(controllerAs, controller, bindings, template) {
        this.controllerAs = controllerAs;
        this.controller = controller;
        this.bindings = bindings;
        this.template = template;
        this.controllerAs = 'ctrl';
        this.controller = HarveyBallComponent,
            this.bindings = {
                value: '=',
                max: '=',
                slices: '='
            };
        this.template = "<nvd3 options=\"ctrl.options\" config=\"ctrl.config\" data=\"ctrl.data\"></nvd3>";
    }
    return HarveyBall;
}());

Comments