Post
Ask Question

Create AngularJS Charts With MVC Application

In this article, you will find out how to create AngularJS charts in MVC application. To show you the detailed steps,a  few client side libraries are required and those can be added either using NuGet package manager or using Bower or also referred from CDN. In this article, I am going to use Bower to install required libraries. There are many ways to install Bower; here I prefer npm(Node Package Manager) to install Bower.

Getting started

Step 1 - Install Node.js

The very first step we have to install Node.js, you can install Node.js from the below URL,

Install

Step 2 - Confirm Node.js is installed

Open windows command prompt and type as “node” then we should get prompted with “>”.

command prompt

command prompt

Step 3 - Install Bower

Set the folder location where you would like to install Bower and in windows command prompt type “npm install-g bower” to install Bower. If you observe the command we are using “-g”, here “-g” means global that means we can install Bower from any directory.

Bower

Step 4 - Check Bower is installed

If you try for searching Jquery libraries using Bower then it should give you some result, so that you can confirm that Bower is being successfully installed in your selected folder structure.

Bower

Step 5 - Install Dependencies (Jquery and AngularJS etc.)

In the command window set the folder path and type “bower install Jquery” and press [Enter] from keyboard. If the Git is not installed then you will get an error message like “Git is not installed or not in the PATH”. If you are getting such kind of error then you have to install Git first. You can download Git from the below URL and install into your system.
https://git-scm.com/download/win

download

During installation it will ask you three options to adjust your PATH environment; you have to select “Run Git from the Windows Command Prompt” as you are working on Windows OS. Screenshot for reference:

Run

Step 6 - Install Dependencies (Jquery and AngularJS etc.) again

Note

If you try to install Jquery again with the currently opened command prompt then you should get the same error. So close the currently opened command prompt. Open a new Windows command window and set the actual path where we want to install the required libraries.

Now type “bower install Jquery” in the Windows command prompt; this time it will install successfully as Git is already installed in your system.

Install

Now install AngularJS by typing “bower install angularjs” in windows command prompt.

Install

Step 7- Install tc-angular-chartjs via bower

Now install “tc-angular-chartjs” by typing “bower install tc-angular-chartjs” from command prompt.

Install

Step 8 - Confirm Dependencies Installed

There should be a new folder in the given location created by Bower called "ower_components" where all installed components like Jquery and AngularJS etc. should have been installed at that location. Below screenshot for reference:

Confirm

Now type “bower install Jquery” then it will successfully install into your system.

Now all required libraries are available with us; now it's time to show you how to generate Line Chart, Bar Chart, Doughnut Chart, Pie Chart, Polar Area Chart and Radar Chart in MVC application.

tc-angular-chartjs.js is a JavaScript file which provides directives for the below list of chart types.
  • Line Chart
  • Bar Chart
  • Radar Chart
  • Polar Area Chart
  • Pie Chart
  • Doughnut Chart
Below are six types of directive provided by tc-angular-chartjs.js where it requires Chart.js to consume its functionality.
  • tc-chartjs-line
  • tc-chartjs-bar
  • tc-chartjs-radar
  • tc-chartjs-polararea
  • tc-chartjs-pie
  • tc-chartjs-doughnut

To generate a required Chart.js chart, just place one of the above-listed directives on a canvas element and provide some data and options.

As in the article we are using AngularJS, we should provide data source by assigning $scope variables to chart-options and chart-data attributes. And these scope variables should be mapped to the canvas element. Below is code snippet.

Example:

  1. <canvastc-chartjs-polarareachart-data="sampleDataSource"chart-options="sampleOptions"width="250"height="250"></canvas>  
  2.   
  3. $scope.sampleDataSource = 
    [  
  4. {value:300, color: "#F7464A" },  
  5. {value:50, color : " #46BFBD" },  
  6. {value:100, color : " #FDB45C" },  
  7. {value: 30, color : "#949FB1"}  
  8. ];  
  9.   
  10. $scope.sampleOptions= 
    {  
  11. // Chart.js options should be here  
  12. };  
Let’s start with the complete code snippet with output for each type of chart.

Line Chart

Add a model class

A model is a class which defines a data structure.

In Solution Explorer, Right-click on Model folder. And from the context menu, choose Add > Class.

Line Chart

Add a model class “Line.cs” under Model folder.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. namespace AngularJS_ChartsAndGraphs.Models  
  6. {  
  7.     public class LineParent   
  8.     {  
  9.         public string[] labels   
  10.         {  
  11.             get;  
  12.             set;  
  13.         }  
  14.         public Line[] datasets   
  15.         {  
  16.             get;  
  17.             set;  
  18.         }  
  19.     }  
  20.     public classLine  
  21.     {  
  22.         public string label   
  23.         {  
  24.             get;  
  25.             set;  
  26.         }  
  27.         public string fillColor  
  28.         {  
  29.             get;  
  30.             set;  
  31.         }  
  32.         public string strokeColor  
  33.         {  
  34.             get;  
  35.             set;  
  36.         }  
  37.         public string pointColor   
  38.         {  
  39.             get;  
  40.             set;  
  41.         }  
  42.      
  43.         public string pointStrokeColor   
  44.         {  
  45.             get;  
  46.             set;  
  47.         }  
  48.         public string pointHighlightFill   
  49.         {  
  50.             get;  
  51.             set;  
  52.         }  
  53.         public string pointHighlightStroke   
  54.         {  
  55.             get;  
  56.             set;  
  57.         }  
  58.         public int[] data  
  59.         {  
  60.             get;  
  61.             set;  
  62.         }  
  63.     }  
  64. }  
Add a controller class

Add a “LineChart” controller class under the Controllers folder and set the inline data source.
  1. using AngularJS_ChartsAndGraphs.Models;  
  2. using System;  
  3. using System.Collections.Generic;  
  4. using System.Linq;  
  5. using System.Net;  
  6. using System.Net.Http;  
  7. using System.Web.Http;  
  8. namespace AngularJS_ChartsAndGraphs.Controllers  
  9. {  
  10.     public class LineChartController: ApiController   
  11.     {  
  12.         public LineParentGetData()   
  13.         {  
  14.             LineParent lineParent = new LineParent();  
  15.             Line[] objLine = newLine[2];  
  16.             Lineline = newLine();  
  17.             line.label = "First datasource";  
  18.             line.fillColor = "rgba(221,221,221,0.3)";  
  19.             line.strokeColor = "rgba(221,221,221,2)";  
  20.             line.pointColor = "rgba(221,221,221,2)";  
  21.             line.pointStrokeColor = "#fff";  
  22.             line.pointHighlightFill = "#fff";  
  23.             line.pointHighlightStroke = "rgba(221,221,221,2)";  
  24.             line.data = new int[7]   
  25.             {  
  26.                 65,59,80,81,56,55,40  
  27.             };  
  28.             Line line1 = new Line();  
  29.             line1.label = "Second datasource";  
  30.             line1.fillColor = "rgba(152,188,206,0.3)";  
  31.             line1.strokeColor = "rgba(152,188,206,2)";  
  32.             line1.pointColor = "rgba(152,188,206,2)";  
  33.             line1.pointStrokeColor = "#fff";  
  34.             line1.pointHighlightFill = "#fff";  
  35.             line1.pointHighlightStroke = "rgba(152,188,206,2)";  
  36.             line1.data = newint[7]  
  37.             {  
  38.                 27, 47,39,18,85,26,89  
  39.             };  
  40.             objLine = newLine[2]   
  41.             {  
  42.                 line,  
  43.                 line1  
  44.             };  
  45.             lineParent.datasets = objLine;  
  46.             lineParent.labels = newstring[7]  
  47.             {  
  48.                 "Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"  
  49.             };  
  50.             return lineParent;  
  51.         }  
  52.     }  
  53. }   
Add a JS file

