Displaying Charts in ASP.NET MVC

Facebook

Twitter

Digg

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:

Build a Real-world App with ASP.NET Core and Angular

ASP.NET MVC Shopping Store Application with C#, EF and SQL Server

Complete ASP.NET MVC 5 Online Course

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:

<img src="/Chart/CreateChart?chartType=
<%=System.Web.UI.DataVisualization.Charting.SeriesChartType.Column%>" alt="" />

1 2	<img src="/Chart/CreateChart?chartType= <%=System.Web.UI.DataVisualization.Charting.SeriesChartType.Column%>" alt="" />

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:

public FileResult AddChart(SeriesChartType chartType)
{
       IList<ResultModel> students = _resultService.GetResults();
       Chart stdchart = new Chart();
       stdchart.Height = 700;
       stdchart.Width = 600;
       stdchart.BackColor = Color.FromArgb(111, 300, 210);
       stdchart.BorderlineWidth = 1;
       stdchart.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
       stdchart.BorderlineWidth = 1;
       stdchart.BorderlineDashStyle = ChartDashStyle.Solid;
       stdchart.BackSecondaryColor = Color.White;
       stdchart.BackGradientStyle = GradientStyle.TopBottom;
       stdchart.Titles.Add(AddTitle());
       stdchart.Legends.Add(AddLegend());
       stdchart.Series.Add(AddSeries(students,chartType));
       stdchart.ChartAreas.Add(AddChartArea());
       
       MemoryStream stdms = new MemoryStream();
       stdchart.SaveImage(stdms);

       return File(stdms.GetBuffer(), @"image/jpg");
}

public FileResult AddChart(SeriesChartType chartType)

{

IList<ResultModel> students = _resultService.GetResults();

Chart stdchart = new Chart();

stdchart.Height = 700;

stdchart.Width = 600;

stdchart.BackColor = Color.FromArgb(111, 300, 210);

stdchart.BorderlineWidth = 1;

stdchart.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;

stdchart.BorderlineWidth = 1;

stdchart.BorderlineDashStyle = ChartDashStyle.Solid;

stdchart.BackSecondaryColor = Color.White;

stdchart.BackGradientStyle = GradientStyle.TopBottom;

stdchart.Titles.Add(AddTitle());

stdchart.Legends.Add(AddLegend());

stdchart.Series.Add(AddSeries(students,chartType));

stdchart.ChartAreas.Add(AddChartArea());

MemoryStream stdms = new MemoryStream();

stdchart.SaveImage(stdms);

return File(stdms.GetBuffer(), @"image/jpg");

}

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.

public Title AddTitle()
{
     Title charttitle = new Title();

     charttitle.Text = "Student Result";
     charttitle.ShadowColor = Color.FromArgb(22, 10, 0, 0);
     charttitle.Font = new Font("Times New Roman", 15F, FontStyle.Italic);
     charttitle.ShadowOffset = 2;
     charttitle.ForeColor = Color.FromArgb(16, 39, 75);

      return charttitle;
}

public Title AddTitle()

{

Title charttitle = new Title();

charttitle.Text = "Student Result";

charttitle.ShadowColor = Color.FromArgb(22, 10, 0, 0);

charttitle.Font = new Font("Times New Roman", 15F, FontStyle.Italic);

charttitle.ShadowOffset = 2;

charttitle.ForeColor = Color.FromArgb(16, 39, 75);

return charttitle;

}

Code to Create Chart Legend:

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

public Legend AddLegend()
{
     Legend chartlegend = new Legend();

     chartlegend.Name = "Student Result";
     chartlegend.Docking = Docking.Center;
     chartlegend.Alignment = StringAlignment.Bottom;
     chartlegend.BackColor = Color.FromArgb(22, 10, 0, 0);
     chartlegend.Font = new Font(new FontFamily("Times New Roman"), 11);
     chartlegend.LegendStyle = LegendStyle.Column;

     return chartlegend;
}

public Legend AddLegend()

{

Legend chartlegend = new Legend();

chartlegend.Name = "Student Result";

chartlegend.Docking = Docking.Center;

chartlegend.Alignment = StringAlignment.Bottom;

chartlegend.BackColor = Color.FromArgb(22, 10, 0, 0);

chartlegend.Font = new Font(new FontFamily("Times New Roman"), 11);

chartlegend.LegendStyle = LegendStyle.Column;

return chartlegend;

}

