Harvey Ball in Angular Material With NVD3

In this example below you will see how to do a Harvey Ball in Angular Material 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>Harvey Ball in Angular Material 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">
  <div ng-controller="MainCtrl as vm" >
     <md-content layout-gt-sm="row" layout-padding>
             <md-input-container>
        <label>value</label>
        <input ng-model="vm.value">
      </md-input-container>
       </md-content>
    <md-content layout-padding layout="row" >

            <nvd3 options="vm.options" config="vm.config" data="vm.data"></nvd3>
 
    </md-content>
  </div>
</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/harvey-ball-in-angular-material-with-nvd3-zBywKQ */

/*
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/harvey-ball-in-angular-material-with-nvd3-zBywKQ */
var app = angular.module('app', ['nvd3'])
.controller('MainCtrl', function() {
  var vm = this;
  vm.value = 12;
  var max = 16;
  var slices = 4;
  //var percent = slicer(value/max, slices);
  vm.options = {
    chart: {
    type: 'pieChart',
    height: 100,
    y: vm.value,
    pie: {
      endAngle: function(d) { return vm.value/max * 2 * Math.PI}
    },
    showLegend: false
    }
  };
  vm.config = {
    deepWatchData: false // default: true
  };
  vm.data = [{
    key: "",
    y: 4
  }];

  var slicer = function(input, slices) {
    var data = [];
    var roundTo = 1 / slices;
    var defaults = {
      roundTo: 0.25,
      floatDecimals: 2
    }
    var roundTo = (1 / slices || defaults.roundTo);

    input = Math.round(input / roundTo) * roundTo;
    data = data.concat({
      y: input
    });
    return data;
  }
})
.directive('harveyBall', function() {
  
});

Comments