This is some sample JSP/JNLP code that uses the Chart Viewer to view a chart drawn using data extracted from a database.

<?xml version="1.0" encoding="utf-8"?>
<jnlp spec="1.0+" href="EspressViewer.jnlp">
<information>
<title>Espress Viewer</title>
<vendor>Quadbase Systems Inc.</vendor>
<offline-allowed/>
</information>
<resources>
<j2se version="1.8+" max-heap-size="1024m"/>
<jar href="lib/EspressViewer.jar"/>
</resources>
<security>
<all-permissions/>
</security>
<applet-desc
name="Chart Viewer"
main-class="quadbase.chartviewer.Viewer"
width="640"
height="480">

<PARAM name="sourceDB" value="jdbc:odbc:DataSource, sun.jdbc.odbc.JdbcOdbcDriver, username, password, select * from products">
<param name="dataMap" value="0 1 -1 3">
<param name="chartType" value="3D Column">

</applet-desc>
<update check="always" policy="always"/>
</jnlp>

The arguments of dataMap specify how the chart utilizes different columns from the input data to plot the chart. In case of a scatter chart, they are series, x-value, y-value, and z-value. For a high low open close or high low chart the numbers are series, category, high, low, open, and close. For all other charts, the arguments are series, category, sumBy, and value. If you would like more information,please see the chapter on Column Mapping in the Chart API reference. The argument chartType specifies the type of chart to be displayed and it can be one of:

This HTML/jsp code draws a chart using data from a data file:

<applet-desc code = "quadbase.chartviewer.Viewer.class" width=640 height=480>

      <param name="sourceFile" value="http://.../test.dat">
      <param name="dataMap" value="-1 0 -1 1">
      <param name="chartType" value="3D Pie"> 
</applet-desc>

It is possible to have Chart Viewer read in data directly from the HTML/jsp file itself rather than from a data file or from a database.

<applet-desc code = "quadbase.chartviewer.Viewer.class" width=640 height=480>

      <param name="sourceData" value="int, string, int | value, name, vol | 10, 'John', 20 | 3, 'Mary', 30 | 8, 'Kevin', 3 | 9, 'James', 22">
      <param name="dataMap" value="-1 1 -1 2">
      <param name="chartType" value="3D Bar">

</applet-desc> 

The format for the parameter sourceData is the same as the data file format, except that each line is ended by a vertical bar “|”.

The chart dimension and chart type can be changed by using the pop-up menu and selecting either the 2D/3D option or the Type option.

Please note that Overlay, Box and Dial chart options do not appear if the chart is three-dimensional.

In the case of a large chart whose dimensions exceed that of the viewport (i.e. if a chart is large enough that it cannot be completely seen within window), an option exists to allow for axis zooming. This allows you to move all the axis and zoom in and out of the axis.

This option is only available for two-dimensional charts. Please note that the bubble, dial, pie, polar, radar, scatter, stack area, and vertical box charts do not support this feature.

You can enable this option by opening the pop-up menu and selecting Enable Zoom. You can choose from the zooming in on the x-axis, the y-axis or both.

To zoom in, left click on and drag out the desired area. If only the y-axis zooming is selected, you need not worry about the length or position in the x-axis.

Scrolling is enabled only for axes that have been zoomed. There will be scrollbars visible on the particular axis when axis zooming is enabled. You can left click and drag this scrollbar to shift the viewport of the applet.

Holding down the control key while left clicking will take the applet back to the previous zoom. Please note that only one previous zoom is stored in memory and thus you can only go back one step. To go all the way back to the default x and y scale, press the Home key on your keyboard.

If the chart being shown is a zoom enabled chart, the zoom option will be available from the pop-up menu. Using the zooming option, you can group the category elements into user-defined intervals and aggregate the points in each group. For details on date/time based zooming, see Section 4.2.4.8.2 - Date/Time Based Zooming. Enabling zoom will allow you to input various zoom options such as lower bound, upper bound (you can also disable the bounds in which case it will go from the first data point to the last), the time scale, and whether you want the x-axis to be linear or not.

You can configure the next drill-down by selecting drill-down from the pop-up menu. This option is available only if dynamic data drill-down is enabled for the chart. After selecting the Drill-Down option the in the pop-up menu, you can view the current setting for the next drill-down chart. If the Category is None, the next level has not yet been configured. If there are unused columns in the data used to generate the chart, you can select a column for the Category. After the Category has been selected, the Type of the chart in the next level can be set (along with Series and SumBy). The data points can now be left clicked to move down a level and right clicked to move up a level.

When viewing a parameterized chart, you can enter in a different value for the parameter (or parameters depending on the number) by opening the pop-up menu and selecting the Query Parameter option. The chart is then redrawn with the new data based on the parameters selected.