GLG Combo Real-Time Chart Web Demo (HTML5 & JavaScript)
This pure HTML5 and JavaScript example demonstrates how to display,
configure and update a GLG realtime stripchart containing multiple
stacked charts that share the same Time axis. User interaction
includes cursor feedback, interactive zooming and scrolling,
ability to select variables to be displayed by
showing or hiding individual charts, as well as define different
sets of variables via configuration data.
More information
A single finger touch in the chart area performs a touch
action based on the selected Touch Action mode:
Touch and hold moves the crosshair and displays
corresponding datasample values in tooltips.
Touch and drag in the Crosshair mode moves the crosshair
and displays corresponding datasample values, updating them
as the crosshair moves.
Touch and drag in the Scroll Chart mode scrolls the
chart.
A two finger touch in the chart area performs default browser
actions, such as scrolling or pinch-zooming the page.
Touch Action selection buttons will be shown when this page is
displayed on a mobile device.
Features Overview
This demo demonstrates how to display, configure and update a
GLG realtime stripchart widget containing multiple stacked charts with
a shared Time axis. All charts scroll together
when updated with data or scrolled by
dragging the charts with the mouse.
The demo loads the stripchart_combo.g drawing containing stacked
stripcharts and configures the charts dynamically at run-time based on
the supplied configuration data. The configuration data includes
the list of variables to be plotted, as well as a chart title, a low/high
range, a plot color and a data supply tag for each variable.
A vertical cross-hair line in all charts
follows the mouse cursor when the user moves the mouse inside one
of the charts or along the Time axis. A label annotation showing the
value and the time stamp of the nearest data sample is displayed next to
the cross-hair line in each chart.
The chart toolbar contains buttons to scroll and zoom the chart,
as well as change the time span on the Time axis. The toolbar is a
GLG viewport included in the GLG drawing.
The Select Chart toolbar button displays a dialog that may be
used to select variables to be plotted from a list defined by the
configuration data. When a variable is selected or deselected, a chart
showing this variable is added or removed from the display, and the
layout of all charts is automatically adjusted to fill all
available space using the new layout feature of the GLG square series.
The plot data for each variable are preserved even when the variable is
not displayed. Alternatively, the chart selection may be implemented via
HTML using an HTML list object.
Configuration1 and Configuration2 HTML buttons
demonstrate how to change the list of displayed variables by
loading different configuration data. This
reconfigures the charts on the fly according to the
new configuration without reloading the drawing.
Chart configuration data may be loaded from a file or defined in the
source code. The application may extend the code to build configuration
data dynamically as needed. Configuration data are supplied
to the chart as an array of objects of type ConfigRecord.
The demo displays one plot with one Y axis in each chart.
This functionality can be extended to support multiple Y axes
and multiple plots in each of the charts.
Data Animation
The demo uses simulated data generated by ChartDemoDataFeed. To use
live data for animation:
Change the RANDOM_DATA variable to false
in the source code.
Provide a custom implementation of the ChartLiveDataFeed
object.
Functionality Details
For detailed information on the demo features and coding implementation,
refer to README_COMBO_CHART.txt
file.