Web Development

Easily create charts and graphs in a browser

SVG eases the process of presenting graphics in a browser. See how it can be used to painlessly produce charts and graphs in a browser-based client.

Delivering quality charts and graphs for the Web used to be a big undertaking. Most of the programming had to be done on the server side to generate an image of the chart or graph in memory, convert it to a bitmap, and transport it to the browser. This article will present declarative ways—involving no procedural programming in VB or Java—to create charts and graphs for the browser with SVG.

Miss something?
For an introduction to SVG, see "Draw and annotate in your browser using SVG."

There are two aspects to this process: Getting data for the graph and drawing the graph with this data. The focus of this article will be on getting data in XML format and then transforming the XML data into SVG-XML, which contains instructions to draw the graph. A browser plug-in can interpret the SVG-XML and render the graph. One such plug-in is provided by Adobe.

Getting data for the graph
Since XML has become the de facto data format standard, we will assume that the output format of the data is XML. Several tools can deliver XML-formatted data declaratively, including XSQL from Oracle and Aspire from Indent. In either case, you will specify the SQL or stored procedure, and when Oracle or Aspire is called from a URL, the XML data file is delivered. The data sources do not have to be a database; they can be EJBs, DCOM, or other components.

For instance, in Aspire, the declarative data gathering call to SQL looks like Listing A. First, select takes arg1 as an input argument and returns category. Then, SQL returns several rows of data for the category.

Drawing the graph
There are two approaches to drawing a graph in SVG with the XML data file: XSLT and a server-side solution.

In the first approach, the input XML will be transformed into an SVG-XML file using the XSLT. Several examples of XSLTs are available, each for a specific type of graph. XSLT files are bulky and require a lot of coding for a moderately complicated graph. XSLT is not easily maintained or extended. If any of you have programmed with XSLT, you will agree this will be a tedious process for even a simple graph.

Server-side solutions
With the second approach, a server-side program creates the SVG-XML file for the graph and delivers it to the browser. Batik from Apache provides a Java-based toolkit for creating such server-side programs. Several companies have developed commercial products for server-side SVG-based graphs, including Corda Technologies, Inc., ElanSoft, and Visual Mining, Inc. These server-side programs will take as input XML data for the graphs and a declarative specification of the type of graph and its parameters. This is a preferred approach, since it does not involve any programming. Instead, users will specify properties of the desired graph in an XML file. Figure A shows the architecture of the server-side solution with declarative graph and data specifications. The data server will act like a broker and collect data from multiple sources and return XML data. An example graph specification file, taken from Corda’s PopCharts, is shown in Listing B.

Figure A
Server-side SVG architecture

Easily create your own
Creation of Web graphs and charts can be a programming-free task with the help of SVG. It provides a relatively painless solution. The only required specifications are those defining how to collect data and define the graph properties.

Editor's Picks