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:
- 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.
- If the tab contains a tree control on the left side, select the specific
object to edit from the tree.
- Select the inner tab that corresponds to the kind of property you want to
edit.
- Click on a control and change the value of that property. The change
is immediately applied to the chart and displayed.
- Make further changes to the same property or change other properties on
this tab or other tabs.
- 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:
- moving the chart
- zooming into or out of the chart
- rotation (only for bar or pie charts displaying a 3D effect)
- adding depth cues to the chart
- interactively change data points (using the pick feature)
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
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
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
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
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
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
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
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
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
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:
- InputStreamDataSource - accepts data from a stream
- FileDataSource - reads data from a file
- URLDataSource - reads data from a URL
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:
- The X-values of the points in each series are common to all series.
- Each series contains the same number of points (although by using a data
hole, a series can appear to have fewer points).
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:
-
The points in each series have their own X- and Y-values.
-
Each series can contain a different number of points.