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



Create MVC Project

Open Visual Studio 2015.



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



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.



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

• Angular Knob

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.

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

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

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

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

<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.

$scope.knobLoaderData1 = 80;
$scope.knobLoaderOptions1 = {
            width: '50%',
            displayInput: false,
            fgColor: '#0f5889'
        };

You have some option to change Pie Chart UI.

$scope.knobLoaderOptions2 = {
            width: '50%',
            displayInput: true,
            fgColor: '#09a564',
            readOnly: true,
            lineCap: 'round'
        };

        $scope.knobLoaderOptions3 = {
            width: '50%',
            displayInput: true,
            fgColor: '#a50958',
            displayPrevious: true,
            thickness: 0.1
        };

        $scope.knobLoaderOptions4 = {
            width: '50%',
            displayInput: true,
            fgColor: '#a50909',
            bgColor: '#a54a09',
            angleOffset: -125,
            angleArc: 250
        };

If you have any doubts regarding configuration, visit my links

• Learn Basics Of MVC Using AngularJS
• Learn MVC Using Angular UI-Route
• Learn MVC Using Angular Role Based Login
• Learn MVC Using Angular Datatable
• Learn MVC Using Angular Crystal Report

Output 2



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

• Easy Pie Chart

Features

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

Add Easy Pie Chart plug in _Layout.cs html.

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

Inject as “'easypiechart'”in angular module

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

Html Attributes

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

Load Attribute values in Angular Controller files.

$scope.piePercent1 = 75;
$scope.pieOptions = {
            animate: {
                duration: 700,
                enabled: true
            },
            barColor: '#0e74b2',
            scaleColor: false,
            lineWidth: 10,
            lineCap: 'circle'
        };

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

$scope.randomize = function (type) {
            if (type === 'easy') {
                $scope.piePercent1 = random();
                $scope.piePercent2 = random();
                $scope.piePercent3 = random();
                $scope.piePercent4 = random();
            }
            if (type === 'knob') {
                $scope.knobLoaderData1 = random();
                $scope.knobLoaderData2 = random();
                $scope.knobLoaderData3 = random();
                $scope.knobLoaderData4 = random();
            }
        }

        function random() {
            return Math.floor((Math.random() * 100) + 1);
        }

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

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

Output 3



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 section, since your comments are very valuable.