Displaying Charts in ASP.NET MVC

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:Image may be NSFW.
Clik here to view.

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="" />

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");
}

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;
}

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;
}

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;
}

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;
}

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:

• Top 10 HTML5 Interview Questions
• Top 10 ASP.NET Interview Questions
• Comprehensive Series of ASP.NET Interview Questions
• Top 10 ASP.NET MVC Interview Questions
• Top 10 ASP.NET Web API Interview Questions
• Top 10 ASP.NET AJAX Interview Questions
• Top 10 WCF Interview Questions
• Comprehensive Series of WCF Interview Questions
• a Must Have SharePoint Interview Questions
• Top 15 Bootstrap Interview Questions – A MUST HAVE

The post Displaying Charts in ASP.NET MVC appeared first on Web Development Tutorial.