Home | Demos | Products

Supply Chain Visualization Web Demo (HTML5 & JavaScript)

This is a pure HTML5 and JavaScript example that demonstrates the use of the GLG JavaScript API to create dynamic nodes and links at run time, position them on the map and animate with real-time data. More information

  • Overview
  • Features
  • User Interaction
  • Overview

    The drawing 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 nodes and links are added at run time using the GLG JavaScript API. The demo reads node information (node name and position) from a URL and creates nodes on the map dynamically, based on the information received. It also reads connectivity information and connects nodes with dynamic links. All objects in the drawing (nodes, links, display labels, map polygons, etc.) may be dynamically updated by changing object attributes.

    Any object in the drawing may be selected with the mouse to drill down or display the object's status. The demo uses similated data. In an application, the data would be coming from a live data source or a database.

    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, add dynamic nodes and links, animate them with real-time data and handle user interaction.

    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.


    The demo demonstrates GLG features that can be used in supply chain monitoring applications:

    User Interaction

    Toolbar buttons may be used control the demo features (hover the mouse over a button, or touch and hold on mobile devices, to show a button's tooltip):

    Mouse selection

    Objects on the map may be selected with the mouse (or touch on mobile devices):