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?

Answer 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

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