Learn MVC Using Angular Flot Chart


In this article, we will learn about working with MVC using the Angular Flot Chart with JSON data. With Flot Chart, we can create the following types of charts.

  • Area Chart
  • Bar Chart
  • Stacked Bar Chart

Area Chart

Output 1


Create MVC Project

Open Visual Studio 2015.

Go to New >> Project. Now it will open “New Project” window.

Select ASP.NET Web Application on Framework 4.6. Enter the name of the project in the “Solution name” textbox and click OK.

One more window should appear. Select MVC Template in this popup and click the OK button.

Configure the jQuery Flot Chart

We will download the Flot plugin from jQuery Flot.

Open the _Layout.cshtml and refer to the jqery.flot.js file below:

Open the HTML page and design it using flot elements and attributes.

Here, we can show and change the visual view of data on a per year basis.

You have the option to change the Flot Chart UI using “Angular Service.”

Set vm[‘default’] as a common declaration, because we are going to use bar charts and stacked bar charts also.

Inject the Angular service function into the Angular controllers, as shown below:

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.

I have used JSON data for this flot chart and the files are given below.

Now, we must link this file to the HTML attribute values.


Here I want to bind JSON data into the flot chart. Therefore, I wrote the “angular directive” as an intermediate.

After completing the entire configuration, add the reference file in the _Layout.CSHTML page

Output 2


Let us talk about bar charts. We will create our bar chart in a similar way to how we configured our area chart.

Load attribute values for the bar chart angular controller files

Set the flot chart series as bars based on the configuration in the “angular service” file.

Call the function in an HTML element based on bar chart types

My JSON Data is given below.

Output 3


Load Attribute values for a stacked bar chart to the angular controller files.

Set the flot chart series as a stacked bar based on the configuration in the “angular service” file.

Assign the function in an HTML element based on the stacked bar chart types.

My JSON Data is given below.

Now you can run the flot chart application in visual studio 2015. The output will appear in the browser.

Output 4



If you click any year in the check box, you can see the actual data representation in this flot chart. Stacked bar charts represent the actual difference in each month.

You can download my source code here.


In this article, we have learned how to use MVC by using the Angular Flot Chart framework. If you have any queries, please tell me through the comments section. Your comments are very valuable.

Happy Coding!

Thiruppathi Rengasamy
I'm a Dotnet Developer & Blogger. And also I'm working as a senior software engineer. I would like to spend my precious time writing articles, research on .Net technologies, and learning new technologies.