Note: Charts and Visualization is very much necessary these days as it helps us to take better decisions very easily. We can better visualize data with Microsoft Excel, Tableau and many more tools. Follow here for a detailed list of tableau training and certification courses.
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.

public Series AddSeries(IList<ResultModel> stdresults, SeriesChartType stdchartType)
{
     Series stdseriesDetail = new Series();

     stdseriesDetail.Name = "Student Result";
     stdseriesDetail.IsValueShownAsLabel = false;
     stdseriesDetail.Color = Color.FromArgb(22, 10, 100, 20);
     stdseriesDetail.ChartType = chartType;
     stdseriesDetail.BorderWidth = 3;

     DataPoint chartpoint;

     foreach (ResultModel chartresult in stdresults)
     {
          chartpoint = new DataPoint();

          chartpoint.AxisLabel = chartresult.ID;
          chartpoint.YValues = new double[] { double.Parse(chartresult.GPA) };

          seriesDetail.Points.Add(chartpoint);
     }
 
     stdseriesDetail.ChartArea = "Result Chart";

     return stdseriesDetail;
}

public Series AddSeries(IList<ResultModel> stdresults, SeriesChartType stdchartType)

{

Series stdseriesDetail = new Series();

stdseriesDetail.Name = "Student Result";

stdseriesDetail.IsValueShownAsLabel = false;

stdseriesDetail.Color = Color.FromArgb(22, 10, 100, 20);

stdseriesDetail.ChartType = chartType;

stdseriesDetail.BorderWidth = 3;

DataPoint chartpoint;

foreach (ResultModel chartresult in stdresults)

{

chartpoint = new DataPoint();

chartpoint.AxisLabel = chartresult.ID;

chartpoint.YValues = new double[] { double.Parse(chartresult.GPA) };

seriesDetail.Points.Add(chartpoint);

}

stdseriesDetail.ChartArea = "Result Chart";

return stdseriesDetail;

}

Top Courses on ASP.NET MVC and related

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.

public ChartArea AddChartArea()
{

    ChartArea newchartArea = new ChartArea();

    newchartArea.Name = "Student Result";
    newchartArea.BackColor = Color.FromArgb(0, 100, 0, 0); ;
    newchartArea.AxisY.IsLabelAutoFit = false;
    newchartArea.AxisX.IsLabelAutoFit = false;
    newchartArea.AxisX.LabelStyle.Font = new Font("Arial,Verdana,Times New Roman,sans-serif", 8F, FontStyle.Regular);
    newchartArea.AxisY.LabelStyle.Font = new Font("Arial, Verdana, Times New Roman, sans-serif", 8F, FontStyle.Regular);
    newchartArea.AxisY.LineColor = Color.FromArgb(44, 34, 24, 60);
    newchartArea.AxisX.LineColor = Color.FromArgb(0, 99, 0, 100);
    newchartArea.AxisX.MajorGrid.LineColor = Color.FromArgb(44, 34, 24, 60);
    newchartArea.AxisY.MajorGrid.LineColor = Color.FromArgb(0, 99, 0, 100);
    newchartArea.AxisX.Interval = 2;

    return newchartArea;
}

public ChartArea AddChartArea()

{

ChartArea newchartArea = new ChartArea();

newchartArea.Name = "Student Result";

newchartArea.BackColor = Color.FromArgb(0, 100, 0, 0); ;

newchartArea.AxisY.IsLabelAutoFit = false;

newchartArea.AxisX.IsLabelAutoFit = false;

newchartArea.AxisX.LabelStyle.Font = new Font("Arial,Verdana,Times New Roman,sans-serif", 8F, FontStyle.Regular);

newchartArea.AxisY.LabelStyle.Font = new Font("Arial, Verdana, Times New Roman, sans-serif", 8F, FontStyle.Regular);

newchartArea.AxisY.LineColor = Color.FromArgb(44, 34, 24, 60);

newchartArea.AxisX.LineColor = Color.FromArgb(0, 99, 0, 100);

newchartArea.AxisX.MajorGrid.LineColor = Color.FromArgb(44, 34, 24, 60);

newchartArea.AxisY.MajorGrid.LineColor = Color.FromArgb(0, 99, 0, 100);

newchartArea.AxisX.Interval = 2;

return newchartArea;

}

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.

Introduction

Using Chart Control in ASP.NET MVC

Top Courses on ASP.NET MVC and related

More You Must Read about ASP.NET MVC & Related

Top 10 Interview Questions and Answers Series:

Most popular ASP.NET MVC and related Online Courses