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 sinc

Answer 1

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"); }

Answer 2

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

Answer 3

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