Explanation of the Image Map Example
Using csDrawGraph 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 temporarily storing the image as a session variable, allowing it to be created in one script and streamed from another.
The outer page is "imagemap.asp". This has three relevant pieces of code. First the component is used to create the chart:
<%
Set Graph = Server.CreateObject("csDrawGraph.Draw")
Graph.AddData "Data 1", 10, "ff0000"
Graph.AddData "Data 2", 18, "00ff00"
Graph.AddData "Data 3", 7, "0000ff"
Graph.AddMapArea "url1.asp", "Data 1", "target=""_blank"""
Graph.AddMapArea "url2.asp", "Data 2", "target=""_blank"""
Graph.AddMapArea "url3.asp", "Data 3", "target=""_blank"""
%>
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. In our code we have had to add extra quotes so that target="_blank" will appear correctly.
The image tag needs to contain the Base64 encoded chart image:
<img src="data:image/gif;base64, <%= Graph.Base64Out(0, 1) %>" width="400" height="300" usemap="#map1" border="0">
The image map itself must be written somewhere inside the HTML body. This is done using the following code, which must be called after creating the chart with Base64Out:
<%
Response.Write Graph.ImageMapText
%>
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 csDrawGraph instructions.
Click Here to return to the example or to download the code.