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?

score 15 · Accepted Answer · answered Feb 28 '11 at 02:35

15

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

answered Feb 28 '11 at 02:35

Sarath

2,719
1
31
39

Looks very promising, exactly what I was looking for! I'll mark this as an answer for now and get back if I run into any problems later. Thanks! – Victor Mar 01 '11 at 10:13
Excellent! With a little tweak, got it to work with MVC3 as well. THANKS! – Farhan Ahmed Mar 13 '13 at 11:50

smirne · Answer 2 · 2012-09-23T04:40:03.463

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

Can you post the code from the example in your link into you answer? — , Sep 21 '12 at 14:28

Martin Buberl · Answer 3 · 2011-02-06T01:21:21.153

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

edited Feb 06 '11 at 01:21

answered Feb 04 '11 at 17:45

Martin Buberl

45,844
25
100
144

Thanks, unfortunately that solution is an example of "the easy way", meaning that they use a simple which means no interactivity. More details here: http://www.4guysfromrolla.com/articles/081909-1.aspx - they call it "Binary Streaming", I basically want one of the other two to be able to have for example tooltips showing the value of each data-point. – Victor Feb 05 '11 at 20:11
@Victor: I see your point and made an update to my answer. Hope that helps. – Martin Buberl Feb 06 '11 at 01:23
Thanks, that is much more along the lines of what i'm looking for. I can make it work in VS 2010 when compiling for .net 3.5 and the 3.5 charting controls, however i still cant convert it to use the updated versions (Razor or not). I can convert it to make it compile, but I still get a lot of null reference exceptions when running. Thanks for the update though, I'll mark it as the answer unless noone has a link to a more up-to-date solution. – Victor Feb 07 '11 at 13:07

Microsoft Charting, MVC 3 and Razor

3 Answers3

Linked