NetCharts® Pro: Servlet Application Using Drill-down

This example servlet creates a NetCharts Pro NFGraph instance based upon a default template. Then the servlet uses query string parameters to modify the NFGraph. The NFGraph is then used to invoke the NetCharts Pro getServerGeneratedImage() method to generate the chart image which is returned to the client. In addition, this sample application shows additional techniques to integrate NetCharts Pro within an interactive environment. The sample application details how to add additional functionality such as rollover labels using HTML imagemaps, customizing a chart with dynamic chart properties, including additional chart properties across a series of charts and creating additional chart layers using the same servlet. The DrillDownExample Servlet can either directly return an image or use a Model-II architecture in which the image is placed in memory by the servlet and later accessed by another page. (This example is included in the NetCharts Pro download package.)

Supported Parameters

The DrillDownExample Servlet uses two sets of query string parameters. The first set is used primarily for navigation and the second set is used for the dynamic chart template creation. The following query string parameters are accepted as input:

image	Used for servlet navigation. Instructs the servlet to return the binary image data directly and is useful when using the servlet in an IMG SRC tag.
goback	Used for servlet navigation. Instructs the servlet to return one level upwards within the multi-layered data.
year	Used for dynamic chart template creation. Specifies the year of the data set to represent.
region	Used for dynamic chart template creation. Specifies the region of the data set to represent.
city	Used for dynamic chart template creation. Specifies the city of the data set to represent.
category	Used for dynamic chart template creation. Specifies the category of the data set to represent.

Generating an Imagemap

The fourth parameter of the getServerGeneratedImage method call is a boolean that specifies whether or not an imagemap should be created during chart generation. If the parameter is set to true, then the NFServerGeneratedImage object returned from the method call will allow access to an imagemap. The getMap() method of the NFServerGeneratedImage class allows retrieval of the associated imagemap definition. The method returns an array of NFServerGeneratedImage.MapElement objects that define the HTML imagemap and can be used to create a string version of the HTML imagemap for writing to an output stream. To convert the array of NFServerGeneratedImage.MapElement objects to a properly formatted HTML imagemap, the NFImageMapCreator class is provided in the netcharts.pro.util package. The NFImageMapCreator class has one static function, createImageMap, which returns a java.lang.String properly formatted as a imagemap instance. The following code fragment shows an example of creating a NFServerGeneratedImage from an existing chart, and retrieving and formatting the associated imagemap.

// Assuming the NFServerGeneratedImage (sgi) already exists
NFServerGeneratedImage sgi = ...

// Create the OnMouseOver and OnMouseOut event handler text (optional)
String onMouseOver = “ADD OnMouseOver event handler text here”;
String onMouseOut = “ADD OnMouseOut event handler text here”;

// Create the actual <map> tag source
String mapSrc = NFImageMapCreator.createImageMap(sgi.getMap(), sgi.getUniqueID(), onMouseOver, onMouseOut, null);

Client-side Interactivity

A useful way to increase the user-friendliness of generated charts is to introduce some client-side interactivity to the displayed web page. One way to produce the interactivity is through JavaScript. In the sample application, a utility class, JavaScriptRepository is used to represent one possible way to create and return JavaScript for use within the web page.

The functionality contained within the returned JavaScript for the sample application includes the ability to show hovering “rollover” labels (see chart above)) and display information concerning the highlighted chart data in the browser windows status bar. These are common and useful alternate ways to express the data represented within the chart image.

For use within the sample application, the JavaScript repository is implemented with static JavaScript that is returned and used for all of the returned charts. But in a production environment, the JavaScript may be stored in a database, templates within a directory structure, a web service or other locations. In addition, the JavaScript may be generated much like the chart images, with dynamic data based upon the query parameters.

Control Flow

The above figure depicts the interaction between the servlet within the sample application and NetCharts Pro. After NetCharts Pro and the sample application have been deployed within the servlet container, a web browser, web page or other client (which in this example is the servlet itself) can dispatch a URL that will cause the application server to invoke the servlet and generate a chart.

In the sample application, the initial reference to the DrillDownExample Servlet is contained within the example.jsp page. This is to ensure compatibility across multiple application servers. Any future invocations of the servlet come from with the tags returned by the servlet.

As an example, consider the following invocation of DrillDownExample, made by the servlet during navigation, which requests a chart image representing the sales data where the year is 2000 and the region is East (result shown in the chart above).

http://<host>:<port>/<webapp_name>/DrillDownExample?year=2000&region=east

The specific steps that occur during this request are as follows:

1. The browser or calling client dispatches the URL.
2. The servlet container (Tomcat, Application Server, etc.) launches the servlet.
3. The servlet creates retrieves a chart template from the Chart Template Repository. In this example, the Chart Template Repository is a Java class that simply returns a static chart template.
4. The servlet creates an NFGraph instance of the NetCharts Pro using the initial Chart Template.
5. The servlet creates an instance of DynamicChartData. The DynamicChartData instance will generate dynamic chart data based upon the query parameters and set the appropriate properties of the NFGraph instance. The DynamicChartData class shows a classic example of modifying the properties of a chart directly.
6. The servlet creates an instance of OptionalChartData. The OptionalChartData instance will generate additional chart data and set the appropriate properties of the NFGraph instance. The OptionalChartData class shows a classic example of modifying the properties of a chart directly.
7. The servlet instructs the chart to redraw itself using all the newly defined parameters.
8. The servlet requests that NetCharts Pro render a NFServerGeneratedImage with imagemap data for the chart. The servlet stores the NFServerGeneratedImage into a session variable.
9. The servlet builds an HTML page that contains the image MAP and an IMG tag.
   a. The SRC attribute of the IMG tag contains a reference to the servlet and a parameter that specifies the session variable that holds the image data.
   b. The MAP tag is generated by creating an instance of NFImageMapCreator and returning the properly formatted HTML imagemap that is generated.
   c. JavaScript from the JavaScriptRepository is returned to perform the client-side interactivity.

See the fully annotated source code for the DrillDownExample Servlet, including the servlet and helper classes, which can also be found in the NetCharts Pro distribution.