Explanation of the Image Map Example

Using csASPNetGraph to dynamically generate an image map requires a different approach from the usual method of producing a graph. Normally the component is called from a script embedded in an <img> tag. This script generates the binary data stream that is the graph image. The image map is HTML and must go in the outer page. The image still needs to come from a separate file included in the <img> tag. The example solves this by writing the image to a file and linking to it directly.

The script has three relevant pieces of code. First the component is used to create the chart:

<%
Dim Graph As New GraphClass
Graph.AddData("Data 1", 10, "ff0000")
Graph.AddData("Data 2", 18, "00ff00")
Graph.AddData("Data 3", 7, "0000ff")
Graph.AddMapArea("url1.aspx", "Data 1", "target=_blank")
Graph.AddMapArea("url2.aspx", "Data 2", "target=_blank")
Graph.AddMapArea("url3.aspx", "Data 3", "target=_blank")
Graph.GraphType = 0
Graph.GraphToFile(Server.MapPath("im.gif"))
%>

Three data items are added, just using fixed values for this example. Then the AddMapArea method is called three times (once for each data item). The first two parameters for this method are the URL and the help string (the title attribute of the <area> tag). Whatever is assigned to the third parameter will be added inside the <area> tag immediately before the closing bracket. This allows you to set such things as target and style attributes or a Javascript mouseover. If it is not required a pair of empty quotes must be used. The GraphType property is set to 0 for a pie chart. Finally, the chart is produced and saved to disk. The Internet Guest User Acount must have Modify permission on the appropriate directory to create and overewrite the file.

The image map itself must be written somewhere inside the HTML body. This is done using the following code:

<%
Response.Write(Graph.ImageMapText)
%>

The image tag needs to point to the image that was created earlier:

There are some other features of image maps not used in this example. The SetImageMapParams method can be used to specify the name of the image map. This method also takes three Boolean parameters that control which parts of the image will be used as hotspots. These are the data area (the pie chart sector or bar chart bar), the label next to the data area and the entries in the legend. The property ImageMapExtra can be set to add some HTML code immediately before the </map> tag. This could be used for creating additional <area> tags or setting a default action. These properties and methods are documented in the csASPNetGraph instructions.

Click Here to return to the example or to download the code.