Saturday, 19 August 2017

Draw (Implement) chart in ASP.NET MVC using chart class

In this article, I am going to explain you how to draw or implement chart in ASP.NET MVC using Chart Class (System.Web.Helpers) in C#. Below is the step by step tutorial.

Creating ASP.NET MVC 5 application

First of all create a new asp.net mvc 5 empty project. I am using visual studio 2013.
1) Open visual studio.
2) Go to File → New → Project.
3) Select Visual C# → Web → ASP.NET Web Application.
4) Give project name MVCChartDemo and click on OK as shown below.
Creating asp.net mvc 5 application
A new window will open as shown below. Select Empty Template, check on MVC and click on OK.
Selecting asp.net mvc 5 template

Adding Controller

Next step is to add controller. Add a new controller with name 'Home'. By default Index ActionResult will be generated. Add a new ActionResult method DrawChart as shown below.
Add namespace → System.Web.Helpers to support chart class.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Helpers;
using System.Web.Mvc;

namespace MVCChartDemo.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult DrawChart()
        {
            new Chart(width: 500, height: 350)
            .AddTitle("Mobile Product Chart")
            .AddSeries(chartType: "column",
               xValue: new[] { "Apple", "HTC", "Samsung", "Nokia" },
               yValues: new[] { "50", "60", "80", "30" })
            .Write("png");
            return null;
        }
    }
}

Adding View

Next step is to add View. Right click on Index method and click on Add View. Set View name as Index, set Template as Empty(without model) and click on OK. Add below code to load DrawChart method.
<div style="margin-left:150px;">
    <table>
        <tr>
            <td><img src="@Url.Action("DrawChart")" alt="Draw Chart in ASP.NET MVC" /></td>
        </tr>
    </table>
</div>
Now run your application and you will see the below output as bar chart is generated.
Creating asp.net mvc 5 application
Now to draw Pie Chart set from chartType: "column" to chartType: "pie".
Draw pie chart in asp.net mvc

Applying Themes

Now we will apply various theme to make chart look nicer. To apply theme, change below line of code while creating chart object.
public ActionResult DrawChart()
{
    new Chart(width: 500, height: 350, theme:ChartTheme.Green) // change in-built theme here 
    .AddTitle("Mobile Product Chart")
    .AddSeries(chartType: "column",
       xValue: new[] { "Apple", "HTC", "Samsung", "Nokia" },
       yValues: new[] { "50", "60", "80", "30" })
    .Write("png");
    return null;
}
You can see the below chart after applying theme.
Applying inbuilt theme in chart

Applying Custom Themes

Now we can apply custom theme to chart.
public ActionResult DrawChart()
{
    string Mytheme = @"<Chart BackColor=""#99ffdb"" ForeColor=""Blue"">
                         <ChartAreas>
                            <ChartArea Name=""Default"" BackColor=""#ffedcc""></ChartArea>
                         </ChartAreas>
                       </Chart>";
    new Chart(width: 500, height: 300, theme: Mytheme)
    .AddTitle("Mobile Product Chart")
    .AddSeries(chartType: "column",
      xValue: new[] { "Apple", "HTC", "Samsung", "Nokia" },
      yValues: new[] { "50", "60", "80", "30" })
    .Write("png");
    return null;
}
Applying inbuilt custom theme in chart in mvc
You can customize your theme as per your requirement. Below is the another customize css theme.
public ActionResult DrawChart()
{
    string Mytheme = @"<Chart BackColor=""#D3DFF0"" BackGradientStyle=""TopBottom"" BackSecondaryColor=""White"" BorderColor=""26, 59, 105"" BorderlineDashStyle=""Solid"" BorderWidth=""2"" Palette=""None"" 
    PaletteCustomColors=""97,97,97; 209,98,96; 168,203,104; 142,116,178; 93,186,215; 255,155,83; 148,172,215; 217,148,147; 189,213,151; 173,158,196; 145,201,221; 255,180,138"">
      <ChartAreas>
          <ChartArea Name=""Default"" _Template_=""All"" BackColor=""64, 165, 191, 228"" BackGradientStyle=""TopBottom"" BackSecondaryColor=""White"" BorderColor=""64, 64, 64, 64"" BorderDashStyle=""Solid"" ShadowColor=""Transparent"" /> 
      </ChartAreas>
      <Legends>
          <Legend _Template_=""All"" BackColor=""Transparent"" Font=""Trebuchet MS, 8.25pt, style=Bold"" IsTextAutoFit=""False"" /> 
      </Legends>
      <BorderSkin SkinStyle=""Emboss"" /> 
    </Chart>";
    new Chart(width: 500, height: 300, theme: Mytheme)
    .AddTitle("Mobile Product Chart")
    .AddSeries(chartType: "column",
      xValue: new[] { "Apple", "HTC", "Samsung", "Nokia" },
      yValues: new[] { "50", "60", "80", "30" })
    .Write("png");
    return null;
}
Below is the output.
Applying inbuilt custom theme 2 in chart in mvc
Below is the another way to return chart from controller to view.
public ActionResult DrawChart()
{
    var chart = new Chart(width: 500, height: 350)
           .AddTitle("Mobile Product List")
           .AddSeries(chartType: "column",
             xValue: new[] { "Apple", "HTC", "Samsung", "Nokia" },
             yValues: new[] { "50", "60", "80", "30" })
           .GetBytes("png");
    return File(chart, "image/bytes");
}
Share:

2 comments:

  1. Very nice article. Really its very helpfull

    ReplyDelete
    Replies
    1. Thanks Sharad Vishwakarma.
      Please keep visiting and sharing.

      Delete

Email Subscription

Subscribe to our newsletter to get the latest articles directly into your inbox

Blog Archive

BUY FROM AMAZON