DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > Learn MVC Using Angular Pie Chart

Learn MVC Using Angular Pie Chart

Follow along with this tutorial to learn how to set up two Angular plugins that allow you to create charts to display the metrics of your site or application.

Thiruppathi Rengasamy user avatar by
Thiruppathi Rengasamy
CORE ·
Jun. 13, 17 · Web Dev Zone · Tutorial
Like (2)
Save
Tweet
4.31K Views

Join the DZone community and get the full member experience.

Join For Free

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 and then project. now, it will open new project window.


mvc


you can select asp.net web application on framework 4.6. enter the name of the project in the solution name text box, then click the ok button.

mvc


one more window should appear. select the mvc template in this popup and click the ok button. now, you can start to play.

configure angular knob

we will download angular knob plugin from here .

features

  • it works based on canvas.
  • you can implement keyboard events.
  • you can change ui touches, as well as mouse and mouse wheel events.
  • overloads an input element.

open the _layout.cshtml and 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 name its injection of knob, ui-knob, as shown below:

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

open the html page and set the design of your chart using the knob element and 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 and 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  
        };  

easy pie chart

output 2

mvc


yes, we have one more choice - easy pie chart. download the plugin here .

features

  • highly customizable.
  • resolution independent.
  • works on all the modern devices (even in ie7).

add the easy pie chart plugin _layout.cs to the html.

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

inject as “'easypiechart'” into the angular module.

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

list the html attributes as follows:

<div easypiechart="" options="pieoptions" percent="piepercent1" class="easypie">  

load attribute values in the 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 functions, 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 the 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>  

a side by side comparison

output 3


mvc


note

  • knob “default” pie chart works based on your mouse wheel and mouse click.
  • knob “angle offset and arc” pie chart works based on your mouse wheel, mouse click, and the keyboard itself.

to download source, click here .

conclusion

in this article, we have learned about mvc, using angular pie chart. if you have any queries, please tell me through the comments section , since your comments are very valuable.

happy coding!

Chart AngularJS

Published at DZone with permission of Thiruppathi Rengasamy, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • 6 Things Startups Can Do to Avoid Tech Debt
  • What Is HttpSession in Servlets?
  • Top Six Kubernetes Best Practices for Fleet Management
  • Suspicious Sortings in Unity, ASP.NET Core, and More

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo