1
Chart Basics

Chart Terminology · Using the Chart Customizer

Interacting with the Chart · Choosing the Chart Type · Understanding Data Layout


Successful charting requires that you become familiar with basic chart processes and vocabulary. The following topics cover basic information that anyone who intends to create 2D charts should be familiar with.

Chart Terminology

The following illustration depicts the terms used to describe chart elements.

The elements comprising a typical 2D chart

Note that pie charts contain the same elements but do not have axes.


Using the Chart Customizer

The JClass Chart Customizer enables you or an end-user to customize the properties of any chart as it runs.

The JClass Chart Customizer

Immediate Feedback Model

As you edit properties, the changes are immediately displayed. This enables you to quickly see how a change affects the chart so that you can make further changes without leaving the Customizer.

Displaying the Chart Customizer at Run-Time

By default, the Customzer is disabled at run-time. To enable the Customizer for a chart, you need to set the AllowUserChanges and Trigger properties, for example:
    chart.setAllowUserChanges(true);
    chart.setTrigger(0, new EventTrigger(Event.META_MASK,
                                        EventTrigger.CUSTOMIZE);
Once enabled, to display the Customizer, position the mouse over the chart. Click the right mouse button (Windows 95/NT), the middle button (Unix), or the button that launches a popup menu on your OS. The Chart Customizer appears, as shown above.

Editing Chart Properties

The following outlines the steps required to edit chart properties at run-time using the Customizer:
  1. Select the tab that corresponds to the element of the chart that you want to edit. Tabs contain one or more inner tabs that group related properties together. Some tabs also contain a list that selects a specific object to edit.
  2. If the tab contains a tree control on the left side, select the specific object to edit from the tree.
  3. Select the inner tab that corresponds to the kind of property you want to edit.
  4. Click on a control and change the value of that property. The change is immediately applied to the chart and displayed.
  5. Make further changes to the same property or change other properties on this tab or other tabs.
  6. Click the Close button to close the Chart Customizer.

Editing a sample chart applet with the Customizer

Displaying the Editor at Design Time

Displaying the property editor at design-time depends on the Integrated Development Environment in use. Consult the IDE documentation for details. Note that the property pages may appear slightly differently in the IDE.

-->


Interacting with the Chart

An end-user can interact with a chart more directly than using the Customizer. Using the mouse and keyboard, a user can examine data more closely or visually isolate part of the chart. JClass Chart provides the following interactions:

It is also possible in most cases for the user to reset the chart to its original display parameters. The interactions described here effect the chart displayed inside the ChartArea; other chart elements like the header are not affected.

Note: The keyboard/mouse combinations that perform the different interactions can be changed or removed by a programmer. The interactions described here may not be enabled for your chart.


Choosing the Chart Type

JClass Chart can display data as one of nine basic chart types: Plot, Scatter Plot, Area, Bar, Stacking Bar, Pie, Hi-Lo, Hi-Lo-Open-Close and Candle. It is also possible to simulate more specialized types of charts using one of these basic types.

Use the ChartType property to set the chart type for one ChartDataView. Each data view managed by the chart has its own chart type. The example image in the following table shows the enumeration for each chart type.

Chart Type Array
data
General
data
Notes
PLOT EXAMPLE YES YES Plot
Draws each series as connected points of data.
  • When using Array data, X-values shared across series
  • Series appearance determined by chart style line color, symbol shape, size and color properties
SCATTER PLOT EXAMPLE YES YES Scatter Plot
Draws each series as unconnected points of data.
  • When using Array data, X-values shared across series
  • Series appearance determined by chart style symbol shape, size and color properties
BAR CHART EXAMPLE YES   Bar
Draws each series as a bar in a cluster. The number of clusters is the number of points in the data. Each cluster displays the nth point in each series.
  • X-axis generally annotated using Point-labels
  • Series appearance determined by chart style fill color and image properties
  • 3D effect available using depth, elevation and rotation properties
STACKING BAR CHART EXAMPLE YES   Stacking Bar
Draws each series as a portion of a stacked bar cluster, the number of clusters being the number of data points. Each cluster displays the nth point in each series. Negative Y-values are stacked below the X-axis.
  • X-axis generally annotated using Point-labels
  • Series appearance determined by chart style fill color property
  • 3D effect available using depth, elevation and rotation properties
AREA CHART EXAMPLE YES YES Area
Draws each series as connected points of data, filled below the points. Each series is drawn "on top" of the preceding series.
  • When using Array data, X-values shared across series
  • Series appearance determined by chart style fill color property
PIE CHART EXAMPLE YES   Pie
Draws each series as a slice of a pie. The number of pies is the number of points in the data (values below a certain threshold can be grouped into an other slice). Each pie displays the nth point in each series.
  • Pies are annotated with Point-labels only
  • Series appearance determined by chart style fill color property
  • 3D effect available using depth, elevation and rotation properties
HI-LO CHART EXAMPLE YES   Hi-Lo
Draws two series together as a "High-low" bar. The points in each series define one portion of the bar:
  1st series -- points are the "high" value
  2nd series -- points are the "low" value
  • Appearance determined by chart style line color property in first series of the two
HI-LO-OPEN-CLOSE CHART EXAMPLE YES   Hi-Lo-Open-Close
Similar to Hi-Lo, but draws four series together as a "High-low-open-close" bar. The additional series’ points make up the other components of the bar:
  3rd series -- points are the "open" value
  4th series -- points are the "close" value
  • Appearance determined by chart style line color property and symbol size properties in first series of the four
CANDLE CHART EXAMPLE YES   Candle
A special type of Hi-Lo-Open-Close chart, draws four series together as a "candle" bar.
  • Simple candle appearance determined by chart style line color, fill color, and symbol size properties in first series of the four
  • Complex candle appearance determined by different chart style properties from each series of the four


Understanding Data Layout

JClass Chart employs a flexible data model that allows arbitrary data sources to be connected. Not every user wants to write an entire data source, so several data sources are provided with JClass Chart:

These three data sources accept data in one of two basic layouts, Array and General.

Array Layout

Use Array layout with bar, stacking bar, and pie charts. Plot charts can also use Array data when the Y-values in their series share common X-values.

Sample array layout chart

The important Array layout characteristics illustrated above are:

General Layout

Use General layout with plot charts. Bar, stacking bar, and pie charts cannot display General data.

Sample general layout chart

The important General layout characteristics illustrated above are: