GLG Web / Mobile Dashboard Demo (HTML5 & JavaScript)

This example that loads a custom dashboard created with the GLG Graphics Builder and animates the drawing with real-time data using the GLG JavaScript Library API.

To change dial values manually, click on the Manual toggle to stop updates from live data, then drag the dials with the mouse (or touch and drag on mobile devices).

More Information React Angular


The drawing containing a custom dashboard was created with the GLG Graphics Builder, which allows a user to create graphical objects and define their dynamic behavior using a point-and-click interface, without the need to write graphics code by hand. The dashboard uses pre-built widgets from the GLG Controls and Real-Time Charts widget sets. Custom widgets can also be created using the Graphics Builder. The drawing is saved into a file (dashboard.g). Click here to see more dials, meters, toggles and other available widgets.

The GLG JavaScript Library is used to deploy the drawing on a web page. The library provides an API to load and display the drawing, animate it with real-time data and handle user interaction. In this demo, generated values are used for animation to demonstrate fuel and temperature alarms.

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, web and mobile versions of an application.

User Interaction

To change dial values manually, click on the Manual toggle to stop updates from live data, then drag the dials with the mouse (or touch and drag on mobile devices) to adjust displayed values.