New asp.net charting controls - will they work with MVC (eventually)?

Solution 1:

You can use the chart controls in two ways:

Generating the Image from a Controller

By generating the chart and returning it as an image from an action (as Chatuman is referring to I think):

Chart chart = new Chart();
chart.BackColor = Color.Transparent;
chart.Width = Unit.Pixel(250);
chart.Height = Unit.Pixel(100);

Series series1 = new Series("Series1");
series1.ChartArea = "ca1";
series1.ChartType = SeriesChartType.Pie;
series1.Font = new Font("Verdana", 8.25f, FontStyle.Regular);
series1.Points.Add(new DataPoint { 
                AxisLabel = "Value1", YValues = new double[] { value1 } });
series1.Points.Add(new DataPoint {
                AxisLabel = "Value2", YValues = new double[] { value2 } });
chart.Series.Add(series1);

ChartArea ca1 = new ChartArea("ca1");
ca1.BackColor = Color.Transparent;
chart.ChartAreas.Add(ca1);

using (var ms = new MemoryStream())
{
    chart.SaveImage(ms, ChartImageFormat.Png);
    ms.Seek(0, SeekOrigin.Begin);

    return File(ms.ToArray(), "image/png", "mychart.png");
}

WebForms Style

This way you just include the chart in your .aspx views (just like with traditional web forms). For this you'll have to hook up the relevant bits in your web.config

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

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

<handlers>
    ...
    <add name="ChartImageHandler"
         preCondition="integratedMode" 
         verb="GET,HEAD"
         path="ChartImg.axd"
         type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</handlers>

You can't run code inside the DataPoint elements when building the chart, so to hook up your data you'll need a method in the View class. This works ok for me. Working this way makes the control render a URL to an image generated by the chart control http handler. In your deployment you'll need to provide a writable folder for it to cache the images.

* VS 2010 / .NET 4 Support *

To get this working in .NET 4 you need to change the chart references to version 4.0.0.0 with the appropriate public key token.

Also it seems that the chart control now generates urls to the current request path rather than the request route. For me this meant that all the chart requests resulted in 404 errors because /{Controller}/ChartImg.axd and equivalents were blocked by routes. To fix this I added extra IgnoreRoute calls that cover my usages - a more general solution would be better:

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("ChartImg.axd/{*pathInfo}");
    routes.IgnoreRoute("{controller}/ChartImg.axd/{*pathInfo}");
    routes.IgnoreRoute("{controller}/{action}/ChartImg.axd/{*pathInfo}");
...

Solution 2:

For folks who want to use charting control with MVC 3 using Razor engine see the following link

How to use MS Charts with MVC3 with Razor

Solution 3:

You can already use them with MVC all you have to do is render them as images

Solution 4:

Make a Usercontrol instead and give it the full Chart object and let it render it self:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.Web.UI.DataVisualization.Charting.Chart>" %>
<%
    Model.Page = this.Page;
    var writer = new HtmlTextWriter(Page.Response.Output);
    Model.RenderControl(writer);
%>

name it Chart.ascx and put it in your Shared view folder.

now you will get all extra html, like image map etc. for free.. as well as caching.

in your Controller:

public ActionResult Chart(){
 var c = new Chart();
 //...
 return View(c);
}

in your View:

<% Html.RenderPartial("Chart", Model); %>