GLG Real-Time Charts are high-performance components optimized for large datasets and rapid update rates. Any chart may be used as a standalone component or as part of a larger GLG HMI display. Both Strip Charts and XY Scatter Plots are available.

The GLG Real-Time Chart is capable of displaying multiple lines with tens of thousands of data points and updating them with real-time data. It can position points at uneven intervals using time stamps and handle invalid or missing data points.

The chart maintains a history buffer and supports integrated zooming and scrolling, which allows to scroll through large datasets of historical data even while the new data points are being added. It can adjust the size of the history buffer on the fly and erase or show plot lines without losing already plotted data, as shown in this online demo.

The chart also supports multiple Y axes, point tooltips, cross-hair cursor feedback and point selection with the mouse, as shown in the online demos. Chart features include custom label formatters, grid and level lines, configurable minor and major tick intervals, integrated legends and many other features.

The charts are deployed on the web using the GLG JavaScript Library. The GLG React, Angular and Next.js components may be used to to integrate GLG Charts in the React, Angular and Next.js frameworks. as shown in the online demos.

Point and Click Editor and Prototyping

A chart can be customized by editing its properties or resources using the GLG Graphics Builder, a graphical editor with point and click interface.

The Builder can also be used to customize the chart's layout and add chart annotations. Using the Builder, developers can create dashboards containing multiple charts, as well as custom HMI displays with charts, dials, process symbols and other dynamic objects as shown in the demos.

The Builder's Run mode allows you to prototype a chart's behavior with simulated data. The Run mode toolbar includes controls for testing the chart's performance.

The final drawing containing the customized chart is saved into a file which is then used by one of the run-time libraries listed in the Deployment Options section.

For details on editing chart properties, see the Using GLG Real Time Charts chapter in the GLG Builder and Animation Tutorial.

Deployment Options

GLG Real-Time Charts are deployed on a web page using the GLG JavaScript Library. The library uses HTML5 canvas to render a dynamically updating real-time chart in a web browser and supports all major browsers: Chrome, Firefox, Edge, Safari and mobile.

The React, Angular and Next.js GLG components are provided in the React, Angular and Next.js integration examples and may be used to integrate GLG drawings in the React, Angular and Next.js frameworks. The GLG-related part of the JavaScript source code may be shared between the React, Angular, Next.js and standalone HTML versions of an application, as shown in the GLG demos and examples.

The library provides API methods for loading a chart's drawing and supplying real-time data for the chart. An application can obtain data using any custom data acquisition mechanism; the data is then pushed into the chart using the GLG API calls.

The chart supports tooltips, panning and zooming, custom annotations and many other features. An application can dynamically configure the chart via resources at run time.

The GLG Graphics Server for an alternative server-side Web deployment of legacy C# and Java applications is also available. The ASP.NET version of the Graphics Server is deployed via Windows IIS, while the JSP version is deployed with a JavaEE application server, such as Tomcat.

Pricing

The Mobile Edition of the GLG Real-Time Charts Package includes the Real-Time Charts widget set, a Limited Edition of the Graphics Builder and the GLG HTML5/JavaScript Library.

The Basic Edition of the Graphics Builder can be used to create dashboards containing multiple charts and other widgets.

› Details of the GLG Widgets Package