Charts For ASP.NET MVC Application

Introduction

In this article we will see how to create various charts like Line, Column, Area and Pie for ASP.NET MVC applications. In this article we will use a third party chart control so you will also learn how to use the third party control in ASP.Net MVC application. In my last two articles i.e. Display Graph in ASP.NET MVC and Charts for Asp.Net Application you saw how to prepare the chart/graph for ASP.Net and ASP.Net MVC. Charts for Asp.Net Application here I'm using some third party chart control to prepare the chart for ASP.Net. In this article also I'm using the same chart control with a MVC application. In a normal ASP.Net application all of you are aware of using third party controls in your application but in MVC it is slightly different.

In this article we will create four different kinds of charts as mentioned below.

1. Line Chart
2. Column Chart
3. Pie Chart
4. Area Chart

Step 1 :  For creating these various charts in our application we use the WebChart.dll file so simply download the attachment and add the reference to your project.

Step 2 : Add the controller Home in your project and write the different methods for calling different charts like below.

public ActionResult Index()
       {
             return View();
        }
        public ActionResult Line()
        {
            return View();
        }
        public ActionResult Area()
        {
            return View();
        }
        public ActionResult Pie()
        {
            return View();
        }
        public ActionResult Column()
        {
            return View();
        }

Step 3 : Now add the View for index and keep the Action links for calling different methods in Home controller like below.

 <%=Html.ActionLink("Line Chart","Line") %>
 <%=Html.ActionLink("Area Chart","Area") %>
<%=Html.ActionLink("Pie Chart","Pie") %>
<%=Html.ActionLink("Column Chart","Column") %>

Step 4 : First, on the top of the page, register one tag prefix to refer to the WebChart.dll and import the namespaces i.e. WebChart and System.Drawing like below.

<%@ Register TagPrefix="Web" Namespace="WebChart" Assembly="WebChart" %>
<%@ Import Namespace="WebChart"%>
<%@ Import Namespace="System.Drawing"%> 

Step 5 : In the head section of your view write the following script.

<script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {               
                AreaChart chart = new AreaChart();
                chart.Fill.Color = Color.FromArgb(50, Color.SteelBlue);
                chart.Line.Color = Color.SteelBlue;
                chart.Line.Width = 2;
                chart.Legend = "The Legend What You Want";
                //can pull the values from database             
                chart.Data.Add(new ChartPoint("Vulpes", (float)System.Convert.ToSingle(350)));
                chart.Data.Add(new ChartPoint("SP Nayak", (float)System.Convert.ToSingle(185)));
                chart.Data.Add(new ChartPoint("Krishna", (float)System.Convert.ToSingle(55)));
                chart.Data.Add(new ChartPoint("Datta Kharad", (float)System.Convert.ToSingle(40)));
                chart.Data.Add(new ChartPoint("Jignesh Trivedi", (float)System.Convert.ToSingle(30)));
                chart.Data.Add(new ChartPoint("Prabhu Raja", (float)System.Convert.ToSingle(25)));
                ConfigureColors();
                ChartControl1.Charts.Add(chart);
                ChartControl1.RedrawChart();
            }
        }

        private void ConfigureColors()
        {
            ChartControl1.Background.Color = Color.FromArgb(75, Color.SteelBlue);
            ChartControl1.Background.Type = InteriorType.LinearGradient;
            ChartControl1.Background.ForeColor = Color.SteelBlue;
            ChartControl1.Background.EndPoint = new Point(500, 350);
            ChartControl1.Legend.Position = LegendPosition.Bottom;
            ChartControl1.Legend.Width = 40;
             ChartControl1.YAxisFont.ForeColor = Color.SteelBlue;
           ChartControl1.XAxisFont.ForeColor = Color.SteelBlue;
             ChartControl1.ChartTitle.Text = "C-Sharpcorner Current Months Runner Up";
            ChartControl1.ChartTitle.ForeColor = Color.White;
             ChartControl1.Border.Color = Color.SteelBlue;
            ChartControl1.BorderStyle = BorderStyle.Ridge;
        }
    </script>

In the above code we have populated the chart control by adding chart points. You can add your own chart points. This Webchart.dll provides the different types of charts we discussed above so according to your view make a change in the first line under page load by creating different classes instance of chart type e.g.:

For Area Chart use

AreaChart chart = new AreaChart();

For Line Chart use

LineChart chart = new LineChart();

In the above code you only have to make these changes for creating your own choice chart also you can configure the colors as you need and you can create the points i.e. chart point per your requirement.

Step 6 : Add four views with each chart type by replacing the classes of WebChart. Now run your application and see the results.

Conclusion

It is quite simple to create various types of charts for our ASP.Net MVC applications.