donut chart directive

degree_report.html

<div layout="row" id="degree-report">
  <div flex="75" class="main-report md-whiteframe-z1">
    <h4>Graduation Plan Audit Report</h4>

    <span class="degree-title">Business Management - General Business Emphasis, B.S.</span>
    <span class="degree-credits">120.0 Cr</span>

    <div class="semester-table">
      <div class="semester-header" layout="row">
        <span flex class="pass-fail">PASS</span>
        <span flex class="semester-number">Semester 1</span>
        <span flex>(Fall 2014)</span>
        <span class="semester-credits">16.0 Cr</span>
      </div>
      <div class="donuts">
        <ck-donut name
="testing" width="150" height="150"></ck-donut>
      </div>
    </div>
  </div>
</div>

donut.directive.js

(function() {
  var module = angular.module('ck.donut');

  module.directive('ckDonut', function() {
    return {
      restrict: 'E',
      scope: {
        name: '=',
        width: '=',
        height: '='
      },
      template: [
        '<canvas id="{{name}}" width="{{width}}" height="{{height}}"></canvas>'
      ].join(),
      link: ckDonutDirective
    };



    function ckDonutDirective(vm, elem, attrs) {
      var ctx = document.getElementById(vm.name).getContext("2d");
      var donut = new Chart(ctx).Doughnut(data, {});

      var data = [{
        value: 300,
        color: "#F7464A",
        highlight: "#FF5A5E",
        label: "Red"
      }, {
        value: 50,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Green"
      }, {
        value: 100,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "Yellow"
      }];
    }
  });
})();