Chapter 9. Chart Viewer

All charts created by Chart Designer can be saved in a range of file formats that may be pasted into documents. These formats include BMP, JPG, PNG, PDF, SVG, SWF, WMF, and GIF. In addition, Chart Designer provides the option of saving a chart as a .cht, .tpl, or .xml file.

Chart Viewer is an applet that enables you to view and manipulate a chart dynamically through a web browser. Viewer reads the file (in .cht or .tpl format) as outputted by Chart Designer or the API, and then displays the chart. The small size of the data file makes it suitable to distribute the chart image over the web. The data is encrypted while being transferred from EspressManager to Chart Viewer and so lends a degree of security to sensitive information.

A .cht file may be viewed interactively by a user using the Chart Viewer applet. Chart Viewer enables a chart to be displayed and manipulated without changing the underlying data.

Files in the .tpl format can also be viewed using Chart Viewer. When a web page that contains a .tpl file is viewed using a browser, fresh data will be obtained automatically by Chart Viewer. Thus, a single chart template can be used to supply up-to-the-minute charts to users in real time.

Inside Chart Viewer, you can drag the chart, legend, title, or label to position the object. You can also resize the chart and drill-down on data points or a series of data. For three-dimensional charts, users can use the navigation panel to pan, zoom, rotate in each direction, and translate. Also, individual x, y, and z-axis scaling, thickness ratio adjustment, real time three-dimensional animation, etc can all be preformed easily. There are built-in callback mechanisms that let a user click on a data element to view the underlying data or to jump to a related URL. Chart Viewer is written in pure Java that runs on all platforms that support Java. Chart Viewer also supports scheduled refresh (where a chart’s data is updated at regular intervals specified by the designer) and parameter serving where a chart’s parameters are provided at load time.

You can embed a .cht or .tpl formatted file in a Web page using the following syntax:

<applet codebase = ".." code = "quadbase.chartviewer.Viewer.class"width = 640 height = 480 archive = "EspressViewer.html">

      <PARAM name = "filename" value = "yourchart.cht">

</applet>

The parameter filename specifies the file name of the file that contains the chart data and you can prefix it by http:// for accessing a remote data file. When viewed by Chart Viewer, a chart saved in the chart format (.cht) will use the data stored in that file for plotting.

A chart saved in the template format (.tpl) allows Chart Viewer to dynamically fetch the data from a database or a data file depending on where you specify the data source of chart to be when using Chart Designer to create the template (the database name, user name, password, etc are all stored in the .tpl file).

9.1. The Chart Viewer Parameters

You can also pass data and chart viewing control information via parameters to the Chart Viewer applet without using Chart Designer. That is, you can use the Chart Viewer to directly view a data file or pass the data directly in the form of lines of data, along with other control information, in the HTML code. By default, the parameter is true if the parameter is of a true/false type. The following is a list of parameters:

Chart Parameters (Common to Two and Three-Dimensional Charts):

mainTitle

the main title of the chart

xTitle

x-axis title

yTitle

y-axis title

zTitle

z-axis title

RefreshInterval

scheduled refresh interval in seconds

DragLegend

if false, the legend(s) can not be moved

DragChart

if false, the chart can not be repositioned or resized

ShowDataHint

if false, data information box will not be shown when left mouse click on chart data

ShowLinkHint

if false, hyperlink information box will not be shown when right mouse click on chart data

DataHintBgColor

set background color of data information box

LinkHintBgColor

set background color of hyperlink information box

DataHintFontColor

set font color of data information box

LinkHintFontColor

set font color of hyperlink information box

DataHintFont

set font of data information box

LinkHintFont

set font of link information box

DataHintOffsetX

set x offset of the data information box

DataHintOffsetY

set y offset of the data information box

LinkHintOffsetX

set x offset of the link information box

LinkHintOffsetY

set y offset of the link information box

Printing

if false, this will disable the ability to export the chart (using Ctrl+P and/or Ctrl+J) in a browser

filename

name of the template file to be applied to the chart

xAxisRuler

if true, show the x-axis ruler (for 2D charts only)

yAxisRuler

if true, show the y-axis ruler (for 2D charts only)

sAxisRuler

if true, show the secondary-axis ruler (for 2D charts only)

ResizeChart

if false, the chart cannot be resized

ResizeCanvas

if false, the canvas cannot be resized

comm_protocol

the protocol to be used, in case of a firewall

comm_url

the url to connect to the EspressManager, in case of a firewall

RefreshData

if false, the chart data cannot be refreshed

PopupMenu

if false, the pop-up menu will not be displayed

TypeMenu

if false, the type sub-menu will not be displayed in the pop-up menu

DimensionMenu

if false, the dimension sub-menu will not be displayed in the pop-up menu

For Three-Dimensional Charts only

Toggle3Dpanel

if false, the navigation panel can not be toggled to be visible or invisible

Drawmode

set different mode of drawing 3D chart. Available draw modes are Flat (default), WireFrame, Flat Border (which draws a black border around the flat shading model), Gouraud, and Gouraud Border

NavColor

set navigation panel color

navpanel

if false, the Navigation Panel is not displayed when a 3D chart is being viewed. The Navigation Panel is never displayed when a 2D chart is being viewed

GouraudButton

if false, the Gouraud shading button in the navigation panel is hidden

AnimateButton

if false, the animation speed control in the navigation panel is hidden

SpeedControlButton

if false, the speed control button in the navigation panel is hidden

Data Input Parameters

sourceDB

set the database information in order to generate the chart

sourceData

set the data information in order to generate the chart

sourceFile

set the datafile information in order to generate the chart

datamap

set the column mappings for the chart

TransposeData

set the data to be transposed before using it to generate the chart

chartType

set the chart type for the generated chart

EspressManagerUsed

Set the EspressManager to be used

ParameterServer

update the data in the chart dynamically

transposeData

if true, transpose the data

server_address

The IP address of the Espress Manager connection.

server_port_number

Port number of the Espress Manager connection.

Example:the parameters mainTitle, xTitle, yTitle, and zTitle are used to specify the main title and axis title of the chart, they will override the ones defined in the template:

<PARAM name="mainTitle" value="This is the main Title">
<PARAM name="xTitle" value="x axis title">
<PARAM name="yTitle" value="y axis title">
<PARAM name="zTitle" value="z axis title">

Example:With the parameter RefreshInterval you can specify:

<PARAM name="RefreshInterval" value="60">

In the above example, the applet will fetch data from a database or data file (with the help of EspressManager) and redraw the chart every 60 seconds - all transparently. It is useful for accessing databases in which the data changes frequently.