Angular

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.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs