Click here to Skip to main content
12,894,249 members (63,984 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

18.5K views
9 bookmarked
Posted 28 Jul 2014

Microsoft Chart in MVC Application

, 28 Jul 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
In this tip, we will implement Microsoft chart chart in MVC application

Introduction

Chart and graph are common in almost all business applications. In Web Form, we can use Microsoft’s chart tool to implement various charts which are pretty simple and nice in look but in MVC, how we will implement chart? Probably there are many approaches like you may use JavaScript based chart which deals with JSON data and there are ‘n’ number of JavaScript frameworks which serves charts and graphs. But in this example, we will use Microsoft’s in built chart which is defined within “System.Web.Helpers” namespace. So, let’s create one MVC application and add the below view into it. The view is very simple to understand. It contains just three image element. The Url.Action() is pointing to three different actions which are defined within current controller.

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div> 
        <table>
            <tr>
                <td>
                    <img src="@Url.Action("CreateBar")" alt="Bar Chart using MVC" />
                </td>
                <td>
                    <img src="@Url.Action("CreatePie")" alt="Pie Chart using MVC" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <img src="@Url.Action("CreateLine")" alt="Line Chart using MVC" />
                </td>
            </tr>
        </table>
        

    </div>
</body>
</html>

Now, we have to define the controller and actions to implement chart. Have a look at the below code:

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
using System.Web.SessionState;
using System.Web.Helpers;

namespace Authentication.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult CreateBar()
        {
            //Create bar chart
            var chart = new Chart(width:300,height:200)
            .AddSeries(     chartType: "bar",
                            xValue: new[] { "10 ", "50", "30 ", "70" },
                            yValues: new[] { "50", "70", "90", "110" })
                            .GetBytes("png");
            return File(chart, "image/bytes");
        }

        public ActionResult CreatePie()
        {
            //Create bar chart
            var chart = new Chart(width: 300, height: 200)
            .AddSeries(chartType: "pie",
                            xValue: new[] { "10 ", "50", "30 ", "70" },
                            yValues: new[] { "50", "70", "90", "110" })
                            .GetBytes("png");
            return File(chart, "image/bytes");
        }

        public ActionResult CreateLine()
        {
            //Create bar chart
            var chart = new Chart(width: 600, height: 200)
            .AddSeries(chartType: "line",
                            xValue: new[] { "10 ", "50", "30 ", "70" },
                            yValues: new[] { "50", "70", "90", "110" })
                            .GetBytes("png");
            return File(chart, "image/bytes");
        }

        public ActionResult Index()
        {
            return View("Index");
        }
    }
}

The code is very clear and self explanatory. We have set various parameters of Chart class and calling the AddSeries() method to set value in X and Y axis, then we are setting value “png” as argument of GetBytes() function, so it will return “png” image as chart. At last, we are returning File as return data of action and in output, we will see that three different charts will get created as below:

Border Line

The chart has generated with default setting, in need we can implement our custom look and feel. The chart is very simple and easy to implement compared to various JavaScript based charts and even we can render this chart asynchronously so that it will reduce render time.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Sourav Kayal
Software Developer DELL International
India India
I am software developer from INDIA. Beside my day to day development work, i like to learn new technologies to update myself. I am passionate blogger and author in various technical community including dotnetfunda.com , c-sharpcorner.com and codeproject. My area of interest is modern web technology in Microsoft stack. Visit to my personal blog here.

http://ctrlcvprogrammer.blogspot.in/

You may also be interested in...

Comments and Discussions

 
Generalcool. simple Pin
iceMail13-Feb-15 17:58
membericeMail13-Feb-15 17:58 
GeneralMy vote of 4 Pin
gicalle7529-Jul-14 21:12
membergicalle7529-Jul-14 21:12 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170424.1 | Last Updated 28 Jul 2014
Article Copyright 2014 by Sourav Kayal
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid