Geeks With Blogs

Doug.Instance Improving the world one post at a time

I have seen several posts on how to use the ASP.Net chart controls with MVC and they all involved some sort of hybrid web forms approach.  I have a simple solution which is 100% MVC.  Here is a summary of the process:

  • Create an action to render the chart.
  • Create an action to render the image map.
  • Use a normal IMG tag to render the chart image.
  • Use Html.RenderAction to render the image map.

The most simple implementation without drill-down would look something like this:

public ActionResult Chart(int? id)
{
    Chart chart = new Chart();

    // Get data for id and add chart area, series, points, etc. to chart

    MemoryStream ms = new MemoryStream();
    chart.SaveImage(ms, ChartImageFormat.Png);
    return File(ms.ToArray(), "image/png");
}

Then in your view you would do something like this:

<img src="<%= Url.Action("Chart", new { id = Model.Id }) %>" />

That takes care of the chart, but what about drill-down?  To render a chart with drill-down you will need to render both the image tag and the image map in your view.  This means that you need to use the same chart two times:  once to render the map and then to render the image.  If the chart is simple, you can call the code to create the chart twice, but a more robust solution is to cache the chart.

One important note on GetHtmlImageMap:  You MUST call Chart.SaveImage prior to calling Chart.GetHtmlImageMap as indicated in the MSDN reference for the chart control.

Here is the code to create the image map and cache the chart:

public ActionResult ChartMap(int? id, string name)
{
    Chart chart = new Chart();

    // Get data for id and add chart area, series, points, etc. to chart
    // Make sure to use Url.Action for any drill-down URLs

    MemoryStream ms = new MemoryStream();
    chart.SaveImage(ms, ChartImageFormat.Png);
    Session["Chart"] = ms.ToArray();

    return Content(chart.GetHtmlImageMap(name));
}

Then the code to render the cached chart becomes as follows:

public ActionResult Chart(int? id)
{
    byte[] data = Session["Chart"] as byte[];
    return File(data, "img/png");
}

Then this is the code for your view:

        <img src="<%= Url.Action("Chart", new { id = Model.Id }) %>" usemap="#MyMap" />
        <% Html.RenderAction("ChartMap", new { id = Model.Id, name = "MyMap" }); %>

In a future post, I will outline using a HTML Helper extension to simplify this.

Posted on Sunday, January 23, 2011 10:19 PM MVC | Back to top


Comments on this post: Charts in ASP.Net MVC 2 With Drill-Down!

# re: Charts in ASP.Net MVC 2 With Drill-Down!
Requesting Gravatar...
Doug,

Just want to say Thank You for this post.

Now I have an image map and tooltips.

Keep these great posts coming. You make the difference! :D
Left by Leniel Macaferi on May 11, 2011 10:14 AM

# re: Charts in ASP.Net MVC 2 With Drill-Down!
Requesting Gravatar...
This is the best post for Chart Tooltip.

Bang on target.

Thanks Doug.
Left by MM on Sep 08, 2011 4:16 AM

# re: Charts in ASP.Net MVC 2 With Drill-Down!
Requesting Gravatar...
Thanks Doug, been looking at solving this problem for the best part of a day. 1 thing to note that with mvc 3 and razor views replace the Html.RenderAction with Html.Action

BIG BIG THANKS though
Left by Eds on Dec 07, 2011 6:34 PM

# re: Charts in ASP.Net MVC 2 With Drill-Down!
Requesting Gravatar...
Thanks for this post this really helped!
Left by Philip on Dec 30, 2011 2:02 PM

# re: Charts in ASP.Net MVC 2 With Drill-Down!
Requesting Gravatar...
hi tell me code for how to create chart using xml data
Left by jankai on Jan 04, 2012 11:53 PM

# re: Charts in ASP.Net MVC 2 With Drill-Down!
Requesting Gravatar...
If you are trying to load the format of the chart from XML, look at this method: http://msdn.microsoft.com/en-us/library/dd467285.aspx. Of you want to plot Data from an XML source on you chart, just search for "Microsoft chart asp XML" and you will find many examples.
Left by Doug on Jan 06, 2012 2:45 PM

# re: Charts in ASP.Net MVC 2 With Drill-Down!
Requesting Gravatar...
Thanks for your post. Using charts using MVC is getting really complicated and we are not getting any help from MS either. I like your sugestion a lot, I might still use google charts but yours is an excellent option to keep in mind.
Left by Chris @ Social Marketing on Jan 24, 2012 3:39 PM

