Tutorial: Drilldown and Selection of Data Elements
Drilldown and the selection of chart items is accomplished by using a chart image as a hyperlinked server-side imagemap. To use a chart image as a server-side imagemap specify the IsMap attribute inside the relevant <IMG> tag.
Use the following syntax in the ASP page which displays a chart being used as the imagemap: <A HREF="TheAspPageToHandletheSelectedItem.asp"><IMG SRC="MakeTheJpeg.asp IsMap></A>. Note that the specified Asp page in the <A> tag is the page which must determine which series/data element the user selected.
To determine what data series/data element the user selected (clicked on) call the Select method and then examine the returns from the GetSelectedSeries and GetSelectedPosition methods.
Once you have determined what the user selected you can perform the appropriate action, giving you "drilldown" capabilities.
Note that clicking on a server-side imagemap will allow the page handling the selected item to retrieve the mouse coordinates of the clicked-on position since the mouse coordinates are available via the resulting querystring. Use VBSCript's InStr method to parse the querystring and retrieve the mouse X, Y-coordinates. Then use these X and Y values when calling the Select method.
IMPORTANT: the EXACT same chart must be reproduced in the page which handles the selection as compared to the Chart generated by the page specified within the <IMG> tag. Therefore it is highly recommended that you use a server-side include for the source code which actually produces the chart image (starting from the CreateObject call all the way to setting the Chart object to Nothing). This will ensure that the chart produced in the page which handles the selection (using the Select, GetSelectedPosition, and GetSelectedSeries methods) will be exactly the same as the chart produced by the page which outputs the chart jpeg (using the SendJPEG method).
Refer to the sample source code below for further clarification.
If you do not know how to create a template using the Template Creator then click here for instructions on how to do so. This tutorial DOES NOT cover how to make your pie chart templates, it assumes you already have a template ready to be loaded.
Example
Scenario - We will use a pie chart as an imagemap (with 4 pie slices)
in the main page (Main.asp).
- When the user selects an element we will explode the selected element.
- Note that we are using Session-level variables.
- A secondary page named MakeJpeg.asp will create
and output the resulting jpeg to the main page.
- To see if a function call was successful you can examine the returned
error code (zero equals success). To get a relevant error string use
the GetErrorText method.
Main.asp
<%@ Language=VBScript %>
<%Response.Buffer = True %>
<HTML>
<HEAD></HEAD>
<BODY>
<%
Dim QString 'the querystring resulting from the user clicking
' on the Chart server-side imagemap
Dim Position 'the data element the user selected
Dim XPosition 'the mouse X-coordinate where the user clicked
Dim YPosition 'the mouse Y-coordinate wherre the user clicked
Dim ret 'returned error code from function call
Dim objChart 'Dundas Chart Server object
Dim strErrorCode 'string error message
'retrieve the querystring with the mouse coordinates
QString = Request.QueryString()
'initialize the selected position to -1 so that the SetExploded call does not
' initially explode a data element.
Session("Position") = -1
'the following code only executes if the user clicked on a pie slice
If QString <> "" Then
Position = InStr(1,QString,",",1)
XPosition = CInt(Mid(QString,1,Position - 1))
YPosition = CInt(Mid(QString,Position+1))
'create instance of the Chart control
Set objChart = CreateObject("Dundas.ChartServer")
'NOTE: Even though this page does not output a jpeg we MUST
' reproduce the exact same chart which is produced by the page within
' the <IMG> tag. In order to guarentee that the exact same chart is
' reproduced we highly recommend using a server-side include for the
' code which creates the chart (starting from the CreateObject
' call all the way to setting the Chart object to Nothing).
'now set the control's directory properties
objChart.DirTexture = "c:\dschart\dschart_local\Textures\"
objChart.DirTemplate = "c:\dschart\dschart_local\Templates\"
'load a pie chart template made with the Template Creator
'note that a return value of zero indicates success
ret = objChart.LoadTemplate("selection.cuc")
'now add some data to the pie chart
ret = objChart.AddData(3.2)
ret = objChart.AddData(2.8)
ret = objChart.AddData(9.1)
ret = objChart.AddData(4.5)
'now call the Select method so we can determine the selected element
'note that the width and height specified in the Select method call
' should be the same as that specifed in the <IMG> tag found
' at the bottom of this page.
ret = objChart.Select(XPosition,YPosition,300,300)
'lets check return value (useful for debugging)
If ret <> 0 Then
strErrorCode = objChart.GetErrorText(ret)
End If
'NOTE: if you are using a chart other than a sphere or pie chart
' for the imagemap you would then need to call GetSelectedSeries
' as well as calling GetSelectedPosition. If you are using a sphere or pie
' chart and are using the "collected" data element you will still need
' to call GetSelectedSeries in order to determine if the user clicked on
' the collected data slice (return value will be -999).
Position = objChart.GetSelectedPosition()
'this session-level variable lets the MakeJpeg.asp page know what was selected
Session("Position") = Position
'release resources
Set objChart = Nothing
End If
%>
<!--Make the Dundas Chart server-side imagemap -->
<center><a href="Main.asp">
<center><IMG height=300 width=300 src="MakeJpeg.asp" ID=Picture ISMAP></a></center>
</BODY>
</HTML>
MakeJpeg.asp
<%@ Language=VBScript %>
<% Option Explicit %>
<%
'disable caching so that image is always retrieved from server
Response.Buffer = True
Response.CacheControl = "Private"
Response.Expires = -1000
Dim Position 'item selected by the user
Dim ret 'returned error code from function calls
Dim objChart 'Dundas Chart Server instance
Dim strError 'error string
'retrieve the selected element as determined by the main page
Position = Session("Position")
'create an instance of the control
Set objChart = CreateObject("Dundas.ChartServer")
'set up the control's directory properties
objChart.DirTexture = "c:\dschart\dschart_local\Textures\"
objChart.DirTemplate = "c:\dschart\dschart_local\Templates\"
'load the pie chart template, created in the Template Creator
ret = objChart.LoadTemplate("selection.cuc")
'now add data to the pie chart
ret = objChart.AddData(3.2)
ret = objChart.AddData(2.8)
ret = objChart.AddData(9.1)
ret = objChart.AddData(4.5)
'now we will explode the data element selected by the user
objChart.SetExploded(Position)
'now output the chart jpeg. Note that you can step through your code
' and check the strError variable if SendJPEG was unsuccessful
ret = objChart.SendJpeg(300,300)
If ret <> 0 Then
strError=objChart.GetErrorText(ret)
End If
'release resources
Set objChart = Nothing
%>
See Also: Tutorial: Creating a Basic Pie Chart | Tutorial: Rotation