Post
Ask Question

How to make Pie Chart using D3 with AngularJS

D3 - D3 is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

You can download zip file from here

https://d3js.org/

AngularJS – AngularJS is a client side JavaScript framework for building rich web applications. In other words, AngularJS is a JavaScript framework which simplifies binding JavaScript object with HTML UI elements.

Getting Started -

First of all, download D3 zip file from d3js.org and add few files in your application.


Now let’s add a new module by right click on solution and give appropriate name.


  1. (function () {  
  2.   
  3. 'use strict';  
  4.   
  5. angular.module('app', [  
  6.   
  7. // Angular modules  
  8.   
  9. 'ngRoute'  
  10.   
  11. // Custom modules  
  12.   
  13. // 3rd Party Modules  
  14.   
  15.   
  16. ]);  
  17.   
  18. })();  

 

Now add a new controller by right click of solution and click Add and give appropriate name.


Write the following code:

  1. (function () {  
  2.   
  3. 'use strict';  
  4.   
  5. angular  
  6.   
  7. .module('app')  
  8.   
  9. .controller('piechartcontroller', piechartcontroller);  
  10.   
  11. piechartcontroller.$inject = ['$location', '$scope'];  
  12.   
  13.   
  14.    
  15. function piechartcontroller($location, $scope) {  
  16. $scope.message = "Pie Chart with D3 Js in AngularJS";  
  17.   
  18. $scope.exampleData = [{  
  19.   
  20. key: "One",  
  21.   
  22. y: 5  
  23.   
  24. }, {  
  25.   
  26. key: "Two",  
  27.   
  28. y: 2  
  29.   
  30. }, {  
  31.   
  32. key: "Three",  
  33.   
  34. y: 9  
  35.   
  36. }, {  
  37.   
  38. key: "Four",  
  39.   
  40. y: 7  
  41.   
  42. }, {  
  43.   
  44. key: "Five",  
  45.   
  46. y: 4  
  47.   
  48. }, {  
  49.   
  50. key: "Six",  
  51.   
  52. y: 3  
  53.   
  54. }, {  
  55.   
  56. key: "Seven",  
  57.   
  58. y: 9  
  59.   
  60. }];  
  61.   
  62. $scope.width = 300;  
  63.   
  64. $scope.height = 300;  
  65.   
  66. $scope.xFunction = function () {  
  67.   
  68. return function (d) {  
  69.   
  70. return d.key;  
  71.   
  72. };  
  73.   
  74. }  
  75.   
  76. $scope.yFunction = function () {  
  77.   
  78. return function (d) {  
  79.   
  80. return d.y;  
  81.   
  82. };  
  83.   
  84. }  
  85.   
  86. $scope.descriptionFunction = function () {  
  87.   
  88. return function (d) {  
  89.   
  90. return d.key;  
  91.   
  92. }  
  93.   
  94. }  
  95.   
  96. }  
  97.   
  98. })();  
Now let’s add a HTML page and add all given java scripts, directives, module and controller.

 


Image 4.

Note – You need to update your module name in angularjs-nvd3-directives.js like this

angularjs-nvd3-directives

HTML:

  1. <!DOCTYPE html>  
  2.   
  3. <html>  
  4.   
  5. <head>  
  6.   
  7. <title>AngularJS - Pie Chart- D3Js - Sample</title>  
  8.   
  9. <meta http-equiv="content-type" content="text/html; charset=UTF8">  
  10.   
  11. <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  12.   
  13. <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  14.   
  15.   
  16. <script src="Scripts/angular.min.js"></script>  
  17.   
  18. <script src="Scripts/d3.min.js"></script>  
  19.   
  20. <script src="Scripts/nv.d3.js"></script>  
  21.   
  22. <script src="Angular/app.js"></script>  
  23.   
  24. <script src="Scripts/Directive/angularjs-nvd3-directives.js"></script>  
  25.   
  26. <link href="CSS/nv.d3.css" rel="stylesheet" />  
  27.   
  28. <script src="Angular/piechartcontroller.js"></script>  
  29.   
  30. </head>  
  31.   
  32. <body ng-app='app'>  
  33.   
  34. <div ng-controller="piechartcontroller">  
  35.   
  36. <h1> {{message}} </h1>  
  37.   
  38. <nvd3-pie-chart id="exampleId"  
  39.   
  40. data="exampleData"  
  41.   
  42. x="xFunction()"  
  43.   
  44. y="yFunction()"  
  45.   
  46. width="{{ width }}"  
  47.   
  48. height="{{ height }}"  
  49.   
  50. showLabels="true"  
  51.   
  52. pieLabelsOutside="false"  
  53.   
  54. showValues="true"  
  55.   
  56. labelType="percent">  
  57.   
  58. <svg></svg>  
  59.   
  60. </nvd3-pie-chart>  
  61.   
  62. </div>  
  63.   
  64. </body>  
  65.   
  66. </html>  

 

As you can see in html we have added all java scripts and stylesheets in head tag.

Now let’s run the application and see the output.


Conclusion:

In this article we have learnt how to create Pie char using D3 js in AngularJS. If you have any question or comment, you can download attached zip file or post me a message in C# Corner comments section.


Similar Articles