# re: Charts in ASP.Net MVC 2 With Drill-Down!
Requesting Gravatar...
Thank you for the post, it works great! Now I have a requirement where when I change a date the chart needs to refresh with different data. How do I do that?

Thanks.
Left by Rama on Mar 14, 2012 3:13 PM

# re: Charts in ASP.Net MVC 2 With Drill-Down!
Requesting Gravatar...
Use Ajax.BeginForm to create a form to pass in the date. Then create a partial view to render the img tag for the chart and return that from the controller action of the form. You will need to add parameter(s) to your controller action that creates the chart to pass in the dates.
Left by Doug on Mar 14, 2012 4:13 PM

# re: Charts in ASP.Net MVC 2 With Drill-Down!
Requesting Gravatar...
hi this post is great, i have created a report with Tooltip in MVC2.0 but now i want to create a drill-down report as on click on pie chart part it should call same pichart & just explode the part of pie chart how to do that please help
Left by krunal on Apr 10, 2012 5:49 AM

# re: Charts in ASP.Net MVC 2 With Drill-Down!
Requesting Gravatar...
This post is great - I'm using MVC3 and this really saved me a lot of time and frustration.

Thank You Doug!
Left by Andy on Jun 20, 2012 11:18 AM

# re: Charts in ASP.Net MVC 2 With Drill-Down!
Requesting Gravatar...
ShieldUI provides a very powerful and highly customizable Charting Framework, with pure JavaScript, ASP.NET, ASP.NET MVC and Java Apache Wicket components.

Check the demos at: https://demos.shieldui.com, and the company website: http://www.shieldui.com for more info.
Left by Dave on Aug 05, 2013 7:26 AM

# re: Charts in ASP.Net MVC 2 With Drill-Down!
Requesting Gravatar...
Hi, first of all thanks a lot for this post, it's been really helpful. However, I was wondering if you could please elaborate on the comment about using Url.Action? For example, if I use the above code and add points like series.Points.AddXY("A", 1);, and I want that points column in the chart to redirect to a function in the same controller MyFunction(string letter, int number), how could I set that up? Thanks!
Left by J on Sep 15, 2015 2:42 PM

# re: Charts in ASP.Net MVC 2 With Drill-Down!
Requesting Gravatar...
Are all charts from this list supported?
https://demos.shieldui.com/mvc/all-charts
Left by Alexandra on Aug 01, 2016 1:30 AM

# re: Charts in ASP.Net MVC 2 With Drill-Down!
Requesting Gravatar...
There's a very good ASP.net suite by ShieldUI that I have a fantastic experience with and it is a very good solution for everything related to ASP.net and that's what I use. It is described on https://www.shieldui.com/products/aspnet
Left by Apostol Apostolov on Aug 31, 2016 2:20 AM

# re: Charts in ASP.Net MVC 2 With Drill-Down!
Requesting Gravatar...
Very very useful article...
Thank you very much for your post and help..

Appreciate your work.. keep it up

Thanks
Left by Amit P on Sep 15, 2016 5:44 AM

# re: Charts in ASP.Net MVC 2 With Drill-Down!
Requesting Gravatar...
Thank you very much sir!. Couldn't have done it correctly without your post. God Bless.
Left by Nico on Dec 01, 2016 12:18 PM

# re: Charts in ASP.Net MVC 2 With Drill-Down!
Requesting Gravatar...
I now got the series tooltip functionality to work via ImageMap based on the article above. However, chart.tooltip doesn't work. I don't know why only the series.tooltip works but not the chart control tooltip.
Left by Nico on Dec 02, 2016 2:42 PM

# re: Charts in ASP.Net MVC 2 With Drill-Down!
Requesting Gravatar...
HI,
Iam very new to the MVC . please share the source project . It really helpful to me. Thanks.
Left by sivaraj on Dec 09, 2016 2:14 AM

# re: Charts in ASP.Net MVC 2 With Drill-Down!
Requesting Gravatar...
As i was looking for the same drilldown chart in MVC i just ended up here. I hope it will help me to complete the chart. Thanks in advance
Left by bijo on Dec 29, 2016 8:27 AM

Your comment:
 (will show your gravatar)


Copyright © Doug Lampe | Powered by: GeeksWithBlogs.net