Using charts makes complex data easier to comprehend. Unfortunately
the decision to add charts to a Web site or an application doesn't
necessarily make life easier for the designers and programmers
responsible for displaying them. Depending on the complexity of the
data, developers may encounter a seemingly endless series of
questions. What type of chart is needed? Should the data be displayed
horizontally or vertically? 2D or 3D? What increments should be used
along the axis lines? What happens if the data changes?
EspressChart from Quadbase Systems, Inc., is a set of tools
to help developers design and implement a variety of chart types. The
primary tools that make up EspressChart include Chart Server, Chart
Designer, Chart Viewer, and Chart API.
Chart Server provides user authentication as well as local
and remote file access. Although Chart Server generally runs on a Web
server, it's possible to run it on a stand-alone machine.
Chart Designer is a 100% pure Java, interactive, front-end
application that guides developers through the process of creating
charts. Designers choose from a list of common chart types, then add
customization - including rotating the chart to view it from
different angles. Once a chart has been created, it can be exported
in a variety of formats. In addition to common formats, such as .gif
and .bmp, two formats specific to EspressChart are available. Charts
exported as .cht (Chart Designer format) files are accessible to the
Chart Viewer applet, as are charts exported as .tpl (the template
format for Chart Designer). In addition, .tpl files save chart
attributes and the data source, but not the actual data. Whenever a
tpl file is loaded, data for the chart is automatically updated.
Chart Viewer is an applet that allows users to view and
manipulate charts remotely.
Finally, Chart API is a set of 100% pure Java library
functions that can work in conjunction with Chart Server or in a
stand-alone mode to create and manipulate charts from within applets
and applications. Chart API takes advantage of high-performance
algorithms for displaying 3D objects. In fact, it can reproduce all
the functionality of Chart Designer.
Creating a Chart
Suppose I want to produce a chart tracking the salary of Alex
Rodriguez, who recently signed a 10-year, $252 million contract to
play shortstop for the Texas Rangers baseball team.
Because Chart Designer requires Chart Server to be running,
the first step is to launch Chart Server. I can accomplish this on my
Windows 95 machine by simply executing server.bat. Several command
line options are available, including one to turn the Chart Server
monitor on or off.
The Chart Server monitor displays information
about the current status of the server, such as the number of users
currently logged in (see Figure 1). In addition, it allows the
administrator to change various settings and fine tune the
performance of the server. For example, new to version 3 of
EspressChart is a data buffering capability in which the
administrator can control whether data requested from a database is
stored in a buffer for faster access later or read from the data
source each time.
Once Chart Server is up and running, Chart Designer can be
launched as an applet by typing the proper URL into a browser or as
an application by executing designer.bat. After the user has
successfully logged on, five steps are required to create a new chart.
- Specify a data source (database or data file).
- Select a chart type.
- Select suitable chart options.
- Modify the chart design interactively.
- Export the chart in the desired format.
If the data for a chart resides in a database, the Chart
Wizard prompts you for the URL of the database, the database driver,
user name and password, and a valid SQL statement to retrieve the
data. In the example below, the data exists in a single data file
called "Alex.txt", and I simply provide the name of the file when
prompted by the Chart Wizard.
String, boolean, decimal, decimal
Year, option, salary, deferred
"2001", false, 21, 5
"2002", false, 21, 4
"2003", false, 21, 3
"2004", false, 21, 3
"2005", false, 25, 4
"2006", false, 25, 4
"2007", false, 27, 4
"2008", true, 27, 3
"2009", true, 27, 3
"2010", true, 27, 3
In data files, the first row specifies the data types. The
EspressChart documentation lists 20 data-type keywords ranging from
"boolean" and "int" to "date" and "timestamp". The second row
contains the field names, and the remaining rows contain the records.
Once the data is ready it's time to decide precisely how it
should be displayed. The Chart Wizard offers a choice of 17 2D and 13
3D chart types (see Figure 2).
If the data is incomplete or
incompatible with the chosen chart type, a dialog box appears with an
explanation of the problem. The available chart types include:
- Column
- XY(Z) scatter
- Stack column
- Pie
- Stack area
- High low close open (HLCO)
- Surface chart (3D only)
- Overlay chart (2D only)
- Radar chart (2D only)
With the data source identified and the chart type selected,
the next step is to precisely map the data from the data source to
the chart. For example, the data file describing Alex Rodriguez's
contract includes the salary total for each year. Also included are
whether the season is an option year and the amount of deferred money
to be paid at a later date. This is valuable information, but we
don't want to necessarily include it in this particular chart.
Fortunately, through the Select Data Mapping dialog box, we can match
a specific axis in our chart directly to a column of data in a data
file or database.
Final Customization
At this point, designers concerned about the appearance of
their charts can take advantage of the flexibility of Chart Designer
to modify the look of the chart, as well as add some functionality
(see Figure 3).
A background image can be chosen for the chart and a title
added. In fact, text can be included anywhere on the chart. Certain
variables can also be included in the text for run time substitution.
For example, these variables can represent the time, date, or name of
a column of data mapped to a particular axis.
Customization isn't limited to adding items to the chart.
Virtually any object can be removed. Titles, axis labels, even the
axes themselves are not immune.
Further customization is possible for the items that remain.
Color and font can be changed. Objects can be moved. The limits of
the axes can be changed. Even the thickness of the axis lines can be
modified.
Finally, the entire chart can be resized and, in the case of
3D charts, rotated using the navigation panel at the bottom of the
screen.
Not all changes made within Chart Designer are cosmetic.
Significant functionality can also be added. Hyperlinks can be set up
to allow the user to click on a data point and immediately branch to
another chart or HTML page. For complex charts, the Drill-Down Wizard
helps designers manage links between large numbers of charts by
creating drill-down charts at runtime. Charts that contain frequently
changing data can be configured to regularly check the database and
display any changes.
When the designer decides the chart is complete, several nice
features are available. When saving a chart, checkboxes exist for
creating HTML and XML files. The HTML file contains code to display
the saved chart, and the XML file contains the properties of the
chart based on the EspressChartAttributes.dtd file. It's also
possible to export the data of the chart to an XML file based on the
EspressChartData.dtd file. This is particularly useful for charts
based on data from multiple sources, since it allows the data to be
stored in a single location.
Chart API
It's no exaggeration that Chart API can produce a chart with
a single line of code. In this case, however, I needed two lines to
display the salary chart as part of an applet. The call to the class
method "setChartServerUsed" must be made prior to creating the chart
object if, as in this case, the server isn't being used.
import quadbase.ChartAPI.*;
import java.awt.*;
import java.applet.*;
public class Alex extends Applet {
public void init() {
QbChart.setChartServerUsed( false );
setLayout( new BorderLayout() );
add( "Center",new QbChart(this,"Salary.cht") );
}
Because the salary chart is in 3D, the navigation panel is
included in the applet, allowing users to rotate the chart to view it
from various angles within the applet without the need for me to
write any additional code.
Since Chart API can re-create all the functionality of Chart
Designer, I can use it to further modify the chart by changing the
title, for example. I can also use it to export the chart as a static
image. In this way developers can use JavaServer Pages or servlets to
generate charts on the server side before displaying a Web page on
the static image and the corresponding map file (if any) dynamically.
Summary
The Chart Designer, despite its power and flexibility, is
remarkably intuitive. When I decided I didn't like the background
image, I double-clicked on it and was immediately presented with a
list of potential replacements. Moving objects, such as the legend,
simply involves clicking and dragging.
Still, documentation is important, and the EspressChart
documentation is outstanding. The chapter on Chart API has generous
portions of sample code, and the chapter on Chart Designer contains
detailed descriptions of all of the standard chart types, including
guidance on when to use a particular type of chart.
More information, plus the opportunity to download an
evaluation copy of EspressChart, is available at
www.quadbase.com.
Quadbase Systems, Inc.
2855 Kifer Road
Suite 203
Santa Clara, CA 95051
Web: www.quadbase.com
Phone: 408 982-0835
Fax: 408 982-0838
Test Environment:
OS: Windows 95
Processor: 233MHz Pentium II
Memory: 32MB
|
