Home | AJAX Demos | Java Demos | Products
Real-Time Java Chart: Java Real-Time Strip-Chart
This Java demo demonstrates real-time and
cursor feedback capabilities of the GLG Strip Chart. The Strip Chart is
capable of handling real-time updates
of hundreds of thousands of data points with interactive
data point selection and tooltips.
Other features include scrolling the chart by
dragging it with the mouse, integrated scrollbars, multiple Y
axes, per-plot range locking, zooming
to an area selected with the mouse and many other features.
Click here for a detailed
description of the real-time strip chart's usage and features.
to see the source code of a simple real-time chart applet.
Click here to
see the complete source code of this applet (including the
logic for handling all buttons and user interaction).
Using the Demo
Using the Demo
Real Time Updates and History Buffer
The chart keeps an integrated history
buffer (with the size of 150000 data points in the online
demo) and displays either all accumulated data or only the data points
in the currently selected time span. The number of data points per
the total number of points and the number of points visible in the
currently selected time span is displayed at the bottom of the chart
for demo purposes.
In the real-time mode, the chart is updated with data, discarding the
old data as necessary to maintain the requested size of the history
The buffer size can be increased or
decreased at run time without losing accumulated data. The size
of the history buffer can be defined in terms of either a time span or a number of data points.
On start up, the demo prefills the chart's history buffer with 150K
samples to demonstrate the chart's scrolling capabilities.
Scrolling the Chart: Dragging, Scrollbars
and Scroll Buttons
The chart can be scrolled in any direction (left, right, up or down) by
simply dragging it with the mouse.
the chart in only one direction (Time or Value), drag the
Time or Value axis with the mouse. Dragging the chart data area scrolls
the chart in
Alternatively, the chart can be scrolled left or right via the Scroll Forward / Backward toolbar buttons.
If the chart's AutoScroll
mode is off, a horizontal scrollbar
the bottom of the chart can also be used to scroll the chart along the
Time axis. If the plots extend outside of the data area, the chart can
scrolled along the Value axis with the vertical scrollbar that
appears on the right side of the chart.
- Scrolling or dragging the chart disables automatic
scrolling and activates X or Y
scrollbars as necessary.
- To scroll to the most recent
data, use the Scroll to the
Most Recent Data toolbar
- The chart keeps updating with
new data even if automatic scrolling is turned off.
- To resume automatic scrolling,
the Toggle AutoScroll
Enabling or Disabling Chart Scrolling
button enables or disables the chart's scrolling. The chart continues
to accumulate new data even when scrolling is disabled. To see the most
recent data, click on the Show the
Most Recent Data button (move the
mouse over a button to see a tooltip describing its function).
The ToggleAutoScroll button
disabled in the Historical and Calendar demo modes, as these modes do
not update the chart with real-time data.
Zooming and Range Lock
To zoom to an area, click on the ZoomTo
toolbar button, then click and drag the mouse to define the area to
to. Use the Reset Zoom button
(1:1) to reset the chart to the original state.
The Var2 plot displays binary
On/Off data. The plot
uses a range lock to prevent
it from zooming in the vertical direction. The
range lock allows the binary plot to keep its Y position, so that the
user can zoom to an area of interest and view the other plots' data
in the context of the binary On/Off
Changing Displayed Time Span and Custom
The toolbar buttons
in the Span
selector demonstrate examples of various time span intervals. The major
and minor tick intervals of the time axis are changed dynamically to
match the selected time span.
In the Calendar demo mode,
displayed time span also changes the format
time axis labels,
demonstrating just a few of all possible label customization options.
application can also define label and
tooltip formatters that will supply custom strings for axis
labels and tooltips.
Tooltips, Data Point Selection and Cursor
When the cursor hovers over the data area, a tooltip displaying the value and the time
stamp of a data sample under the cursor automatically pops up.
When a tooltip is displayed, the selected
is highlighted in the
In addition to a tooltip, information about a point under the cursor is
displayed at the top of the chart on every mouse move, demonstrating
the chart selection API.
The ToggleAutoScroll button
may be used to disable the chart's AutoScroll
while using the tooltips. If AutoScroll
is not disabled, the selected sample will scroll out of view as the
chart receives new data.
When the cursor hovers over the Time or Value axis, the axis tooltip displays the time stamp
the Y value corresponding to the cursor position on the selected axis.
An integrated cross-hair is
displayed when the cursor is inside the data area. The cross-hair
feedback can be turned on or off, as well as changed to show only a
horizontal or vertical line.
Tooltips can be configured to define the content and the format of the
tooltip. An API for selecting and querying data points at run
time is also available.
Real-Time, Historical and Calendar Demo
The first toolbar button changes
the demo mode:
The total time extent of data in the chart's history buffer depends on
size of the history buffer and the update interval between data samples.
- RealTime mode
updates the chart with a continuous data stream. In the
demo, the chart receives new data every 30 milliseconds and scrolls to
display new data if AutoScroll
- Historical mode
scrolls through a large array of logged data accumulated at 1 minute
- Calendar mode displays
daily data accumulated over a period of many years.
Time Stamps and Handling of Invalid Data
The chart can display data points positioned at uneven time intervals.
When displaying real-time or historical data, each data point is positioned according to its time stamp.
time stamp is provided, the current time is used by the chart to
position the data point. An option to display evenly distributed data
points is also available.
The chart handles invalid data points and displays them as gaps in the plots. A data
point may be tagged as invalid by setting its Valid flag to False.
In the demo, the Var1 plot
contains invalid data points which are shown as gaps in the plot.
Erasing and Showing a Plot
Any plot in a chart can be dynamically
or off at run time without losing accumulated data.
When a plot is turned off, it is automatically removed from the chart's
legend. The Y axis associated with the plot can be turned on or off as
well. A plot keeps accumulating new data in its history buffer even
if it is turned off.
In the demo, the Var2 plot
displays binary data
which do not have much meaning in the Calendar
demo mode. The plot and the Y axis associated with it are
erased in the Calendar mode
and shown again when the demo is switched to other
Multiple Y Axes and Axis Label Layout
The chart can display multiple Y axes and provides multiple options for
positioning a label that annotates each axis. The Toggle Labels button at the bottom
of the chart toggles through several options of Y axis
The number of Y axes and visibility of each axis can be changed at
run-time as well.
Overview of the Strip Chart's Features
- Cross-Platform deployment: C / C++ / .NET / Java / AJAX on
Linux/Unix or Windows.
- Real-time updates of hundreds of thousands data points.
- Variable history buffer: the size of the buffer can be changed
run time without losing the data already accumulated in the buffer.
The size of the buffer can be defined in terms of the time span or the
number of data points.
- Integrated zooming and scrolling, accumulating new data while
the chart is being scrolled.
- Dragging the chart with the mouse.
- Integrated chart and axis tooltips, configurable tooltip content
- Data point selection with a configurable highlight marker.
- Integrated cross-hair feedback.
- New in
3.5: Direct access to the data samples in the history buffer
makes it possible to place markers by
double-clicking on the chart, as shown in the
- Display of data points at uneven intervals using time stamps,
handling of invalid data points.
- Multiple Plots: any plot can be turned on or off without losing
data, new plots can be added or deleted at run time.
- Multiple Y axes, the number of axes can be changed dynamically at
- New in
3.5: AutoScaling: The chart automatically changes ranges of
plots and associated Y axes when receiving an out-or-range data sample.
- Configurable major and minor ticks intervals, tick/label
position and appearance.
- Configurable formats of the Time and Value axis labels.
- Choices of plot types and time axis types (with variable of fixed
- Complete control over the chart appearance and layout.
- An API for chart and data point selection queries.
- Custom formatters for axis labels and tooltips.
- Per-plot and per-axis Range Locks.
- Integrated Legend with configurable layout options.
- Grid and level lines for annotating value thresholds.
- Direct or inversed plotting in both X and Y directions.
- Control over the X and Y axis position: on either side of the
chart or in the middle.
The strip chart is available for all supported GLG platforms:
- C/C++ libraries for Linux,
Windows platforms, both 32 and 64 bit
- Qt and Gnome widget wrappers are included
- Java Class Library for
standalone or web deployment
- Java Servlet for JSP and
- ActiveX for C# and .NET on Windows