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>

JavaScript

var wrapper = window.parent.document.getElementById('wrapper'); 
var $header = $(wrapper).find('header');
$header.hide();


angular.module('myApp', ['nvd3'])
  .controller('myCtrl', function($scope) {
    $scope.options = {
            chart: {
                type: 'pieChart',
                height: 450,
                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
            }
        ];
  });