EspressChart Servlet in Action

Using this HTML page, you can select a chart type, look at the data, select the required data/parameters and then view the output as a static image, Flash or as an interactive chart, all of which will be facilitated using servlets.

Step 1: Chart Type Selection

Here you can select the Chart Type by clicking on the radio button.  Note that the default choice is 2D Column.


2D Column

2D Bar

2D Line

2D Area

2D Stack Column

2D Stack Bar

2D Pie

2D Stack Area

3D Column

3D Bar

3D Line

3D Area

3D Stack Column

3D Stack Bar

3D Pie

3D Stack Area

Step 2: Data Mapping

Shown below are the first 8 records of the data so you have an idea of what the data looks like:

Amount Quarter Region Make Vehicle
3516401.78 I North America Chevy Sedan
4352019.49 II North America Chevy Sedan
4331510.88 III North America Chevy Sedan
2666512.53 IV North America Chevy Sedan
4717742.83 I Asia Chevy Sedan
4850481.26 II Asia Chevy Sedan
3724625.75 III Asia Chevy Sedan
947609.89 IV Asia Chevy Sedan

To view the complete data, click here.

Data Mapping Selection

Here you can choose the different mappings for the chart.  Note that the value axis is always the 1st column, i.e., the column containing the Amount.

If you have chosen a pie chart, you can only select a Category column.  Any other selections made (i.e., the series and sumby) are disregarded.

In the case of a column, line and area charts, the value axis (i.e., the Amount column) will be the y-axis.  The category axis will be the x-axis, and in the case of a three dimensional chart, the series (if selected) will be represented along the z-axis.

In the case of a bar chart, the value axis (i.e., the Amount column) will be the x-axis.  The category axis will be the y-axis, and in the case of a three dimensional chart, the series (if selected) will be represented along the z-axis.

The stack charts have one other added parameter, the sumby.  This parameter represents the column that make up the elements in the stack.

Note that the default choice for Category is Quarter, for Series is None and for Sumby is Make.

Select Category: 
Select Series: 
Select Sumby: 

Step 3: Parameters Selection

Here you can select certain parameters and properties of the chart.

Note that the default choice for Select Background Color is White and Yes for both Show Legend and Show Table.

Select Background Color: 
Show Legend: 
Show Table: 
Enter Main Title: 

Output Format

Here you can select the format in which you want the chart to be displayed

Select Display Format: 

*Note: Even though this simplified interactive demo allows you to create large number of different charts, it doesn't allow you to set all chart options that can be set by the EspressChart API. Using the default values for the rest of the options may result in minor visual problems (overlapping chart elements etc.) that could be easily prevented in real life application of the EspressChart API.