angular nvd3 memory usage test

by takuan

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.js"></script>
<script src="http://cmaurer.github.io/angularjs-nvd3-directives/lib/angularjs-nvd3-directives/dist/angularjs-nvd3-directives.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.css">
<div ng-controller="MainCtrl" ng-app="app">
    <p> <a href="#/home">Home</a> | <a href="#/graph">Graph</a> |</p>
    <div ng-view></div>
    <script type=text/ng-template id=home.html>
        <p> Memory usage test </p>
    </script>
    <script type=text/ng-template id=graph.html>
        <p> 
            <nvd3-discrete-bar-chart
            data = "exampleData"
            id = "exampleId"
            width = "800"
            height = "400"
            tooltips = "true"
            showXAxis = "true"
            showYAxis = "true" >
                <svg> </svg>
            </nvd3-discrete-bar-chart>

            <nvd3-discrete-bar-chart
            data = "exampleData2"
            id = "exampleId2"
            width = "800"
            height = "400"
            tooltips = "true"
            showXAxis = "true"
            showYAxis = "true">
                <svg> </svg>
            </nvd3-discrete-bar-chart>
        </p>
    </script>
</div>

JavaScript

var myApp = angular.module('app', ['nvd3ChartDirectives'])
    .config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
    when('/home', {
        templateUrl: 'home.html',
        controller: HomeCtrl
    }).
    when('/graph', {
        templateUrl: 'graph.html',
        controller: GraphCtrl
    }).
    otherwise({
        redirectTo: '/home'
    });
}]);
myApp.run(function($rootScope) {
  //try to clear unused objects to avoid huge memory usage
  $rootScope.$on('$routeChangeStart', function(event, next, current) {
    if (typeof(current) !== 'undefined'){
       //console.log(nv.graphs);
      //destroy all d3 svg graph
      d3.selectAll('svg').remove();
      nv.charts = {};
      nv.graphs = [];
      nv.logs = {};
    }
  });
});
function MainCtrl($scope) {
}
function HomeCtrl($scope) {
}
function GraphCtrl($scope) {
    $scope.exampleData = [{
        key: "Cumulative Return",
        values: [
            ["A", -29.765957771107],
            ["B", 0],
            ["C", 32.807804682612],
            ["D", 196.45946739256],
            ["E", 0.19434030906893],
            ["F", -98.079782601442],
            ["G", -13.925743130903],
            ["H", -5.1387322875705]
        ]
    }];
    $scope.exampleData2 = [{
        key: "Cumulative Return2",
        values: [
            ["A", 10.765957771107],
            ["B", 0],
            ["C", -32.807804682612],
            ["D", 76.45946739256],
            ["E", 0.19434030906893],
            ["F", -38.079782601442],
            ["G", -43.925743130903],
            ["H", -3.1387322875705]
        ]
    }];
    
    $scope.$on('$destroy', function() {
        d3.select( '#exampleId' ).remove();
        d3.select( '#exampleId2' ).remove();
    });    
}