DocsArrow - Elements Webflow Library - BRIX Templates
UI_Graph

UI_Graph

The UI_Graph element enables custom graphs to be built either by back-end control logic or manually set in the editor.

The graph generated by the UI_Graph element can be utilized for a variety of purposes, including data visualization, performance monitoring, analytics, process monitoring, simulation and modeling, decision making, and enhancing user interfaces by providing visually appealing and interactive representations of data.

UI Elements Panel - Graphs

Name: This field can be renamed to be more specific. (i.e.., Solar Bank Graph South)

Visibility Digital Join ID: If empty, the object will be visible. If a value is entered, it will be invisible until the value is received from the control system.

Press Join ID: The unique ID for the button to be sent to the control system. The Join ID also provides feedback from the control system.

Dynamic Text Serial Join ID: Allows the button label to be dynamically set from the control system.

Open Page Modifier Panel, add a Graph:

Adding the Graph

Empty Graph added

Next, add the Graph Element. The Graph Element is the gauge which will display the level to the user. In the UI Elements Panel, select the Graph tab, find your Graph in the list, then in your Project Folder, go to the Assets > ParallaxControlSystem > Prefabs > UI_Elements > Graphs and then drag in the UPL_ UI_ GraphElement to the 'Graph Elements Prefab' field as shown below. This tells the Graph which prefab to use to display the data. Note: the prefab can be styled or customized.

Let the Graph know which Graph Element to use for populating data

Set values manually:

If you'd like to set the values manually, add the element values to the Graph Element Values index field. Press Set Analog Values. Note: If the previous step for dragging in the prefab was note followed, you will get a null ref exception error.

Manually set the values

Example graph populated with data

Set values programmatically:

Alternatively, you may set the fields programmatically by sending an array of analog float values to the matching Analog Join ID:

Add the 'message-array' node to the Node-RED canvas.

Parallax message-array node

Configure the Node:

Parallax message-array node properties

Configure the inject node:

Inject node properties

The inject node will send the following payload:

Debug Node

Ensure the JoinID's match:

UI Elements Panel - Graph

The graph bars will instantiate and values will propagate to the graph prefab on each update: