Home | AJAX Demos | Java Demos | Products

Real-Time Java Chart: Java Real-Time Strip-Chart with Cursor Feedback

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 zooming, scrolling, 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.


Click here 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
Features Overview
Supported Platforms
Pricing Information

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 line, 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 buffer. 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 data 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. To scroll 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 both directions.

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 at 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 be scrolled along the Value axis with the vertical scrollbar that automatically appears on the right side of the chart.

Enabling or Disabling Chart Scrolling

The ToggleAutoScroll toolbar 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 is 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 zoom 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 data.

Changing Displayed Time Span and Custom Label Formatting

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, changing the displayed time span also changes the format of the time axis labels, demonstrating just a few of all possible label customization options. An application can also define label and tooltip formatters that will supply custom strings for axis labels and tooltips.

Tooltips, Data Point Selection and Cursor Feedback

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 data sample is highlighted in the chart.

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 or 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 Modes

The first toolbar button changes the demo mode:

The total time extent of data in the chart's history buffer depends on the size of the history buffer and the update interval between data samples.

Time Stamps and Handling of Invalid Data Points

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. If no 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 switched on 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 modes.

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 label positioning.

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

Supported Platforms

The strip chart is available for all supported GLG platforms: