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.
Below are six types of directive provided by tc-angular-chartjs.js where it requires Chart.js to consume its functionality.

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>
  3. $scope.sampleDataSource =
    [
  4. {value:300, color: "#F7464A" },
  5. {value:50, color : " #46BFBD" },
  6. {value:100, color : " #FDB45C" },
  7. {value: 30, color : "#949FB1"}
  8. ];
  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. }
  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) {
  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. });
  14. $scope.options = {
  15. /// Set the responsive option either true or false
  16. responsive: true,
  18. ///Set thescaleShowGridLines option either true or false, if true then grid lines will be visible in the chart else not
  19. scaleShowGridLines: true,
  21. /// Set the grid linescolor
  22. scaleGridLineColor: 'rgba(0,0,0,.07)',
  24. /// Set the Width of the grid lines
  25. scaleGridLineWidth: 2,
  27. /// Set the bezierCurve option to true or false, if true thenthe line is curved between points else not
  28. bezierCurve: true,
  30. /// Set the points for the Tension of the Bezier curve
  31. bezierCurveTension: 0.5,
  33. ///This option is set to show a dot for each point
  34. pointDot: true,
  36. /// Set the Radius in number for each point dot in pixels
  37. pointDotRadius: 5,
  39. ///Set the width for point dot stroke in number to set its Pixel
  40. pointDotStrokeWidth: 2,
  42. /// Set this option in number to set the radius which hit detection outside the drawn point
  43. pointHitDetectionRadius: 19,
  45. /// This option decides whether to show a stroke for datasets
  46. datasetStroke: true,
  48. /// Set the pixel width of dataset stroke
  49. datasetStrokeWidth: 3,
  51. /// Set the option to either true or false, if true then dataset will fill with a color else not
  52. datasetFill: true,
  54. ///Write your custom code to execute while on animation progress
  55. onAnimationProgress: function() {},
  57. ///Write your custom code to execute while on animation complete
  58. onAnimationComplete: function() {},
  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) {
  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. });
  15. $scope.options = {
  16. ///Set the responsive option either true or false
  17. responsive: true,
  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,
  22. ///This option decides whether grid lines will be shown in the chart or not
  23. scaleShowGridLines: true,
  25. /// Set the color for the grid lines
  26. scaleGridLineColor: "rgba(0,0,0,.06)",
  28. /// Set the width of the grid lines in number
  29. scaleGridLineWidth: 2,
  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,
  34. /// Set the width of the bar stroke in number
  35. barStrokeWidth: 3,
  37. /// Set the space between each Y value sets
  38. barValueSpacing: 6,
  40. /// Set the space between data sets within Y values
  41. barDatasetSpacing: 2,
  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) {
  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. });
  14. $scope.options = {
  16. ///Set the responsive option either true or false
  17. responsive: true,
  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,
  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,
  25. /// This attribute decides whether the labels of the scale will be visible or not
  26. scaleShowLabels: false,
  28. ///This attribute decides whether the scale should begin at zero or not
  29. scaleBeginAtZero: true,
  31. /// Set the color of the angle line
  32. angleLineColor: 'rgba(0,0,0,.2)',
  34. /// Set the pixel width in number for the angle line
  35. angleLineWidth: 1,
  37. /// Set the font style for point label declaration
  38. pointLabelFontFamily: '"Calibri"',
  40. /// Set the font weight for point label
  41. pointLabelFontStyle: 'normal',
  43. /// Set the font size for point label in pixels
  44. pointLabelFontSize: 12,
  46. /// Set the font color for point label
  47. pointLabelFontColor: '#666',
  49. /// This attribute decides whether to show a dot for each point
  50. pointDot: true,
  52. /// Set this attribute in pixels to set the radius of each point dot
  53. pointDotRadius: 2,
  55. /// Set the attribute in number to set the width of point dot stroke
  56. pointDotStrokeWidth: 2,
  58. /// Set this option in number to set the radius which hit detection outside the drawn point
  59. pointHitDetectionRadius: 19,
  61. /// Set this attribute to set it’s visibility of a stroke for datasets
  62. datasetStroke: true,
  64. /// Set the width of a dataset stroke in pixels
  65. datasetStrokeWidth: 3,
  67. /// This attribute decides whether to fill dataset with color or not
  68. datasetFill: true,
  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 = {
  14. ///Set the responsive option either true or false
  15. responsive: true,
  17. /// Set this option to true to visible backdrop on the scale level
  18. scaleShowLabelBackdrop: true,
  20. /// Set the color of the backdrop label
  21. scaleBackdropColor: 'rgba(255,255,255,0.65)',
  23. ///Set the scale position to true to set it position to zero
  24. scaleBeginAtZero: true,
  26. ///Set the backdrop scale paddingin number for Y axis
  27. scaleBackdropPaddingY: 3,
  29. /// Set the backdrop scale padding in number for X axis
  30. scaleBackdropPaddingX: 3,
  32. /// Set the option to true to show line for each value in the scale
  33. scaleShowLine: true,
  35. /// Set the option to true to show stroke line for each segment in the chart
  36. segmentShowStroke: true,
  38. /// Set the color for each stroke line for each segment in the chart
  39. segmentStrokeColor: '#fff',
  41. /// Set the width in number for each stroke segment
  42. segmentStrokeWidth: 3,
  44. /// Set the value for animation steps in number
  45. animationSteps: 99,
  47. /// Set animation easing effect.
  48. animationEasing: 'easeOutBounce',
  50. /// Set the option to animate the rotation of the chart
  51. animateRotate: true,
  53. /// Set the option to animate scaling the chart
  54. animateScale: false,
  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) {
  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. });
  14. $scope.options = {
  16. ///Set the responsive option either true or false
  17. responsive: true,
  19. /// Set the option to true to show stroke line for each segment in the chart
  20. segmentShowStroke: true,
  22. /// Set the color for each stroke line for each segment in the chart
  23. segmentStrokeColor: '#fff',
  25. /// Set the width in number for each stroke segment
  26. segmentStrokeWidth: 3,
  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
  31. /// Set the value for animation steps in number
  32. animationSteps: 99,
  34. /// Set the option to animation easing effect
  35. animationEasing: 'easeOutBounce',
  37. /// Set the option to animate the rotation of the chart
  38. animateRotate: true,
  40. /// Set the option to animate scaling the chart
  41. animateScale: false,
  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) {
  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 = {
  15. ///Set the responsive option either true or false
  16. responsive: true,
  18. /// Set the option to true to show stroke line for each segment in the chart
  19. segmentShowStroke: true,
  21. /// Set the color for each stroke line for each segment in the chart
  22. segmentStrokeColor: '#fff',
  24. /// Set the width in number for each stroke segment
  25. segmentStrokeWidth: 3,
  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
  30. /// Set the value for animation steps in number
  31. animationSteps: 99,
  33. /// Set the option to animation easing effect
  34. animationEasing: 'easeOutBounce',
  36. /// Set the option to animate the rotation of the chart
  37. animateRotate: true,
  39. /// Set the option to animate scaling the chart
  40. animateScale: false,
  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.