Explanation of the Second 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. To avoid problems caused by multiple users saving to the same image file, a count variable is held in an Application variable, and this value is used for the file name. The count resets at 10 so only 10 temporary image files are used, and the temporary files do not need to be deleted.
The script has three relevant pieces of code. First the component is used to create the chart:
<%
Dim ImageCount As Integer
ImageCount = Application.Get("ImageCount")
If ImageCount = 9 Then
ImageCount = 0
Else
ImageCount = ImageCount + 1
End If
Application.Set("ImageCount", ImageCount)
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(ImageCount.ToString & "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 Account must have Modify permission on the appropriate directory to create and overwrite the file.
The variable ImageCount is used for the file name of the GIF image, and this value is stored in an Application variable so that it can be shared by other users of the application. In this example the images are all identical, so it is not relevant, but if the graphs were unique to each user it would be important to ensure that different users are writing to the same file. This method creates a new image for each user, until the count reaches 9 and resets. For a busy web page, a larger value could be used. To keep the site tidy it would be better to put these temporary images into a folder of their own.
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:
<img src="<%= ImageCount %>.gif" width="400" height="300" usemap="#map1" border=0>
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.