Learn MVC Using Angular Pie Chart

Introduction

In this article, we will learn MVC, using Angular Pie chart, which is used for two types of UI, which are given below.

  • Angular Knob Pie Chart.
  • Angular Easy Pie Chart.

Angular Knob

Output 1

MVC

Create MVC Project

Open Visual Studio 2015.

MVC

Go to New menu > click New & project. Now, it will open New Project Window.

MVC

You can select ASP.NET Web Application on Framework 4.6. Enter the name of project in Solution name textbox, followed by clicking OK button.

MVC

One more Window should be appearing. Select MVC template in this popup & click OK button. Now, you can start to play.

Configure Angular Knob

We will download Knob plug in from

Features

  • It works based on canvas.
  • Can implement keyboard event.
  • Can change UI touch, mouse & mouse wheel.
  • Overloads an input element.

Open the _Layout.cshtml and must refer the min.js file in this view page.

  1. <script src="~/Plugin/angular-knob/src/angular-knob.js"></script>  
  2. <script src="~/Plugin/jquery-knob/dist/jquery.knob.min.js"></script>  

Open the Angular module and make its injection of Knob as ui-knob.

  1. var uiroute = angularmodule('uiroute', ['ui.router''ui.knob']);   

Open the HTML page, make it design, using knop element & attribute.

  1. <knob knob-data="knobLoaderData1" -options="knobLoaderOptions1" knob-max="100"> </knob>  

Set the values for the attribute. Open the “angular controller” files and hard code an input or you may get & bind the values from the Server side.

  1. $scope.knobLoaderData1 = 80;  
  2. $scope.knobLoaderOptions1 = {  
  3.             width: '50%',   
  4.             displayInput: false,  
  5.             fgColor: '#0f5889'  
  6.         };  

You have some option to change Pie Chart UI.

  1. $scope.knobLoaderOptions2 = {  
  2.             width: '50%',   
  3.             displayInput: true,  
  4.             fgColor: '#09a564',  
  5.             readOnly: true,  
  6.             lineCap: 'round'  
  7.         };  
  8.   
  9.         $scope.knobLoaderOptions3 = {  
  10.             width: '50%',   
  11.             displayInput: true,  
  12.             fgColor: '#a50958',  
  13.             displayPrevious: true,  
  14.             thickness: 0.1  
  15.         };  
  16.   
  17.         $scope.knobLoaderOptions4 = {  
  18.             width: '50%',   
  19.             displayInput: true,  
  20.             fgColor: '#a50909',  
  21.             bgColor: '#a54a09',  
  22.             angleOffset: -125,  
  23.             angleArc: 250  
  24.         };  

If you have any doubts regarding configuration, visit my links

Output 2

MVC

Yes, we have one more choice of Easy Pie Chart. Download the plug in from

Features

  • Highly customizable.
  • Resolution independent.
  • Works on all the modern devices (Even in IE7).

Add Easy Pie Chart plug in _Layout.cs html.

  1. <script src="~/Plugin/jquery.easy-pie-chart/dist/angular.easypiechart.min.js"></script>   

Inject as “'easypiechart'”in angular module

  1. var uiroute = angular.module('uiroute', ['ui.router''ui.knob''easypiechart']);   

Html Attributes

  1. <div easypiechart="" options="pieOptions" percent="piePercent1" class="easypie">   

Load Attribute values in Angular Controller files.

  1. $scope.piePercent1 = 75;  
  2. $scope.pieOptions = {  
  3.             animate: {  
  4.                 duration: 700,  
  5.                 enabled: true  
  6.             },  
  7.             barColor: '#0e74b2',       
  8.             scaleColor: false,  
  9.             lineWidth: 10,  
  10.             lineCap: 'circle'  
  11.         };  

For the output, I have written random function, as shown below.

  1. $scope.randomize = function (type) {  
  2.             if (type === 'easy') {  
  3.                 $scope.piePercent1 = random();  
  4.                 $scope.piePercent2 = random();  
  5.                 $scope.piePercent3 = random();  
  6.                 $scope.piePercent4 = random();  
  7.             }  
  8.             if (type === 'knob') {  
  9.                 $scope.knobLoaderData1 = random();  
  10.                 $scope.knobLoaderData2 = random();  
  11.                 $scope.knobLoaderData3 = random();  
  12.                 $scope.knobLoaderData4 = random();  
  13.             }  
  14.         }  
  15.   
  16.         function random() {  
  17.             return Math.floor((Math.random() * 100) + 1);  
  18.         }  

Call the function in HTML button, which is based on Pie Chart types

  1. <button type="button" ng-click="randomize('knob')" class="btn btn-sm btn-warning">Randomize Knob</button>  
  2. <button type="button" ng-click="randomize('easy')" class="btn btn-sm btn-danger">Randomize EasyPie</button>   

Output 3

MVC

Note

  • Knob “Default” Pie Chart works on your mouse wheel & mouse click.
  • Knob “Angle Offset & Arc” Pie chart works on your mouse wheel, mouse click & keyboard itself.

To download source, click here.

Conclusion

In this article, we have learned MVC, using Angular Pie Chart. If you have any queries, please tell me through the comments sectionsince your comments are very valuable.