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

Open the Angular module and name its injection of Knob, ui-knob, as shown below:

Open the HTML page and set the design of your chart using the knob element and attribute.

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.

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.

Inject as “’easypiechart’” into the Angular module.

List the HTML attributes as follows:

Load Attribute values in the Angular Controller files.

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

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

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 sectionsince your comments are very valuable.

Happy Coding!

Author Profile

Thiruppathi Rengasamy
I 'm a .Net Developer & Blogger. And also I'm working as senior software engineer in Microsoft Technologies for 5+ Years.I would like to spend my precious time in writing articles, research in .Net technologies and to learn new technologies. I have been awarded as C# Corner MVP & DZone MVB.
Show Buttons
Hide Buttons