Microsoft Charting, MVC 3 and Razor

Question

Related to This topic I wonder if anyone has made the Microsoft Charting library working with Asp MVC 3 and Razor.

I know about the new chart helper introduced, but since that is very limited that is not really an option.

To create an action method that returns an image is also easy enough, but since all interactivity breaks down (even just simple tooltips for the bars in a bar chart) this method has several limitations.

This example is probably the most helpful article I have found, but I still cant get a single easy chart working even though it does work when rendering the image only in an action method. Also I have got the samples working fine under .net 4, but obviously those arent MVC samples.

SO - has anyone got Microsoft charting working fully in Asp MVC 3 with Razor and could post a link to a complete solution?

Solution 1

If it is tool tip and drill down you are looking for then here is a sample. I tried and worked as a charm for me. You need to have ImageMap linked with your image to have interactivity.

MVC Charts with Interactivity

Solution 2

I spent a few days looking for a solution that creates interactive charts in MVC, but all the examples I've seen were way more complicated than they have to be.

The answer from Sarath is almost perfect, but it saves the image twice which is not very efficient. With the function Html.RenderAction() we can get everything done in one pass and make it as efficient as it can be.

Here's the solution I came up with:

http://blog.smirne.com/2012/09/creating-interactive-charts-with-aspnet.html

I haven't seen any solution that can do everything in one pass. The best part of this is that it doesn't need any modifications to the web.config file. It also doesn't try to use an ASP.net control in MVC. It's pure MVC technology.

UPDATE

Here's code as requested:

CONTROLLER:

public ActionResult Chart()
{
    var chart = buildChart();
    StringBuilder result = new StringBuilder();
    result.Append(getChartImage(chart));
    result.Append(chart.GetHtmlImageMap("ImageMap"));
    return Content(result.ToString());
}

Utility Functions:

private Chart buildChart()
{
    // Build Chart
    var chart = new Chart();

    // Create chart here
    chart.Titles.Add(CreateTitle());
    chart.Legends.Add(CreateLegend());
    chart.ChartAreas.Add(CreateChartArea());
    chart.Series.Add(CreateSeries());

    return chart;
}

private string getChartImage(Chart chart)
{
    using (var stream = new MemoryStream())
    {
       string img = "<img src='data:image/png;base64,{0}' alt='' usemap='#ImageMap'>";
       chart.SaveImage(stream, ChartImageFormat.Png);
       string encoded = Convert.ToBase64String(stream.ToArray());
       return String.Format(img, encoded);
    }
}

VIEW:

@{ Html.RenderAction("Chart"); }

Solution 3

Here would be a complete solution on CodeProject using ASP.NET MVC 2 and the Microsoft Charting Controls:

• ASP.NET MVC Chart Control

That's probably as good as it gets at the moment (at least I couldn't find anything that fits your requirements better), because ASP.NET MVC 3 ist still just RTM and so is the razor view engine. Anyhow, to migrate it from ASP.NET MVC 2 to 3 is not a big deal. Switching the view engine to razor would be a little bit more of an effort, but the overall concept stays the same.

I'd say "go for it" and when you face a concrete problem or have a question, ask it here.

Update

This blog post from Robert Muehsig covers the topic as well and does have a downloadable solution. Based on your comment it looks more like what you actually want to accomplish:

• HowTo: Use the new ASP.NET Chart Controls with ASP.NET MVC