Displaying Charts in ASP.NET MVC

By | November 23, 2016
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInDigg thisPin on Pinterest

Introduction

ASP.NET MVC allows very easy integration with Chart controls. ASP.NET contains a very powerful Chart control that provides a large set of chart options including bar, spine, columns, pie, pyramid, area and many more. It contains many elements that are accessible through the Chart control API. The major components of chart control are shown in the diagram below:Charts in ASP.NET MVC

Using Chart Control in ASP.NET MVC

Let’s create a sample application to show the use of chart control in Asp.Net MVC. We will create a project that shows the comparison of result in a class. To represent result of a particular student, we will use two fields- studentID and studentGrade.  We can easily modify the results and display the changes dynamically using Chart control.

As a first step, add a reference to the System.Web.UI.DataVisualization assembly. Restore the backup of database or execute script in database folder.

Now, chart control can be added to the View Page as shown below:

The above piece of code calls AddChart action with parameter Chart Type on Chart controller. Chart type parameters represents the type of chart. SeriesChartType represents an enumerator contained in the System.Web.UI.Charting namespace.

The code for action method AddChart in controller is shown below:

Chart class has many properties used to represent height, background color, border and many more. The main characteristics for any chart includes tile, ChartArea, legend and series.

Code to Create Chart Title:

The code below is used to create the title of chart. Text property is used to represent a title as shown below. In order to create multiple titles, add whatever is needed multiple times.

Code to Create Chart Legend:

The code below is used to modify the legend. It is similar as that of creating a title.

Code to Create Chart Series:

A datapoint is used to determine x and y elements of a chart control. Here we are using stdresults collection to get these values. Every value pair is added to the series chartPoints collection. There can be multiple series in a chart area and it is important to note which chart series is contained in which chart area. Similar to title and legend, we can change the look of series with different properties.

  • Learn ASP NET MVC 5 step by step [Maruti Makwana, Corporate Trainer] 28 Lectures, 2.5 Hours Video, Intermediate Level
    Very easy to learn video series on Asp.Net MVC 5 Specially for those who are familiar with Asp.Net Web forms.
  • AngularJS for ASP.NET MVC Developers [Brett Romero] 10 Lectures, 1 hour video, Intermediate Level
    The Fastest Way For .NET Developers To Add AngularJS To Their Resume
  • ASP.NET with Entity Framework from Scratch
    [Manzoor Ahmad, MCPD | MCT] 77 Lectures, 10 hour video, All Level
    Latest approach of web application development
  • Comprehensive ASP.NET MVC [3D BUZZ] 34 lectures, 14 Hours Video, All Levels
    From zero knowledge of ASP.NET to deploying a complete project to production.

Code to Create Chart Area:

A chart contains many chart areas and a chart area is composed of multiple titles, series. A series contains multiple legends. It is possible to represent many chart series in same chart area or many chart areas in same chart.

The below code allows us to change different attributes of chart area including label style, axis label interval, color, font etc.  3D style can also be enabled here.

Author Bio:

Aaron Jacobson is a web developer working at Technoligent – asp.net development services. You can contact her in order to hire senior developers to avail the highly Java programming and web service. He has several years of experience in the field of web development.

Top 10 Interview Questions and Answers Series:

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInDigg thisPin on Pinterest