Real-time chart with Angular-nvD3

by sberube

HTML

<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="//code.angularjs.org/1.5.0/angular.js"></script>
<script src="//code.angularjs.org/1.5.0/angular-route.js"></script>
<script src="//code.angularjs.org/1.5.0/angular-cookies.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.2/nv.d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.5/angular-nvd3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.2/nv.d3.min.css" />

<div ng-app="myApp" ng-controller="myCtrl">
  <nvd3 options="options" data="data"></nvd3>
</div>

CSS

html,
body {
  background-color: white;
  width: 100%;
  height: 100%;
}

div,
nvd3 {
  width: 100%;
  height: 100%;
}

JavaScript

var wrapper = window.parent.document.getElementById('wrapper');
var $wrapper = $(wrapper);
var $header = $wrapper.find('header');
$header.hide();
$wrapper.find('#tabs').css('margin-top','0px');



angular.module('myApp', ['nvd3'])
  .controller('myCtrl', function($scope) {
    $scope.options = {
      chart: {
        type: 'pieChart',
        donut: true,
        x: function(d) {
          return d.key;
        },
        y: function(d) {
          return d.y;
        },
        showLabels: true,
        title: 'Request Summary',
        pie: {
          startAngle: function(d) {
            return d.startAngle / 2 - Math.PI / 2
          },
          endAngle: function(d) {
            return d.endAngle / 2 - Math.PI / 2
          }
        },
        duration: 500,
        legend: {
          margin: {
            top: 5,
            right: 70,
            bottom: 5,
            left: 0
          }
        }
      }
    };

    $scope.data = [{
      key: "Submitted",
      y: 5
    }, {
      key: "Pending Approval",
      y: 2
    }, {
      key: "Approved",
      y: 9
    }, {
      key: "In-transaction",
      y: 4
    }, {
      key: "Completed",
      y: 23
    }];
  });