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 saving the image to disk, allowing it to be created in one script then streamed and deleted from another.
The outer page is "imagemap.cfm". This has three relevant pieces of code. First the component is used to create the chart:
<cfcache action="flush">
<cfobject action="create" name="Chart" class="csDrawGraph.Draw">
<cfset Chart.AddData("Data 1", 10, "ff0000")>
<cfset Chart.AddData("Data 2", 18, "00ff00")>
<cfset Chart.AddData("Data 3", 7, "0000ff")>
<cfset Chart.AddMapArea("url1.htm", "Data 1", "target=_blank")>
<cfset Chart.AddMapArea("url2.htm", "Data 2", "target=_blank")>
<cfset Chart.AddMapArea("url3.htm", "Data 3", "target=_blank")>
<cfset TempName = CreateUUID()>
<cfset TempFile = ExpandPath(".") & "\" & TempName & ".gif">
<cfset Chart.SaveGIFPie(TempFile)>
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. Finally, the chart is produced (as a pie chart) and saved as a temporary file for use in the next script.
The image map itself must be written somewhere inside the HTML body. This is done using the following code:
<cfoutput>#Graph.ImageMapText#</cfoutput>
The image tag needs to point to a script that streams the image:
<img src="chart.cfm?Name=<cfoutput>#TempName#</cfoutput>" width=400 height=300 usemap="#map1" border=0>
The script that streams the image to the browser is called "chart.cfm". The default name of the image map is "map1". Here is a listing of "chart.cfm":
<cfcache action="flush">
<cfset tempfile = ExpandPath(".") & "\" & URL.Name & ".gif">
<cfcontent type="image/gif" deletefile="yes" file=#tempfile#>
This displays the image and deletes the file afterwards. This method of saving a temporary file in one script and deleting it later is not completely reliable and some of the temporary files can get left on the server.
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.