Add a JS file and name it as line.js, in the file we are making service call to get the required data source and setting the options as per requirement.
  1. 'use strict';  
  2. angular  
  3.  .module('app.line', [])  
  4.  .controller('LineCtrl', function($scope, $http) {  
  5.   
  6.    $http.get('http://localhost:54796/API/LineChart').  
  7.    success(function(data, status, headers, config) {  
  8.     $scope.data = data;  
  9.    }).  
  10.    error(function(data, status, headers, config) {  
  11.     $scope.danger("Service call failed!");  
  12.    });  
  13.   
  14.    $scope.options = {  
  15.      /// Set the responsive option either true or false    
  16.      responsive: true,  
  17.   
  18.      ///Set thescaleShowGridLines option either true or false, if true then grid lines will be visible in the chart else not    
  19.      scaleShowGridLines: true,  
  20.   
  21.      /// Set the grid linescolor    
  22.      scaleGridLineColor: 'rgba(0,0,0,.07)',  
  23.   
  24.      /// Set the Width of the grid lines    
  25.      scaleGridLineWidth: 2,  
  26.   
  27.      /// Set the bezierCurve option to true or false, if true thenthe line is curved between points else not    
  28.      bezierCurve: true,  
  29.   
  30.      /// Set the points for the Tension of the Bezier curve    
  31.      bezierCurveTension: 0.5,  
  32.   
  33.      ///This option is set to show a dot for each point    
  34.      pointDot: true,  
  35.   
  36.      /// Set the Radius in number for each point dot in pixels    
  37.      pointDotRadius: 5,  
  38.   
  39.      ///Set the width for point dot stroke in number to set its Pixel    
  40.      pointDotStrokeWidth: 2,  
  41.   
  42.      /// Set this option in number to set the radius which hit detection outside the drawn point    
  43.      pointHitDetectionRadius: 19,  
  44.   
  45.      /// This option decides whether to show a stroke for datasets    
  46.      datasetStroke: true,  
  47.   
  48.      /// Set the pixel width of dataset stroke    
  49.      datasetStrokeWidth: 3,  
  50.   
  51.      /// Set the option to either true or false, if true then dataset will fill with a color else not    
  52.      datasetFill: true,  
  53.   
  54.      ///Write your custom code to execute while on animation progress    
  55.      onAnimationProgress: function() {},  
  56.   
  57.      ///Write your custom code to execute while on animation complete    
  58.      onAnimationComplete: function() {},  
  59.   
  60.      /// Customize your legend    
  61.      legendTemplate: '<ul class="tc-chart-js-legend"><% for (vari=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].strokeColor%>"></span>    
  62.      <%if(datasets[i].label){%>  
  63.      <%=datasets[i].label%>  
  64.      <%}%> < /li><%}%></ul > '};});  
Add a HTML file under “/AngularJS_ChartsAndGraphs/App/demo/line/” folder and name it as index.html.

Add the scripts reference in your HTML page,
  1. <script src="../js/thirdpartyJS/Jquery.js"></script>  
  2. <script src="../js/thirdpartyJS/foundation.min.js"></script>  
  3. <script src="../js/thirdpartyJS/angular.js"></script>  
  4. <script src="../js/thirdpartyJS/Chart.js"></script>  
  5. <script src="../js/thirdpartyJS/tc-angular-chartjs.js"></script>  
  6. <script src="../js/app.js"></script>  
  7. <script src="../js/line.js"></script>  
Add the CSS files reference in your HTML page,
  1. <link rel="stylesheet" href="../css/foundation.min.css">  
  2. <link rel="stylesheet" href="../css/font-awesome.min.css">  
  3. <link rel="stylesheet" href="../css/app.css">  
Complete code will be -
  1. <!DOCTYPE html>  
  2. <html data-ng-app="app">  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.             <meta name="viewport"content="width=device-width, initial-scale=1.0">  
  6.                 <title>Line Chart - AngularJS</title>  
  7.                 <!-- HEAD -->  
  8.                 <link rel="stylesheet"href="../css/foundation.min.css">  
  9.                     <link rel="stylesheet"href="../css/font-awesome.min.css">  
  10.                         <link rel="stylesheet"href="../css/app.css">  
  11.                             <!-- END HEAD -->  
  12.                         </head>  
  13.                         <body>  
  14.                             <!-- TOP BAR -->  
  15.                             <div class="contain-to-grid fixed">  
  16.                                 <nav class="top-bar"data-topbarrole="navigation">  
  17.                                     <ul class="title-area">  
  18.                                         <li class="toggle-topbar menu-icon">  
  19.                                             <a href="#">  
  20.                                                 <span>Menu</span>  
  21.                                             </a>  
  22.                                         </li>  
  23.                                     </ul>  
  24.                                     <section class="top-bar-section">  
  25.                                         <ul class="left">  
  26.                                             <li class="divider">  
  27.                                             </li>  
  28.                                             <li class="active">  
  29.                                                 <a href="">Line  
  30.                                                 </a>  
  31.                                             </li>  
  32.                                             <li class="divider">  
  33.                                             </li>  
  34.                                         </ul>  
  35.                                     </section>  
  36.                                 </nav>  
  37.                             </div>  
  38.                             <!-- END TOP BAR -->  
  39.                             <!-- CONTENT -->  
  40.                             <div class="row"ng-controller="LineCtrl"style="margin-top:20px;">  
  41.                                 <div class="large-12 columns">  
  42.                                     <h1>Line Chart</h1>  
  43.                                     <hr>  
  44.                                     </div>  
  45.                                     <div class="medium-8 columns">  
  46.                                         <canvastc-chartjs-linechart-options="options"chart-data="data"chart-legend="lineChart1">  
  47.                                         </canvas>  
  48.                                     </div>  
  49.                                     <div class="medium-4 columns">  
  50.                                         <divtc-chartjs-legendchart-legend="lineChart1">  
  51.                                         </div>  
  52.                                     </div>  
  53.                                 </div>  
  54.                                 <!-- END CONTENT -->  
  55.                                 <!-- SCRIPTS -->  
  56.                                 <script src="../js/thirdpartyJS/Jquery.js">  
  57.                                 </script>  
  58.                                 <script src="../js/thirdpartyJS/foundation.min.js">  
  59.                                 </script>  
  60.                                 <script src="../js/thirdpartyJS/angular.js">  
  61.                                 </script>  
  62.                                 <script src="../js/thirdpartyJS/Chart.js">  
  63.                                 </script>  
  64.                                 <script src="../js/thirdpartyJS/tc-angular-chartjs.js">  
  65.                                 </script>  
  66.                                 <script src="../js/app.js">  
  67.                                 </script>  
  68.                                 <script src="../js/line.js">  
  69.                                 </script>  
  70.                                 <script>    
  71. $(document).foundation();    
  72. </script>  
  73.                                 <!-- END SCRIPTS -->  
  74.                             </body>  
  75.                         </html>    
 Output

Output

Bar Chart

Add a model class

A model is a class which defines a data structure.

In Solution Explorer, Right-click on Model folder. And from the context menu, choose Add > Class.

Bar Chart

Add model class Bar.cs under Model folder.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. namespace AngularJS_ChartsAndGraphs.Models   
  6. {  
  7.     public class BarParent   
  8.     {  
  9.         public string[] labels   
  10.         {  
  11.             get;  
  12.             set;  
  13.         }  
  14.         public Bar[] datasets  
  15.         {  
  16.             get;  
  17.             set;  
  18.         }  
  19.     }  
  20.     public class Bar   
  21.     {  
  22.         public string label   
  23.         {  
  24.             get;  
  25.             set;  
  26.         }  
  27.         public string fillColor  
  28.         {  
  29.             get;  
  30.             set;  
  31.         }  
  32.         public string strokeColor   
  33.         {  
  34.             get;  
  35.             set;  
  36.         }  
  37.         public string highlightFill   
  38.         {  
  39.             get;  
  40.             set;  
  41.         }  
  42.         public string highlightStroke   
  43.         {  
  44.             get;  
  45.             set;  
  46.         }  
  47.         public int[] data  
  48.         {  
  49.             get;  
  50.             set;  
  51.         }  
  52.     }  
  53. }   
 Add a controller class

Add “BarChartcontroller” class under the folder Controllers and set the inline data source.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Net;  
  5. using System.Net.Http;  
  6. using System.Web.Http;  
  7. using AngularJS_ChartsAndGraphs.Models;  
  8. namespace AngularJS_ChartsAndGraphs.Controllers  
  9. {  
  10.     public class BarChartController: ApiController   
  11.     {  
  12.         public BarParentGetData()  
  13.         {  
  14.             BarParent barParent = new BarParent();  
  15.             Bar[] objBar = newBar[2];  
  16.             Bar bar = new Bar();  
  17.             bar.label = "First datasource";  
  18.             bar.fillColor = "rgba(221,221,221,0.6)";  
  19.             bar.strokeColor = "rgba(221,221,221,0.9)";  
  20.             bar.highlightFill = "rgba(221,221,221,0.76)";  
  21.             bar.highlightStroke = "rgba(221,221,221,2)";  
  22.             bar.data = newint[7]   
  23.             {  
  24.                 64,58,79,80, 55,54,39  
  25.             };  
  26.             Bar bar1 = newBar();  
  27.             bar1.label = "Second datasource";  
  28.             bar1.fillColor = "rgba(152,188,206,0.6)";  
  29.             bar1.strokeColor = "rgba(152,188,206,0.9)";  
  30.             bar1.highlightFill = "rgba(152,188,206,0.76)";  
  31.             bar1.highlightStroke = "rgba(152,188,206,2)";  
  32.             bar1.data = newint[7]   
  33.             {  
  34.                 27,47, 39,18,85,26,89  
  35.             };  
  36.             objBar = newBar[2]   
  37.             {  
  38.                 bar,  
  39.                 bar1  
  40.             };  
  41.             barParent.datasets = objBar;  
  42.             barParent.labels = newstring[7]   
  43.             {  
  44.                 "Sunday", "Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"  
  45.             };  
  46.             return barParent;  
  47.         }  
  48.     }  
  49. }   
 Add a JS file

Add a JS file and name it as bar.js, in this file we are making service call to get the required data source and setting the options as per our need.
  1. 'use strict';  
  2. angular  
  3.  .module('app.bar', [])  
  4.  .controller('BarCtrl', function($scope, $http) {  
  5.   
  6.    $http.get('http://localhost:54796/API/BarChart').  
  7.    success(function(data, status, headers, config) {  
  8.     $scope.data = data;  
  9.    }).  
  10.    error(function(data, status, headers, config) {  
  11.     $scope.danger("Service call failed!");  
  12.    });  
  13.   
  14.   
  15.    $scope.options = {  
  16.      ///Set the responsive option either true or false    
  17.      responsive: true,  
  18.   
  19.      /// Set the scaleBeginAtZero option either true or false, if true then the scale should start at zeroor the order of the magnitude will down from the lowest value    
  20.      scaleBeginAtZero: true,  
  21.   
  22.      ///This option decides whether grid lines will be shown in the chart or not    
  23.      scaleShowGridLines: true,  
  24.   
  25.      /// Set the color for the grid lines    
  26.      scaleGridLineColor: "rgba(0,0,0,.06)",  
  27.   
  28.      /// Set the width of the grid lines in number    
  29.      scaleGridLineWidth: 2,  
  30.   
  31.      /// Set the barShowStroke, if you set as true then there will be a stroke on each bar and if you set as false then there will be no stroke on each bar    
  32.      barShowStroke: true,  
  33.   
  34.      /// Set the width of the bar stroke in number    
  35.      barStrokeWidth: 3,  
  36.   
  37.      /// Set the space between each Y value sets     
  38.      barValueSpacing: 6,  
  39.   
  40.      /// Set the space between data sets within Y values    
  41.      barDatasetSpacing: 2,  
  42.   
  43.      /// Customize your legend    
  44.      legendTemplate: '<ul class="tc-chart-js-legend"><% for (vari=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].fillColor%>"></span>    
  45.      <%if(datasets[i].label){%>  
  46.      <%=datasets[i].label%>  
  47.      <%}%> < /li><%}%></ul > ' };});  

Add a HTML file under “/AngularJS_ChartsAndGraphs/App/demo/bar/” folder and name it index.html.

Add the scripts reference in your HTML page,
  1. <script src="../js/thirdpartyJS/Jquery.js"></script>  
  2. <script src="../js/thirdpartyJS/foundation.min.js"></script>  
  3. <script src="../js/thirdpartyJS/angular.js"></script>  
  4. <script src="../js/thirdpartyJS/Chart.js"></script>  
  5. <script src="../js/thirdpartyJS/tc-angular-chartjs.js"></script>  
  6. <script src="../js/app.js"></script>  
  7. <script src="../js/bar.js"></script>  
Add the CSS files reference in your HTML page,
  1. <link rel="stylesheet"href="../css/foundation.min.css">  
  2. <link rel="stylesheet"href="../css/font-awesome.min.css">  
  3. <link rel="stylesheet"href="../css/app.css">  
Complete code will be-
  1. <!DOCTYPE html>  
  2. <html data-ng-app="app">  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.             <meta name="viewport"content="width=device-width, initial-scale=1.0">  
  6.                 <title>Bar Chart - AngularJS</title>  
  7.                 <!-- HEAD -->  
  8.                 <link rel="stylesheet"href="../css/foundation.min.css">  
  9.                     <link rel="stylesheet"href="../css/font-awesome.min.css">  
  10.                         <link rel="stylesheet"href="../css/app.css">  
  11.                             <!-- END HEAD -->  
  12.                         </head>  
  13.                         <body>  
  14.                             <!-- TOP BAR -->  
  15.                             <div class="contain-to-grid fixed">  
  16.                                 <nav class="top-bar"data-topbarrole="navigation">  
  17.                                     <ul class="title-area">  
  18.                                         <li class="toggle-topbar menu-icon">  
  19.                                             <a href="#">  
  20.                                                 <span>Menu</span>  
  21.                                             </a>  
  22.                                         </li>  
  23.                                     </ul>  
  24.                                     <section class="top-bar-section">  
  25.                                         <ul class="left">  
  26.                                             <li class="active">  
  27.                                                 <a href="../bar/index.html">Bar  
  28.                                                 </a>  
  29.                                             </li>  
  30.                                             <li class="divider">  
  31.                                             </li>  
  32.                                         </ul>  
  33.                                     </section>  
  34.                                 </nav>  
  35.                             </div>  
  36.                             <!-- END TOP BAR -->  
  37.                             <!-- CONTENT -->  
  38.                             <div class="row"ng-controller="BarCtrl"style="margin-top:20px;">  
  39.                                 <div class="large-12 columns">  
  40.                                     <h1>Bar Chart</h1>  
  41.                                     <hr>  
  42.                                     </div>  
  43.                                     <div class="medium-8 columns">  
  44.                                         <canvas tc-chartjs-barchart-options="options"chart-data="data"chart-legend="barChart1">  
  45.                                         </canvas>  
  46.                                     </div>  
  47.                                     <div class="medium-4 columns">  
  48.                                         <div tc-chartjs-legendchart-legend="barChart1">  
  49.                                         </div>  
  50.                                     </div>  
  51.                                 </div>  
  52.                                 <!-- END CONTENT -->  
  53.                                 <!-- SCRIPTS -->  
  54.                                 <script src="../js/thirdpartyJS/Jquery.js">  
  55.                                 </script>  
  56.                                 <script src="../js/thirdpartyJS/foundation.min.js">  
  57.                                 </script>  
  58.                                 <script src="../js/thirdpartyJS/angular.js">  
  59.                                 </script>  
  60.                                 <script src="../js/thirdpartyJS/Chart.js">  
  61.                                 </script>  
  62.                                 <script src="../js/thirdpartyJS/tc-angular-chartjs.js">  
  63.                                 </script>  
  64.                                 <script src="../js/app.js">  
  65.                                 </script>  
  66.                                 <script src="../js/bar.js">  
  67.                                 </script>  
  68.                                 <script>    
  69. $(document).foundation();    
  70. </script>  
  71.                                 <!-- END SCRIPTS -->  
  72.                             </body>  
  73.                         </html>    
Output:

Output

Radar Chart

Add a model class

A model is a class which defines a data structure.

In Solution Explorer, Right-click on Model folder. And from the context menu, choose Add > Class.

Radar Chart

Add a model class Radar.cs under Model folder.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. namespace AngularJS_ChartsAndGraphs.Models  
  6. {  
  7.     public class RadarParent  
  8.     {  
  9.         public string[] labels   
  10.         {  
  11.             get;  
  12.             set;  
  13.         }  
  14.         public Radar[] datasets  
  15.         {  
  16.             get;  
  17.             set;  
  18.         }  
  19.     }  
  20.     public class Radar  
  21.     {  
  22.         public string label   
  23.         {  
  24.             get;  
  25.             set;  
  26.         }  
  27.         public string fillColor  
  28.         {  
  29.             get;  
  30.             set;  
  31.         }  
  32.         public string strokeColor   
  33.         {  
  34.             get;  
  35.             set;  
  36.         }  
  37.         public string pointColor   
  38.         {  
  39.             get;  
  40.             set;  
  41.         }  
  42.         public string pointStrokeColor  
  43.         {  
  44.             get;  
  45.             set;  
  46.         }  
  47.         public string pointHighlightFill   
  48.         {  
  49.             get;  
  50.             set;  
  51.         }  
  52.         public string pointHighlightStroke   
  53.         {  
  54.             get;  
  55.             set;  
  56.         }  
  57.         public int[] data  
  58.         {  
  59.             get;  
  60.             set;  
  61.         }  
  62.     }  
  63. }  
Add a controller class

Add a “RadarChartcontroller” class under the folder Controllers and set the inline data source.
  1. using AngularJS_ChartsAndGraphs.Models;  
  2. using System;  
  3. using System.Collections.Generic;  
  4. using System.Linq;  
  5. using System.Net;  
  6. using System.Net.Http;  
  7. using System.Web.Http;  
  8. namespace AngularJS_ChartsAndGraphs.Controllers  
  9. {  
  10.     public class RadarChartController: ApiController  
  11.     {  
  12.         public RadarParentGetData()  
  13.         {  
  14.             RadarParentradarParent = newRadarParent();  
  15.             Radar[] objRadar = newRadar[2];  
  16.             Radarradar = newRadar();  
  17.             radar.label = "First datasource";  
  18.             radar.fillColor = "rgba(221,221,221,0.3)";  
  19.             radar.strokeColor = "rgba(221,221,221,2)";  
  20.             radar.pointColor = "rgba(221,221,221,2)";  
  21.             radar.pointStrokeColor = "#fff";  
  22.             radar.pointHighlightFill = "#fff";  
  23.             radar.pointHighlightStroke = "rgba(221,221,221,2)";  
  24.             radar.data = newint[7]  
  25.             {  
  26.                 64,58,79,80,55, 54,39  
  27.             };  
  28.             Radar radar1 = newRadar();  
  29.             radar1.label = "Second datasource";  
  30.             radar1.fillColor = "rgba(152,188,206,0.3)";  
  31.             radar1.strokeColor = "rgba(152,188,206,3)";  
  32.             radar1.pointColor = "rgba(152,188,206,3)";  
  33.             radar1.pointStrokeColor = "#fff";  
  34.             radar1.pointHighlightFill = "#fff";  
  35.             radar1.pointHighlightStroke = "rgba(152,188,206,3)";  
  36.             radar1.data = newint[7]   
  37.             {  
  38.                 27,47,39,18,85,26,89  
  39.             };  
  40.             objRadar = newRadar[2]  
  41.             {  
  42.                 radar,  
  43.                 radar1  
  44.             };  
  45.             radarParent.datasets = objRadar;  
  46.             radarParent.labels = newstring[7]  
  47.             {  
  48.                 "Sunday","Monday","Tuesday","Wednesday","Thursday","Friday", "Saturday"  
  49.             };  
  50.             return radarParent;  
  51.         }  
  52.     }  
  53. }   
 Add a JS file

Add a JS file and name it as radar.js, in this file we are making service call to get the required data source and setting the options as per our need.
  1. 'use strict';  
  2. angular  
  3.  .module('app.radar', [])  
  4.  .controller('RadarCtrl', function($scope, $http) {  
  5.   
  6.    $http.get('http://localhost:54796/API/RadarChart').  
  7.    success(function(data, status, headers, config) {  
  8.     $scope.data = data;  
  9.    }).  
  10.    error(function(data, status, headers, config) {  
  11.     $scope.danger("Service call failed!");  
  12.    });  
  13.   
  14.    $scope.options = {  
  15.   
  16.      ///Set the responsive option either true or false    
  17.      responsive: true,  
  18.   
  19.      /// Set the scaleShowLineattribute to either true or false, if you set as true then lines will be visible for each scale point and if you set as false then lines will not visible for each scale point    
  20.      scaleShowLine: true,  
  21.   
  22.      /// Set the angleShowLineOut attribute either to true or false, if you set as true then the angle lines will be visible out of the radar and if you set as false then the angle lines will not be visible out of the radar    
  23.      angleShowLineOut: true,  
  24.   
  25.      /// This attribute decides whether the labels of the scale will be visible or not    
  26.      scaleShowLabels: false,  
  27.   
  28.      ///This attribute decides whether the scale should begin at zero or not    
  29.      scaleBeginAtZero: true,  
  30.   
  31.      /// Set the color of the angle line    
  32.      angleLineColor: 'rgba(0,0,0,.2)',  
  33.   
  34.      /// Set the pixel width in number for the angle line    
  35.      angleLineWidth: 1,  
  36.   
  37.      /// Set the font style for point label declaration    
  38.      pointLabelFontFamily: '"Calibri"',  
  39.   
  40.      /// Set the font weight for point label     
  41.      pointLabelFontStyle: 'normal',  
  42.   
  43.      /// Set the font size for point label in pixels    
  44.      pointLabelFontSize: 12,  
  45.   
  46.      /// Set the font color for point label    
  47.      pointLabelFontColor: '#666',  
  48.   
  49.      /// This attribute decides whether to show a dot for each point    
  50.      pointDot: true,  
  51.   
  52.      /// Set this attribute in pixels to set the radius of each point dot    
  53.      pointDotRadius: 2,  
  54.   
  55.      /// Set the attribute in number to set the width of point dot stroke    
  56.      pointDotStrokeWidth: 2,  
  57.   
  58.      /// Set this option in number to set the radius which hit detection outside the drawn point    
  59.      pointHitDetectionRadius: 19,  
  60.   
  61.      /// Set this attribute to set it’s visibility of a stroke for datasets    
  62.      datasetStroke: true,  
  63.   
  64.      /// Set the width of a dataset stroke in pixels    
  65.      datasetStrokeWidth: 3,  
  66.   
  67.      /// This attribute decides whether to fill dataset with color or not    
  68.      datasetFill: true,  
  69.   
  70.      /// Customize your legend    
  71.      legendTemplate: '<ul class="tc-chart-js-legend"><% for (vari=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].strokeColor%>"></span>    
  72.      <%if(datasets[i].label){%>  
  73.      <%=datasets[i].label%>  
  74.      <%}%> < /li><%}%></ul > ' };});  
Add a HTML file under “/AngularJS_ChartsAndGraphs/App/demo/radar/” folder and name it as index.html.

Add the scripts reference in your HTML page
  1. <script src="../js/thirdpartyJS/Jquery.js"></script>  
  2. <script src="../js/thirdpartyJS/foundation.min.js"></script>  
  3. <script src="../js/thirdpartyJS/angular.js"></script>  
  4. <script src="../js/thirdpartyJS/Chart.js"></script>  
  5. <script src="../js/thirdpartyJS/tc-angular-chartjs.js"></script>  
  6. <script src="../js/app.js"></script>  
  7. <script src="../js/radar.js"></script>  
Add the CSS files reference in your HTML page
  1. <link rel="stylesheet"href="../css/foundation.min.css">  
  2. <link rel="stylesheet"href="../css/font-awesome.min.css">  
  3. <link rel="stylesheet"href="../css/app.css">  
Complete code will be-
  1. <!DOCTYPE html>  
  2. <html data-ng-apphtmldata-ng-app="app">  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.             <meta name="viewport"content="width=device-width, initial-scale=1.0">  
  6.                 <title>Radar Chart - AngularJS</title>  
  7.                 <!-- HEAD -->  
  8.                 <link rel="stylesheet"href="../css/foundation.min.css">  
  9.                     <link rel="stylesheet"href="../css/font-awesome.min.css">  
  10.                         <link rel="stylesheet"href="../css/app.css">  
  11.                             <!-- END HEAD -->  
  12.                         </head>  
  13.                         <body>  
  14.                             <!-- TOP BAR -->  
  15.                             <div class="contain-to-grid fixed">  
  16.                                 <nav class="top-bar"data-topbarrole="navigation">  
  17.                                     <ul class="title-area">  
  18.                                         <li class="toggle-topbar menu-icon">  
  19.                                             <a href="#">  
  20.                                                 <span>Menu</span>  
  21.                                             </a>  
  22.                                         </li>  
  23.                                     </ul>  
  24.                                     <section class="top-bar-section">  
  25.                                         <ul class="left">  
  26.                                             <li class="active">  
  27.                                                 <ahref="">Radar  
  28.                                                 </a>  
  29.                                             </li>  
  30.                                             <li class="divider">  
  31.                                             </li>  
  32.                                         </ul>  
  33.                                     </section>  
  34.                                 </nav>  
  35.                             </div>  
  36.                             <!-- END TOP BAR -->  
  37.                             <!-- CONTENT -->  
  38.                             <div class="row"ng-controller="RadarCtrl"style="margin-top:20px;">  
  39.                                 <div class="large-12 columns">  
  40.                                     <h1>Radar Chart</h1>  
  41.                                     <hr>  
  42.                                     </div>  
  43.                                     <divclass="medium-8 columns">  
  44.                                         <canvas tc-chartjs-radarchart-optionscanvastc-chartjs-radarchart-options="options"chart-data="data"chart-legend="radarChart1">  
  45.                                         </canvas>  
  46.                                     </div>  
  47.                                     <div class="medium-4 columns">  
  48.                                         <div tc-chartjs-legendchart-legenddivtc-chartjs-legendchart-legend="radarChart1">  
  49.                                         </div>  
  50.                                     </div>  
  51.                                 </div>  
  52.                                 <!-- END CONTENT -->  
  53.                                 <!-- SCRIPTS -->  
  54.                                 <script src="../js/thirdpartyJS/Jquery.js">  
  55.                                 </script>  
  56.                                 <script src="../js/thirdpartyJS/foundation.min.js">  
  57.                                 </script>  
  58.                                 <script src="../js/thirdpartyJS/angular.js">  
  59.                                 </script>  
  60.                                 <script src="../js/thirdpartyJS/Chart.js">  
  61.                                 </script>  
  62.                                 <script src="../js/thirdpartyJS/tc-angular-chartjs.js">  
  63.                                 </script>  
  64.                                 <script src="../js/app.js">  
  65.                                 </script>  
  66.                                 <script src="../js/radar.js">  
  67.                                 </script>  
  68.                                 <script>    
  69. $(document).foundation();    
  70. </script>  
  71.                                 <!-- END SCRIPTS -->  
  72.                             </body>  
  73.                         </html>    
Output

Output

Polar Area Chart

Add a model class

A model is a class which defines a data structure.

In Solution Explorer, Right-click on Model folder. And from the context menu, choose Add > Class.

Polar Area Chart

Add a model class Polar.cs under Model folder.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. namespace AngularJS_ChartsAndGraphs.Models   
  6. {  
  7.     public class Polar  
  8.     {  
  9.         public int value   
  10.         {  
  11.             get;  
  12.             set;  
  13.         }  
  14.         public string color   
  15.         {  
  16.             get;  
  17.             set;  
  18.         }  
  19.         public string highlight   
  20.         {  
  21.             get;  
  22.             set;  
  23.         }  
  24.         public string label  
  25.         {  
  26.             get;  
  27.             set;  
  28.         }  
  29.     }  
  30. }  
Add a controller class

Add a “PolarChartcontroller” class under the Controllers folder and set the inline data source.
  1. using AngularJS_ChartsAndGraphs.Models;  
  2. using System;  
  3. using System.Collections.Generic;  
  4. using System.Linq;  
  5. using System.Net;  
  6. using System.Net.Http;  
  7. using System.Web.Http;  
  8. namespace AngularJS_ChartsAndGraphs.Controllers   
  9. {  
  10.     public class PolarChartController: ApiController  
  11.     {  
  12.         public List < Polar > GetData()   
  13.         {  
  14.             List < Polar > polarParent = newList < Polar > ();  
  15.             Polar polar = newPolar();  
  16.             polar.value = 280;  
  17.             polar.color = "#F7464A";  
  18.             polar.highlight = "#FF5A5E";  
  19.             polar.label = "Red";  
  20.             Polar polar1 = newPolar();  
  21.             polar1.value = 70;  
  22.             polar1.color = "#46BFBD";  
  23.             polar1.highlight = "#5AD3D1";  
  24.             polar1.label = "Green";  
  25.             Polar polar2 = newPolar();  
  26.             polar2.value = 120;  
  27.             polar2.color = "#FDB45C";  
  28.             polar2.highlight = "#FFC870";  
  29.             polar2.label = "Yellow";  
  30.             Polar polar3 = newPolar();  
  31.             polar3.value = 30;  
  32.             polar3.color = "#949FB1";  
  33.             polar3.highlight = "#A8B3C5";  
  34.             polar3.label = "Grey";  
  35.             Polar polar4 = newPolar();  
  36.             polar4.value = 110;  
  37.             polar4.color = "#4D5360";  
  38.             polar4.highlight = "#616774";  
  39.             polar4.label = "Dark Grey";  
  40.             polarParent.Add(polar);  
  41.             polarParent.Add(polar1);  
  42.             polarParent.Add(polar2);  
  43.             polarParent.Add(polar3);  
  44.             polarParent.Add(polar4);  
  45.             return polarParent;  
  46.         }  
  47.     }  
  48. }    
 Add a JS file

Add a JS file and name it as polararea.js, in the file we are making service call to get the required data source and setting the options as per our need.
  1. 'use strict';  
  2. angular  
  3.  .module('app.polararea', [])  
  4.  .controller('PolarareaCtrl', function($scope, $http) {  
  5.    $http.get('http://localhost:54796/API/PolarChart').  
  6.    success(function(data, status, headers, config) {  
  7.     $scope.data = data;  
  8.    }).  
  9.    error(function(data, status, headers, config) {  
  10.     $scope.danger("Service call failed!");  
  11.    });  
  12.    $scope.options = {  
  13.   
  14.      ///Set the responsive option either true or false    
  15.      responsive: true,  
  16.   
  17.      /// Set this option to true to visible backdrop on the scale level    
  18.      scaleShowLabelBackdrop: true,  
  19.   
  20.      /// Set the color of the backdrop label    
  21.      scaleBackdropColor: 'rgba(255,255,255,0.65)',  
  22.   
  23.      ///Set the scale position to true to set it position to zero    
  24.      scaleBeginAtZero: true,  
  25.   
  26.      ///Set the backdrop scale paddingin number for Y axis    
  27.      scaleBackdropPaddingY: 3,  
  28.   
  29.      /// Set the backdrop scale padding in number for X axis    
  30.      scaleBackdropPaddingX: 3,  
  31.   
  32.      /// Set the option to true to show line for each value in the scale    
  33.      scaleShowLine: true,  
  34.   
  35.      /// Set the option to true to show stroke line for each segment in the chart    
  36.      segmentShowStroke: true,  
  37.   
  38.      /// Set the color for each stroke line for each segment in the chart    
  39.      segmentStrokeColor: '#fff',  
  40.   
  41.      /// Set the width in number for each stroke segment    
  42.      segmentStrokeWidth: 3,  
  43.   
  44.      /// Set the value for animation steps in number    
  45.      animationSteps: 99,  
  46.   
  47.      /// Set animation easing effect.    
  48.      animationEasing: 'easeOutBounce',  
  49.   
  50.      /// Set the option to animate the rotation of the chart    
  51.      animateRotate: true,  
  52.   
  53.      /// Set the option to animate scaling the chart    
  54.      animateScale: false,  
  55.   
  56.      /// Customize the legend title    
  57.      legendTemplate: '<ul class="tc-chart-js-legend"><% for (vari=0; i<segments.length; i++){%><li><span style="background-color:<%=segments[i].fillColor%>"></span>    
  58.      <%if(segments[i].label){%>  
  59.      <%=segments[i].label%>  
  60.      <%}%> < /li><%}%></ul > '};});  
Add a HTML file under “/AngularJS_ChartsAndGraphs/App/demo/polararea/” folder and name it as index.html.

Add the scripts reference in your HTML page,
  1. <script src="../js/thirdpartyJS/Jquery.js"></script>  
  2. <script src="../js/thirdpartyJS/foundation.min.js"></script>  
  3. <script src="../js/thirdpartyJS/angular.js"></script>  
  4. <script src="../js/thirdpartyJS/Chart.js"></script>  
  5. <script src="../js/thirdpartyJS/tc-angular-chartjs.js"></script>  
  6. <script src="../js/app.js"></script>  
  7. <script src="../js/polararea.js"></script>  
Add the CSS files reference in your HTML page
  1. <link rel="stylesheet"href="../css/foundation.min.css">  
  2. <link rel="stylesheet"href="../css/font-awesome.min.css">  
  3. <link rel="stylesheet"href="../css/app.css">  
Complete code will be-
  1. <!DOCTYPE html>  
  2. <html data-ng-app="app">  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.             <meta name="viewport"content="width=device-width, initial-scale=1.0">  
  6.                 <title>Polar Area Chart - AngularJS</title>  
  7.                 <!-- HEAD -->  
  8.                 <link rel="stylesheet"href="../css/foundation.min.css">  
  9.                     <link rel="stylesheet"href="../css/font-awesome.min.css">  
  10.                         <link rel="stylesheet"href="../css/app.css">  
  11.                             <!-- END HEAD -->  
  12.                         </head>  
  13.                         <body>  
  14.                             <!-- TOP BAR -->  
  15.                             <div class="contain-to-grid fixed">  
  16.                                 <nav class="top-bar" data-topbar role="navigation">  
  17.                                     <ul class="title-area">  
  18.                                         <li class="toggle-topbar menu-icon">  
  19.                                             <a href="#">  
  20.                                                 <span>Menu</span>  
  21.                                             </a>  
  22.                                         </li>  
  23.                                     </ul>  
  24.                                     <section class="top-bar-section">  
  25.                                         <ul class="left">  
  26.                                             <li class="active">  
  27.                                                 <a href="">Polar Area  
  28.                                                 </a>  
  29.                                             </li>  
  30.                                             <li class="divider">  
  31.                                             </li>  
  32.                                         </ul>  
  33.                                     </section>  
  34.                                 </nav>  
  35.                             </div>  
  36.                             <!-- END TOP BAR -->  
  37.                             <!-- CONTENT -->  
  38.                             <div class="row"ng-controller="PolarareaCtrl"style="margin-top:20px;">  
  39.                                 <div class="large-12 columns">  
  40.                                     <h1>Polar Area Chart</h1>  
  41.                                     <hr>  
  42.                                     </div>  
  43.                                     <div class="medium-8 columns">  
  44.                                         <canvastc-chartjs-polarareachart-optionscanvastc-chartjs-polarareachart-options="options"chart-data="data"chart-legend="polarareaChart1">  
  45.                                         </canvas>  
  46.                                     </div>  
  47.                                     <div class="medium-4 columns">  
  48.                                         <div tc-chartjs-legendchart-legenddivtc-chartjs-legendchart-legend="polarareaChart1">  
  49.                                         </div>  
  50.                                     </div>  
  51.                                 </div>  
  52.                                 <!-- END CONTENT -->  
  53.                                 <!-- SCRIPTS -->  
  54.                                 <script src="../js/thirdpartyJS/Jquery.js">  
  55.                                 </script>  
  56.                                 <script src="../js/thirdpartyJS/foundation.min.js">  
  57.                                 </script>  
  58.                                 <script src="../js/thirdpartyJS/angular.js">  
  59.                                 </script>  
  60.                                 <script src="../js/thirdpartyJS/Chart.js">  
  61.                                 </script>  
  62.                                 <script src="../js/thirdpartyJS/tc-angular-chartjs.js">  
  63.                                 </script>  
  64.                                 <script src="../js/app.js">  
  65.                                 </script>  
  66.                                 <script src="../js/polararea.js">  
  67.                                 </script>  
  68.                                 <script>    
  69. $(document).foundation();    
  70. </script>  
  71.                                 <!-- END SCRIPTS -->  
  72.                             </body>  
  73.                         </html>    
Output

Output

Pie Chart

Add a model class

A model is a class which defines a data structure.

In Solution Explorer, Right-click on Model folder. And from the context menu, choose Add > Class.

Pie Chart

Add a model class “Pie.cs“under Model folder.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. namespace AngularJS_ChartsAndGraphs.Models  
  6. {  
  7.     public class Pie  
  8.     {  
  9.         publicint value   
  10.         {  
  11.             get;  
  12.             set;  
  13.         }  
  14.         public string color   
  15.         {  
  16.             get;  
  17.             set;  
  18.         }  
  19.         public string highlight   
  20.         {  
  21.             get;  
  22.             set;  
  23.         }  
  24.         public string label   
  25.         {  
  26.             get;  
  27.             set;  
  28.         }  
  29.     }  
  30. }  
Add a controller class

Add a “PieChartcontroller” class under the folder Controllers and set the inline data source.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Net;  
  5. using System.Net.Http;  
  6. using System.Web.Http;  
  7. using AngularJS_ChartsAndGraphs.Models;  
  8. namespaceAngularJS_ChartsAndGraphs.Controllers  
  9. {  
  10.     public class PieChartController: ApiController   
  11.     {  
  12.         public List < Pie > GetData()   
  13.         {  
  14.             List < Pie > pieParent = new List < Pie > ();  
  15.             Pie pie = new Pie();  
  16.             pie.value = 300;  
  17.             pie.color = "#F7464A";  
  18.             pie.highlight = "#FF5A5E";  
  19.             pie.label = "Red";  
  20.             Pie pie1 = newPie();  
  21.             pie1.value = 50;  
  22.             pie1.color = "#46BFBD";  
  23.             pie1.highlight = "#5AD3D1";  
  24.             pie1.label = "Green";  
  25.             Pie pie2 = newPie();  
  26.             pie2.value = 100;  
  27.             pie2.color = "#FDB45C";  
  28.             pie2.highlight = "#FFC870";  
  29.             pie2.label = "Yellow";  
  30.             pieParent.Add(pie);  
  31.             pieParent.Add(pie1);  
  32.             pieParent.Add(pie2);  
  33.             return pieParent;  
  34.         }  
  35.     }  
  36. }  
Add a JS file

Add a JS file and name it as “pie.js”, in this file we are making service call to get the required data source and setting the options as per our need.
  1. 'use strict';  
  2. angular  
  3.  .module('app.pie', [])  
  4.  .controller('PieCtrl', function($scope, $http) {  
  5.   
  6.    $http.get('http://localhost:54796/API/PieChart').  
  7.    success(function(data, status, headers, config) {  
  8.     $scope.data = data;  
  9.    }).  
  10.    error(function(data, status, headers, config) {  
  11.     $scope.danger("Service call failed!");  
  12.    });  
  13.   
  14.    $scope.options = {  
  15.   
  16.      ///Set the responsive option either true or false    
  17.      responsive: true,  
  18.   
  19.      /// Set the option to true to show stroke line for each segment in the chart    
  20.      segmentShowStroke: true,  
  21.   
  22.      /// Set the color for each stroke line for each segment in the chart    
  23.      segmentStrokeColor: '#fff',  
  24.   
  25.      /// Set the width in number for each stroke segment    
  26.      segmentStrokeWidth: 3,  
  27.   
  28.      /// Set this option in number such that the percentage will cut of in the middle of the chart    
  29.      percentageInnerCutout: 1, // This is 0 for Pie charts    
  30.   
  31.      /// Set the value for animation steps in number    
  32.      animationSteps: 99,  
  33.   
  34.      /// Set the option to animation easing effect    
  35.      animationEasing: 'easeOutBounce',  
  36.   
  37.      /// Set the option to animate the rotation of the chart    
  38.      animateRotate: true,  
  39.   
  40.      /// Set the option to animate scaling the chart    
  41.      animateScale: false,  
  42.   
  43.      /// Customize the legend title    
  44.      legendTemplate: '<ul class="tc-chart-js-legend"><% for (vari=0; i<segments.length; i++){%><li><span style="background-color:<%=segments[i].fillColor%>"></span>    
  45.      <%if(segments[i].label){%>  
  46.      <%=segments[i].label%>  
  47.      <%}%> < /li><%}%></ul > '};});  
Add a HTML file under “/AngularJS_ChartsAndGraphs/App/demo/pie/” folder and name it as index.html.

Add the scripts reference in your HTML page
  1. <script src="../js/thirdpartyJS/Jquery.js"></script>  
  2. <script src="../js/thirdpartyJS/foundation.min.js"></script>  
  3. <script src="../js/thirdpartyJS/angular.js"></script>  
  4. <script src="../js/thirdpartyJS/Chart.js"></script>  
  5. <script src="../js/thirdpartyJS/tc-angular-chartjs.js"></script>  
  6. <script src="../js/app.js"></script>  
  7. <script src="../js/pie.js"></script>  
Add the CSS files reference in your HTML page
  1. <link rel="stylesheet"href="../css/foundation.min.css">  
  2. <link rel="stylesheet"href="../css/font-awesome.min.css">  
  3. <link rel="stylesheet"href="../css/app.css">  
Complete code will be-
  1. <!DOCTYPEhtml>  
  2. <html data-ng-app="app">  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.             <meta name="viewport"content="width=device-width, initial-scale=1.0">  
  6.                 <title>Pie Chart - AngularJS</title>  
  7.                 <!-- HEAD -->  
  8.                 <link rel="stylesheet"href="../css/foundation.min.css">  
  9.                     <link rel="stylesheet"href="../css/font-awesome.min.css">  
  10.                         <link rel="stylesheet"href="../css/app.css">  
  11.                             <!-- END HEAD -->  
  12.                         </head>  
  13.                         <body>  
  14.                             <!-- TOP BAR -->  
  15.                             <div class="contain-to-grid fixed">  
  16.                                 <nav class="top-bar"data-topbarrole="navigation">  
  17.                                     <ul class="title-area">  
  18.                                         <li class="toggle-topbar menu-icon">  
  19.                                             <a href="#">  
  20.                                                 <span>Menu</span>  
  21.                                             </a>  
  22.                                         </li>  
  23.                                     </ul>  
  24.                                     <section class="top-bar-section">  
  25.                                         <ul class="left">  
  26.                                             <li class="active">  
  27.                                                 <a href="">Pie  
  28.                                                 </a>  
  29.                                             </li>  
  30.                                             <li class="divider">  
  31.                                             </li>  
  32.                                         </ul>  
  33.                                     </section>  
  34.                                 </nav>  
  35.                             </div>  
  36.                             <!-- END TOP BAR -->  
  37.                             <!-- CONTENT -->  
  38.                             <div class="row"ng-controller="PieCtrl"style="margin-top:20px;">  
  39.                                 <div class="large-12 columns">  
  40.                                     <h1>Pie Chart</h1>  
  41.                                     <hr>  
  42.                                     </div>  
  43.                                     <div class="medium-8 columns">  
  44.                                         <canvas tc-chartjs-piechart-optionscanvastc-chartjs-piechart-options="options"chart-data="data"chart-legend="pieChart1">  
  45.                                         </canvas>  
  46.                                     </div>  
  47.                                     <div class="medium-4 columns">  
  48.                                         <divtc-chartjs-legendchart-legenddivtc-chartjs-legendchart-legend="pieChart1">  
  49.                                         </div>  
  50.                                     </div>  
  51.                                 </div>  
  52.                                 <!-- END CONTENT -->  
  53.                                 <!-- SCRIPTS -->  
  54.                                 <script src="../js/thirdpartyJS/Jquery.js">  
  55.                                 </script>  
  56.                                 <script src="../js/thirdpartyJS/foundation.min.js">  
  57.                                 </script>  
  58.                                 <script src="../js/thirdpartyJS/angular.js">  
  59.                                 </script>  
  60.                                 <script src="../js/thirdpartyJS/Chart.js">  
  61.                                 </script>  
  62.                                 <script src="../js/thirdpartyJS/tc-angular-chartjs.js">  
  63.                                 </script>  
  64.                                 <script src="../js/app.js">  
  65.                                 </script>  
  66.                                 <script src="../js/pie.js">  
  67.                                 </script>  
  68.                                 <script>    
  69. $(document).foundation();    
  70. </script>  
  71.                                 <!-- END SCRIPTS -->  
  72.                             </body>  
  73.                         </html>    
 Output:

Output

Doughnut Chart

Add a model class

A model is a class which defines a data structure.

In Solution Explorer, Right-click on Model folder. And from the context menu, choose Add > Class.

Doughnut Chart

Add a model class “Doughnut.cs“ under Model folder.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. namespace AngularJS_ChartsAndGraphs.Models  
  6. {  
  7.     public class Doughnut  
  8.     {  
  9.         public int value  
  10.         {  
  11.             get;  
  12.             set;  
  13.         }  
  14.         public string color   
  15.         {  
  16.             get;  
  17.             set;  
  18.         }  
  19.         public string highlight   
  20.         {  
  21.             get;  
  22.             set;  
  23.         }  
  24.         public string label   
  25.         {  
  26.             get;  
  27.             set;  
  28.         }  
  29.     }  
  30. }  
Add a controller class

Add a “DoughnutChartcontroller” class under the folder Controllers and set the inline data source.
  1. using AngularJS_ChartsAndGraphs.Models;  
  2. using System;  
  3. using System.Collections.Generic;  
  4. using System.Linq;  
  5. using System.Net;  
  6. using System.Net.Http;  
  7. using System.Web.Http;  
  8. namespace AngularJS_ChartsAndGraphs.Controllers  
  9. {  
  10.     public class DoughnutChartController: ApiController  
  11.     {  
  12.         public List < Doughnut > GetData()  
  13.         {  
  14.             List < Doughnut > doughnutParent = newList < Doughnut > ();  
  15.             Doughnut doughnut = new Doughnut();  
  16.             doughnut.value = 300;  
  17.             doughnut.color = "#F7464A";  
  18.             doughnut.highlight = "#FF5A5E";  
  19.             doughnut.label = "Red";  
  20.             Doughnut doughnut1 = newDoughnut();  
  21.             doughnut1.value = 50;  
  22.             doughnut1.color = "#46BFBD";  
  23.             doughnut1.highlight = "#5AD3D1";  
  24.             doughnut1.label = "Green";  
  25.             Doughnut doughnut2 = newDoughnut();  
  26.             doughnut2.value = 100;  
  27.             doughnut2.color = "#FDB45C";  
  28.             doughnut2.highlight = "#FFC870";  
  29.             doughnut2.label = "Yellow";  
  30.             doughnutParent.Add(doughnut);  
  31.             doughnutParent.Add(doughnut1);  
  32.             doughnutParent.Add(doughnut2);  
  33.             returndoughnutParent;  
  34.         }  
  35.     }  
  36. }  
Add a JS file

Add a JS file and name it as doughnut.js, in this file we are making service call to get the required data source and setting the options as per our need.
  1. 'use strict';  
  2. angular  
  3.  .module('app.doughnut', [])  
  4.  .controller('DoughnutCtrl', function($scope, $http) {  
  5.   
  6.    $http.get('http://localhost:54796/API/DoughnutChart').  
  7.    success(function(data, status, headers, config) {  
  8.     $scope.data = data;  
  9.    }).  
  10.    error(function(data, status, headers, config) {  
  11.     $scope.danger("Service call failed!");  
  12.    });  
  13.    $scope.options = {  
  14.   
  15.      ///Set the responsive option either true or false    
  16.      responsive: true,  
  17.   
  18.      /// Set the option to true to show stroke line for each segment in the chart    
  19.      segmentShowStroke: true,  
  20.   
  21.      /// Set the color for each stroke line for each segment in the chart    
  22.      segmentStrokeColor: '#fff',  
  23.   
  24.      /// Set the width in number for each stroke segment    
  25.      segmentStrokeWidth: 3,  
  26.   
  27.      /// Set this option in number such that the percentage will cut of in the middle of the chart    
  28.      percentageInnerCutout: 51, // This is 0 for Pie charts    
  29.   
  30.      /// Set the value for animation steps in number    
  31.      animationSteps: 99,  
  32.   
  33.      /// Set the option to animation easing effect    
  34.      animationEasing: 'easeOutBounce',  
  35.   
  36.      /// Set the option to animate the rotation of the chart    
  37.      animateRotate: true,  
  38.   
  39.      /// Set the option to animate scaling the chart    
  40.      animateScale: false,  
  41.   
  42.      /// Customize the legend title    
  43.      legendTemplate: '<ul class="tc-chart-js-legend"><% for (vari=0; i<segments.length; i++){%><li><span style="background-color:<%=segments[i].fillColor%>"></span>    
  44.      <%if(segments[i].label){%>  
  45.      <%=segments[i].label%>  
  46.      <%}%> < /li><%}%></ul > ' }; });  
Add a HTML file under “/AngularJS_ChartsAndGraphs/App/demo/doughnut/” folder and name it as “index.html”.

Add the scripts reference in your HTML page
  1. <script src="../js/thirdpartyJS/Jquery.js">  
  2. </script>  
  3. <script src="../js/thirdpartyJS/foundation.min.js">  
  4. </script>  
  5. <script src="../js/thirdpartyJS/angular.js">  
  6. </script>  
  7. <script src="../js/thirdpartyJS/Chart.js">  
  8. </script>  
  9. <script src="../js/thirdpartyJS/tc-angular-chartjs.js">  
  10. </script>  
  11. <script src="../js/app.js">  
  12. </script>  
  13. <script src="../js/doughnut.js">  
  14. </script>    
Add the CSS files reference in your HTML page
  1. <link rel="stylesheet" href="../css/foundation.min.css">  
  2. <link rel="stylesheet" href="../css/font-awesome.min.css">  
  3. <link rel="stylesheet" href="../css/app.css">  
Complete code will be-
  1. <!DOCTYPEhtml>  
  2. <html data-ng-app="app">  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.             <meta name="viewport"content="width=device-width, initial-scale=1.0">  
  6.                 <title>Doughnut Chart - AngularJS</title>  
  7.                 <!-- HEAD -->  
  8.                 <link rel="stylesheet"href="../css/foundation.min.css">  
  9.                     <link rel="stylesheet"href="../css/font-awesome.min.css">  
  10.                         <link rel="stylesheet"href="../css/app.css">  
  11.                             <!-- END HEAD -->  
  12.                         </head>  
  13.                         <body>  
  14.                             <!-- TOP BAR -->  
  15.                             <div class="contain-to-grid fixed">  
  16.                                 <nav class="top-bar"data-topbar role="navigation">  
  17.                                     <ul class="title-area">  
  18.                                         <li class="toggle-topbar menu-icon">  
  19.                                             <a href="#">  
  20.                                                 <span>Menu</span>  
  21.                                             </a>  
  22.                                         </li>  
  23.                                     </ul>  
  24.                                     <section class="top-bar-section">  
  25.                                         <ul class="left">  
  26.                                             <li class="active">  
  27.                                                 <a href="">Doughnut  
  28.                                                 </a>  
  29.                                             </li>  
  30.                                             <li class="divider">  
  31.                                             </li>  
  32.                                         </ul>  
  33.                                     </section>  
  34.                                 </nav>  
  35.                             </div>  
  36.                             <!-- END TOP BAR -->  
  37.                             <!-- CONTENT -->  
  38.                             <div class="row"ng-controller="DoughnutCtrl"style="margin-top:20px;">  
  39.                                 <div class="large-12 columns">  
  40.                                     <h1>Doughnut Chart</h1>  
  41.                                     <hr>  
  42.                                     </div>  
  43.                                     <div class="medium-8 columns">  
  44.                                         <canvastc-chartjs-doughnutchart-optionscanvastc-chartjs-doughnutchart-options="options"chart-data="data"chart-legend="doughnutChart1">  
  45.                                         </canvas>  
  46.                                     </div>  
  47.                                     <div class="medium-4 columns">  
  48.                                         <divtc-chartjs-legendchart-legenddivtc-chartjs-legendchart-legend="doughnutChart1">  
  49.                                         </div>  
  50.                                     </div>  
  51.                                 </div>  
  52.                                 <!-- END CONTENT -->  
  53.                                 <!-- SCRIPTS -->  
  54.                                 <script src="../js/thirdpartyJS/Jquery.js">  
  55.                                 </script>  
  56.                                 <script src="../js/thirdpartyJS/foundation.min.js">  
  57.                                 </script>  
  58.                                 <script src="../js/thirdpartyJS/angular.js">  
  59.                                 </script>  
  60.                                 <script src="../js/thirdpartyJS/Chart.js">  
  61.                                 </script>  
  62.                                 <script src="../js/thirdpartyJS/tc-angular-chartjs.js">  
  63.                                 </script>  
  64.                                 <script src="../js/app.js">  
  65.                                 </script>  
  66.                                 <script src="../js/doughnut.js">  
  67.                                 </script>  
  68.                                 <script>    
  69. $(document).foundation();    
  70. </script>  
  71.                                 <!-- END SCRIPTS -->  
  72.                             </body>  
  73.                         </html>    
Output:

Output

Note - In this article, few commands or syntax which I have used may match from online.


Similar Articles