RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Building 2-D Graphics Applications Using Java and SVG : Page 3

If you're tired of generating static bandwidth-heavy JPG files for charts, maps, and other graphic images in your Web applications, SVG provides a way to display and interact with dynamically-generated graphics in a browser.

Generating the Dynamic Chart
Now that you've seen the output from the application, the more interesting part is how you generate the SVG from a JSP. For brevity and to stick closely to the concept, I embedded the business logic in the SVGController servlet's service method, rather than using a separate model layer. The application shows how to integrate SVG into the UI generated by the JSP. You can easily extend the same idea to a J2EE app using EJBs.

The application is composed of two JSPs and one servlet as described in the following list:

  • paretoInput.jsp—This creates the UI in which users enter values that affect the generation of the Pareto chart.
    Figure 3. Input Form: This initial page for the Web application lets users enter parameters for the Pareto chart generation.
  • SVGController.java—Extracts the input values from the submitted form, and processes them to form meaningful information with which to construct the Pareto chart. It then forwards the request to paretoOutput.jsp
  • paretoOutput.jsp—This dynamically outputs the Pareto chart and sets the content type to "SVG."
To install and run the downloadable sample code, follow these steps. You can use any application server, but the following steps assume you're running Tomcat.

  1. Create a new Web application called svg_j2ee, or use the war file provided in the sample code.
  2. Copy the source files paretoInput.jsp, SVG Controller and paretoOutput.jsp into the root application folder (svg_j2ee). Alternatively, you can just deploy the war file in your server.
  3. Start the server and browse to http://localhost:8080/pareto/. You'll see a page similar to Figure 3.
  4. Fill in the input values or accept the default values.
  5. Click the "Generate" button. The server generates the chart and the browser opens it in a new window as shown in Figure 4.
Figure 4. Generated Pareto Chart: The paretoOutput.jsp file generates the chart dynamically, based on input values entered by the user.
A "fat rabbit" is a term used with Pareto charts to identify the root cause of an analysis. Generally it's the block that is fatter than the rest (in this case, the first one in the chart). In this application, you can choose a different fat rabbit by clicking it with the mouse, which changes the highlighting.

Sample Application Flow
The code is simple and contains comments that should help clarify it. Here's how the application flows through the three pages.

The application first runs the paretoInput.jsp file, which displays the input UI, asking users to enter parameters used to generate the Pareto chart. This is a standard JSP, with no reference to any SVG; it simply grabs the inputs and passes them on to the SVGController servlet for processing.

The SVGController.java servlet's service method extracts the request parameters—the headings and values that affect the SVG rendering of the chart. It stuffs these into two vectors, sorts them based on the values, and generates helper vectors for paretoOutput.jsp, that provide percentage and cumulative percentage for graph generation. It then redirects the request, passing all the information required to construct the graph to paretoOutput.jsp as request attributes.

ParetoOutput.jsp sets the content type to "image/svg+xml" to let the browser know that the response content is an SVG file. If the response contains any content that doesn't adhere to the SVG specification, the SVG plugin will throw an error. Next, it defines the height and width of the SVG display area. The rest of the code is self-explanatory. It is an amalgamation of JSP tags and SVG similar to the code you saw in the logo.svg file on the previous page. The file uses Java variables—passed in just as they are in any JSP—to define the chart values. The code uses those values to generate the Pareto.

It is worth mentioning that you can generate SVG dynamically using other methods such as XSLT. The design requirements of the project should drive your choice of technology. For example, if the application involves transforming XML on the server side for data exchange or for reports then the XSLT approach would make sense, whereas applications without such needs might benefit from the more direct approach described in this article. It's also worth noting that while this sample application generates a simple chart, SVG is robust enough for use in heavy 2-D graphics applications such as the printed circuit board industry. However, at this stage, SVG's 3-D capabilities are still somewhat limited.

SVG technology is already mature enough that there are a few books available—and there's plenty of information on the Web if you want to learn more. The XML representation of SVG opens numerous opportunities for integrating other XML-based technologies. For example, you can use XML-based frameworks such as XUI in conjunction with SVG to provide state-of-the-art visual and interactive capabilities to your Web applications.

Puneet M. Sangal, Practice Manager, has 12 years' experience in global management, project management, selling services, consulting, and software development in Europe, Pacific, India, and the U.S. He has studied executive management at IIM Calcutta, and holds an MS from Northeastern University in Boston, MA, and a BE from BIT Ranchi.
Email AuthorEmail Author
Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date