|
Interactive and Special Effects | PopChart Server User Guide 4.0.5 |
Using PopChart Server's drill-down capabilities, you can associate URL links or JavaScript functions with data items in your PopChart image. This functionality is referred to as drill-down because it is most often used to allow a user to navigate from PopChart image to PopChart image. The user can click on a data item such as a bar or pie wedge in a graph on one web page and be brought to a graph on a different web page that expands upon the data item.
For example, suppose a PopChart image on your web site contains a graph that represents the annual sales for each product that your company offers. Each bar in that graph contains a link to another web page on your site with a PopChart image that breaks down the sales for the corresponding product. The user can access the link, view the more detailed information, and return back to the original graph.
Note: Drill-down is supported in GIF and PNG images via image maps. There are several unfortunate consequences of this. First of all, you cannot use drill-down effects in GIF or PNG images without the PopChart Embedder. Also, feedback for drill-down effects in GIF and PNG images is limited to the mouse pointer changing into a hand.
For an example of drill-down in action, see the drill-down example in the Dynamic HTML version of the PopChart Examples book.
Like PopUp Text or Notes, you can associate drill-down effects with individual data items.
To enable a data item for drill-down effects in PCScript, use the graph. DDEnable() method. The first parameter of the graph. DDEnable() command is the name or number of the category. The second parameter is the name or number of the series. The third parameter is either a URL or a JavaScript function call. An optional fourth parameter is the name of the target in the web page.
For example, if you wanted users to drill-down to the website http://mycompany.com whenever they clicked on the data item in category number one and series number two, you would use the following PCScript command:
Graph.DDEnable(1,2,http://mycompany.com)
If you know what the category and series are named, you could refer to them instead. For example, you could have the data item in the Boston series and the Departures category drill-down to http://mycompany.com/bostonrentals.html with the following PCScript command.
Graph.DDEnable(Departures,Boston,http://mycompany.com/bostonrentals.html)
If you wanted to drill-down to a pre-defined JavaScript function, all you have to do is specify the URL for your JavaScript function. This is done by inserting javascript: before the function. For example, if you have defined a JavaScript function called replaceImage() in your web page, you could drill-down to it with the following PCScript command:
Graph.DDEnable(11,7,javascript:replaceImage())
You can also add a drill-down effect to a data item by setting the DrilldownURL attribute of the Data element in PopChart XML, as shown below. Adding a drill-down effect in PopChart XML must be done when you send your data to PopChart Server.
<Data Value="34" DrilldownURL="http://mycompany.com" />
Like data labels, drill-down effects can take advantage of macros to yield data-specific drill-down effects for each data item in the graph. This new feature allows you to create a global drill-down destination—for example, a context-sensitive web application that generates a new PopChart image based upon the category and series of the data item that the user clicked on. For most users, this may eliminate the need for setting individual drill-down effects.
For example, you could set your global drill-down destination to morestats.jsp?%_SERIES_NAME. If a user clicks on any data item in the Blue series, PopChart Server will drill-down to the address morestats.jsp?Blue.
Table 7.3 lists the available drill-down macros.
You can set a global drill-down address for your appearance file in PopChart Builder. Simply edit the Drill-down URL text box of the Graph Properties > Drill-down dialog pane.
In PCScript, instead of a category or series number, you can specify a range of categories or series. A range is indicated by the number of the starting category or series, followed by a hyphen, followed by the number of the ending category or series.
For example, if you want an effect to occur on data items in series two through seven, you would specify 2-7 instead of a series number. The code below creates a drill-down effect for any data item that is in categories 6-9 and in series 5-8.
graph.DDEnable(6-9,5-8,drilldown.html)
Thus, to add or change a graph's global drill-down destination, simply set the value of category and series parameters in the graph. DDEnable() method to ranges that include every data item in the graph. With most data sets, 1-99 will suffice, but if you're inputting a large amount of data, you may need to use a larger range (the range can be greater than the actual number of categories or series).
For example, the following line of code creates the morestats.jsp drill-down link from the beginning of this subsection.
graph.DDEnable(1-99,1-99,morestats.jsp?%_SERIES_NAME)
Similarly, if you just wanted to have a drill-down effect for one series, you could specify a range of 1-99 for the categories, and then specify the name or number of the series that you want this effect to apply to. The example below would add an effect just to the Atlanta series.
graph.DDEnable(1-99, Atlanta, javascript:alert(The number of cars in the %_CATEGORY_NAME category is %_VALUE))
To set a global drill-down effect, simply change the MetaString attribute of the Drilldown subelement of a graph object, as shown below.
<Graph Name="graph"><Drilldown MetaString="morestats.jsp?%_SERIES_NAME" /></Graph>
|
|
