Multiple MS Charts on the same page use the same image map

Question

I'm using the Microsoft Chart control to put a couple of charts on a web page. If you render 2 charts, the resulting HTML is something like this (the table is mine, the img and map are from the MS Chart):

<table id="chart">
    <tr>
        <td id="rolling">
            <img src="/ChartImg.axd?i=chart_45ec7063132a47d9bf08ce377f4d6030_0.png&amp;g=d82064ecb0cf459dbda23039ae0c3f70" alt="" usemap="#ImageMap" style="height:200px;width:250px;border-width:0px;" />
<map name="ImageMap" id="ImageMap">

    <area shape="rect" coords="190,112,242,132" title="$321.01" alt="" />
    <area shape="rect" coords="59,69,111,132" title="$1,017.92" alt="" />
    <area shape="rect" coords="138,104,190,132" title="$449.04" alt="" />
    <area shape="rect" coords="7,25,59,132" title="$1,714.59" alt="" />
</map>
        </td>
        <td id="highrisk">
            <img src="/ChartImg.axd?i=chart_45ec7063132a47d9bf08ce377f4d6030_1.png&amp;g=6f876c9016cd4b72b5ba60609b9d05ec" alt="" usemap="#ImageMap" style="height:200px;width:250px;border-width:0px;" />
<map name="ImageMap" id="ImageMap">

    <area shape="rect" coords="190,128,242,132" title="41" alt="" />
    <area shape="rect" coords="59,131,111,132" title="6" alt="" />
    <area shape="rect" coords="138,25,190,132" title="922" alt="" />
    <area shape="rect" coords="7,121,59,132" title="100" alt="" />
</map>
        </td>
    </tr>
</table>

Note that both charts use the same name for the image map for each chart - "ImageMap" - and it uses the coords from the first chart on the subsequent charts, even though it puts different titles on each element.

Am I doing something wrong in trying to render 2 charts on 1 page? Is there a workaround for this?

Answer 1

I've just hit exactly the same symptoms using ASP.Net 4, MVC 3, the Razor view engine and multiple dynamically generated chart controls on the same page (via multiple partial views).

The solution that I arrived at was to explicitly set the Id values of the different chart controls to be sure that they were different. In my case the relevant code fragment (from inside a view) is

var chart = new System.Web.UI.DataVisualization.Charting.Chart();
chart.ClientIDMode = ClientIDMode.Static;
chart.ID = "Chart" + Guid.NewGuid().ToString("N");

Your code will presumably differ if you're working with a non-MVC aspx page, but I hope this is sufficient to give you a start. The important thing is to be sure that the control Ids are different for the different chart controls on the same page (hence my rather brutal use of Guids).

Take a look at http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx for alternative control ID generation strategies - my example above is not the only way to go.