Home | Demos | Products

GLG Real-Time Strip Chart Web Demo (HTML5 & JavaScript)

This pure HTML5 and JavaScript strip chart example demonstrates features of the GLG Real-Time Chart, such as handling real-time updates of hundreds of thousands of data points with interactive zooming, scrolling, data point selection and chart tooltips. More features

The demo loads a GLG drawing containing a real-time strip chart with interface controls and animates it with real-time data, handling chart zooming, scrolling and other user interaction. The drawing was created with an interactive GLG Graphics Builder. The GLG JavaScript Library provides an API for displaying the drawing on a web page, as well as supplying real-time data and handling user interaction. More information

A simpler version of the strip chart demo that illustrates its basic features may be found at GLG Real-Time Strip Chart Example.

Touch Action:

The GLG JavaScript Library implements full GLG run-time functionality present in the GLG C/C++, C# and Java libraries, allowing the same graphical page and programming logic to be shared between the desktop and Web/Mobile version of an application.

Touch Behavior on Mobile Devices
Interacting with the Demo
Overview of the GLG Real-Time Chart's Features
Supported Platforms
Available Real-Time Chart Widgets

Touch Behavior on Mobile Devices

Touch Action selection buttons will be shown when this page is displayed on a mobile device.

Interacting with 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.

See Touch Behavior on Mobile Devices for information on scrolling the chart by touching and dragging.

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 as well as the AutoScroll checkbox enable or disable the chart's scrolling. The chart continues to accumulate new data even when scrolling is disabled. To scroll 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, or touch and hold a button on mobile devices).

The ToggleAutoScroll button and the AutoScroll checkbox are 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 (or touch and drag on mobile devices) 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 (or the user touches and holds the chart area on mobile devices), 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 (or touch) move, demonstrating the chart selection API.

The ToggleAutoScroll button or the AutoScroll checkbox 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 (or the user touches and holds the an 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.

Legend Item Selection

The GLG API may be used to determine which legend item was selected with the mouse. In the demo, clicking on a legend item highlights the corresponding plot by increasing its line width. To unhighlight, click of the legend item again.

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 GLG Real-Time Chart's Features

Supported Platforms

In addition to the HTML5 & JavaScript version, the real-time chart is also available for other supported GLG platforms: