Real-time data visualizations with GoJS

We are witnesses to the fourth industrial revolution, which is no longer just a bold vision of the future. The widespread use of the IoT and the cloud is optimizing business processes while reducing costs. This article describes how data can be sent to a server in real-time and then visualized using a GoJS library.

It is becoming increasingly common for machines to communicate with one another and automatically send error notifications that wind up in the cloud application. A prominent place in this trend is occupied by the IoT (Internet of Things), which allows users to analyse the activity of various electronic devices without needing to use metering tools. This kind of solution functions in automation, transport, construction, manufacturing, and healthcare. 

The acquired data can be easily visualised using GoJS – a JavaScript library that offers rich functionality enabling the creation of graphical elements. These elements can then be arranged into a relatively simple system similar to SCADA industrial software.

We will show you how we created a diagram presenting the circulation of a house central heating system (CH) and domestic hot water (DHW).

VISUALISATION AND SIMULATION OF HOUSE HEATING SYSTEM

Our diagram presents metering devices like furnace pressure gauge, furnace and boiler thermometer, and air temperature thermometer in particular rooms. The visualization also presents water pumps which are coloured green or red depending on their status as active/inactive.

We used .NET Core technology with a SignalR library to prepare this simulation, because it allows developers to present data in real time. SignalR is perfect for visualisation of data taken from steering system sensors. When monitoring the system, the user does not have to continue refreshing the page in order to see the current pressure in the boiler

The visualisation shows the heating system for a single-family home. We see two rooms with radiators and thermometers, as well as a basement with furnace, pumps, and boiler.

In order to present the system’s operation without connecting the driver to sensors, we have developed a very simply desktop programme that facilitates the sending of data to a .NET Core Web Api. In the real world, this kind of driver could be developed using Raspberry PI, PLC Driver, or even with the simplest AVR microcontroller connected to a communication module allowing HTTP requests to be sent to the server.

COMMUNICATION BETWEEN COMPONENTS

Communication between our simulator and the diagram via a front-end application containing a GoJS diagram is a relatively simple process.

Communication can also be two-way (full-duplex). The desired temperature can be set using a GoJS diagram, which then sends this information that is later sent to the driver through the API.

We can have more than one front-end application receiving data from the API. In this way, several people can exercise control over the system. We did not create a database for this particular project, but it can of course be done. The database may contain information about the system’s state along with the current time and data of the person controlling it. Possessing this data enables reporting, analysis, and process optimization.  

HOW DOES IT WORK?

LET US SHOW YOU SOME CODE

The WebApi controller accepts in its action a Json HttpPost object, which contains all of the information sent by the driver. Next, it uses the SignalR library to send data to all clients.

      [HttpPost]
       public async Task<ActionResult> Post([FromBody] SystemState command)
       {
           try
           {
               if (!ModelState.IsValid)
               {
                   return BadRequest();
               }

               await this.hubContext.Clients.All.SendAsync("UpdateDiagram", command);

               return Ok();

           }
           catch (Exception)
           {
               return StatusCode(500);
           }
       }

However, the front-end application contains code that opens a connection via the SignalR library, and then opens a definition of the function that is performed after an “UpdateDiagram” message is sent along with a SystemState object.

constructor() {
       this.connection = new HubConnection(this.uri);
       this.connection.start();
       this.connection.on('UpdateDiagram', (data: SystemState) => {
           this.updateDiagram(data);
       });
   }

GOJS APPLICATION – HIGH SCALABILITY AND CLEAR DATA

Not all processes demand systems as complicated as SCADA.

We’ve deliberately used a simple example in order to demonstrate the benefits the visualisation provides in real time, which makes it easier to track alarm states without needing to refresh the application. 

However, the application itself, created using GoJS, is distinguished by scalability and data clarity.

Want to learn more about GoJS? Check out this article.