GLG Combo Real-Time Chart Web Demo
(HTML5 & JavaScript)
This 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.
Use Configuration buttons at the top to switch between
different sets of displayed variables.
Move the mouse inside the chart to display plot values at the
cursor position.
Click and drag the map with the mouse to scroll.
Use the Y Dragging button to enable vertical scrolling.
Use the AutoScroll button to resume auto-scrolling.
Hover the mouse over toolbar button to display tooltips describing
their functions:
scroll back and forth
scroll to the most recent data at the end of the chart
zoom to a selected area and reset zoom
show or hide dialog for selecting variables to be displayed
select to data range to be displayed.
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.