Combining ASP.NET MVC and ASP.NET Charting Controls

As ScottGu recently posted on his blog, Microsoft have recently released a set of charting components. Several people followed up with comments on his post asking whether it was possible to use them with ASP.NET MVC. The good news is that it certainly is, if you are using ASP.NET as the View engine (the default). And there's actually relatively little that you have to do. This post outlines the steps you'll need to take to get it up and running.

You'll need to first add the references to the appropriate assemblies (System.Web.DataVisualization and System.Web.DataVisualization.Design if you want design support). You also need to add a couple of lines to your Web.Config file. In the <controls> section, you will need to add:

   1: <add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting" assembly="System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
   2: 

You'll also need to add a new line to the httpHandlers section:

   1: <add path="ChartImg.axd" verb="GET,HEAD" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
   2: 

It's then pretty much simplicity itself to add a chart to a view page - you just drop it on as a server control exactly as in the examples in the sample project linked for Scott's post. You'll obviously need to call the code to insert the DataPoint objects into an appropriate Series, and this will probably lead to a few lines of code in the code behind file, but given that the data-transfer objects between the controller and the view are generally reasonably well structured, this code should be both readable, and fairly short, so I don't think that it's really a problem.

I think the best approach if you are interested in doing this is to simply have a go and see how it gets on. I think it's a nice simple solution myself and certainly doesn't represent a great deal of overhead to get the result out.

19 Comments

  • Great post! Any chance you could throw together a small demo MVC .sln for download that already has this working for one chart?

  • Hi Melvyn,

    does it mean that we can use any ASP.NET controls when we are using aspx view engine?

    it certainly is no complicated to do so I wonder what "mess" will I produce once I start using these controls with MVC projects...

    thanks

  • @nefajciar

    You certainly can use ASP.NET server controls, but since you've got no ViewState, many of them won't behave in quite the manner you might naively expect. Look at them in a classic ASP.NET project with ViewState turned off and you'll see what you would get. Of course, you're sacrificing a lot of the benefits of MVC (clean control of HTML), but I think something like the charting components is a good example of where you might choose to take that hit.

  • I should also have pointed out that as you normally won't have a form with runat="server", the postback mechanism won't work, so lots of server controls also won't work quite as you expect. For example Button.

  • I see, thanks for the answers...

    at least MVC architecture isn't so lost and with a little though there might appear nice controls in the future...

    of course, we don't need controls for everything (button, listbox, textbox etc etc) but something like Captcha or Charts is nice to have in a simple form...

  • @nefajciar,

    I think charts and captcha are two rather different cases. Charts are almost entirely confined to the View, so you can quite easily justify a 'pre-packaged' control that you can use to display. A captcha is going to require server-side logic in order to work though, so you are going to need some code in the Controller layer to handle it. You can still have a pre-packaged control for it, but it's going to need to be split out into two parts, and possibly two assemblies. If there's interest, I might work up an example in a post?

  • For IIS7, the handler needs to be configured as

  • Hi!

    As an alternative to the "few lines of code in the code behind file" or inline populating, you could implement a DataSourceControl that reads data from ViewData:
    http://forums.asp.net/p/1257598/3316212.aspx

    This way it's possible to use server controls as they're normally used (if you decide to use server controls).

  • hi

    I have implemented charts using "System.Web.UI.DataVisualization.Charting.Chart" in MVC pattern. i want navigaion links on the top of series with x,y values.

    can any one help me out how to rectify this problem.

    Regards,
    Madhavi

  • I noticed that no image map is generated when rendering the Chart in an MVC page. Has anyone found a workaround? Would like to map hyperlinks to the image map (as opposed to postbacks).

  • Nice article ..

    can you post a full example of interaction with the controllers?

    regards
    Paulo Aboim Pinto

  • Clean control of HTML isn't a benefit of MVC, its from not using server controls. No where in the MVC pattern will you find anything that specifies how your view is rendered. MVC is the pattern of separating the concerns of your application between data access (model), application flow and business logic (control), and presentation (view). Whether the view is rendered with straight HTML, server controls or even Silverlight is irrevelant to the MVC pattern.

    Also it should be noted that server controls won't work unexpectedly without the runat=server tag, they wont' work at all. A server form is required for any server control, but this doesn't affect the MVC pattern.

    Don't these charts support drill down? Is there a way to get the chart to render this as links to action methods or does it generate a postback you have to deal with?

  • @jbailey,

    Yes, you're quite right about the MVC pattern and the nature of its HTML output. I guess I was more making a comment regarding WebForms vs ASP.NET MVC - the former tends (through WebControls) to force you towards rather mucky HTML, whereas the latter allows you (if you so choose!) to write much cleaner HTML. Of course you're still free to write utter rubbish if you so want!

    I don't know off hand whether the charts support drill down or not. If they do, it won't be supported with the example above due to the lack of a form runat server. Since the chart controls weren't written taking account of ASP.NET MVC, there's no built in support for it.

  • Hi,
    I want to display chart control inside the user control (ascx) page. In aspx page, it works perfect, but it gives error when I use the chart control inside ascx page. Can anybody tell me solution for that?

    Thanks,
    anuana

  • I have a Asp chart in my application, some of the values of the points plotted are falling on the Y axis. Is there any property that can be set to move the values from falling on Y axis.

  • I am using MS chart in my MVC application. I am not able to get the tooltip functionality to work. is this a limitation of MVC because the tag is rendered as an img. is it not possible to get tootip and drilldown capabilities when MS chart is used in MVC application I know that in webform it is rendered as a map tag.

    Response is urgently needed.

    Regards

  • Like mike, I am trying to use MVC3 with Razor and the Chart control. I want to be able to click on a pie segment and go to another page.
    All the examples are either not MVC, or use an
    So how do I set an image map? Or is there another technique.
    The Web helper just does not seem to have anything available.
    I am struggling to believe that the clever guys at MS just left out such a useful function.

    Help!

  • Thanks for the asp information!

  • Hi,

    I am also wondering how to implement the RangeBarChart control in MVC 3. I do not know how to give two Y-values for an X-value. Below is the link of an image for my output where the bar chart changes based on the selected value of a dropdown.

    www.dotnetspider.com/.../285038-261852-photo.JPG

    Thanks!

Comments have been disabled for this content.