Data Visualisation
Data visualization is the graphical representation of information and data. It involves using visual elements such as charts, gauges and maps to present data in a way that is easy to understand.
Last updated
Data visualization is the graphical representation of information and data. It involves using visual elements such as charts, gauges and maps to present data in a way that is easy to understand.
Last updated
Visualize data across a span of time with a value-scaled color gradient. Heat map charts are ideal for visualizing large datasets and highlighting patterns, trends, or anomalies at a glance.
Energy consumption patterns
Temperature monitoring
Site cccupancy
System performance analysis
Data quality tracking
Monitoring environmental metrics
Examples below show the Heat Map Widget Configuration entry fields and resultant effect on the widget displayed.
Auto Min & Max Toggle A feature that automatically adjusts the minimum and maximum values of a widget based on the data or input range.
Min Value/Max Value Inputs Allows users to manually set the minimum and maximum values for the widget's functionality or display.
Inactive Color Selection Enables users to choose a color to represent the data's inactive state.
Range Selector A tool to define a gradient or range of colors corresponding to specific values or ranges within the widget. Colors can be selected through the color selector, HEX code or RGB code.
Visualize value of any data stream. Radial gauge charts are excellent for displaying real-time or snapshot metrics in an intuitive, easy-to-read format.
Displaying real-time metrics
Threshold alerts
Equipment operational efficiency
Building comfort metrics
Utility cost metrics
Performance goal progress tracking
Examples below show the Radial Guage Widget Configuration entry fields and resultant effect on the widget displayed.
Min Value/Max Value Inputs Allows users to manually set the minimum and maximum values for the widget's functionality or display.
Guage Inner Size Adjusts the thickness or size of the gauge's inner ring or arc in percentage for visual customization.
Range Selector A tool to define a gradient or range of colors corresponding to specific values or ranges within the widget. Colors can be selected through the color selector, HEX code or RGB code.
Use this chart to visualize the total quantities for any time-series data values. Pie and donut charts are ideal for visualizing proportional data, showing how different components contribute to a whole.
Energy and resource breakdown
Occupancy metrics
Expense and cost distribution
Sustainability performance indicators
Examples below show the Pie & Donut Chart Widget Configuration entry fields and resultant effect on the widget displayed.
Guage Inner Size Adjusts the thickness or size of the gauge's inner ring or arc in percentage for visual customization.
Use this funnel chart to visualize the total quantities for any time-series data values with sequential stages. Funnel charts can be effectively used as a comparison tool to evaluate processes or performance across multiple systems, time periods, or categories.
System performance comparison
Resource usage comparison
Sustainability tracking
Incident management
Examples below show the Funnel Chart Widget Configuration entry fields and resultant effect on the widget displayed.
Use this activity gauge to visualize the multiple time-series data values with sequential stages. This chart provides a quick visual representation of progress or performance against defined thresholds, making them suitable for tracking system status, resource utilization, or operational efficiency.
Resource consumption monitoring
Equipment performance
Operational efficiency
Data quality monitoring
Examples below show the Activity Gauge Chart Widget Configuration entry fields and resultant effect on the widget displayed.
Max Thickness Input Adjusts the thickness or size of the gauge's rings or arc in percentage for visual customization.
Center Value Input Allows users to display a specific value in the center of the activity gauge representing the minimum, average or maximum value.
Freeform allows you to place data over any image or draw custom heatmaps.
Floorplans and equipment mapping
Site context comparison
Customized visual data display
The actions of the Image Freeform Widget can be broken down into the structure below.
Upload Image -> Set Initial Zoom Level -> Enable Edit Toggle -> Select Data Streams -> Draw rectangles/polygons to represent data -> Utilise Data Timeline playback
Examples below show the Image Freeform Widget Configuration entry fields and resultant effect on the widget displayed.
Image Uploader Allows users to upload an image as the base layer for the visualization or interaction.
Initial Zoom Level Sets the default zoom level when the image is first displayed.
Auto Min & Max Toggle A feature that automatically adjusts the minimum and maximum values of a widget based on the data or input range.
Inactive Color Selection Enables users to choose a color to represent the data's inactive state.
Range Selector A tool to define a gradient or range of colors corresponding to specific values or ranges within the widget. Colors can be selected through the color selector, HEX code or RGB code.
Edit Toggle Allows users to switch between viewing and editing modes for the widget.
Data Stream Selection Lets users choose which data streams to display in the widget.
Draw Marker Enables users to place markers linked to the data streams on the image for annotations.
Draw Rectangle Allows users to draw rectangular shapes linked to the data streams for highlighting or bounding areas.
Draw Polygons Enables users to create custom polygon shapes linked to the data streams on the image.
Edit Layers Lets users modify existing layers on the image, such as moving or changing properties.
Drag Layers Allows users to move layers around for repositioning.
Cut Layers Provides tools to split or trim layers as needed.
Remove Layers Deletes selected layers from the image.
Rotate Layers Allows users to rotate layers to adjust their orientation.
Data Timeline Display Visualizes changes over time in the data or image layers. Pause/Play and scroll through the Timeline playback according to the Global Date Range Setpoint (GDRS) that is set.
Data Timeline Speed and Time Range Selection Selects the playback speed and selects the time range for the data visualizations.
*Widget Title, Y Axis, Configuration of Data Streams, and Global Date Range Setpoint (GDRS) are foundational features in widgets that ensure usability and integration. Further information on these features can be found in .
*Widget Title, Y Axis, Configuration of Data Streams, and Global Date Range Setpoint (GDRS) are foundational features in widgets that ensure usability and integration. Further information on these features can be found in .
*Widget Title, Y Axis, Configuration of Data Streams, and Global Date Range Setpoint (GDRS) are foundational features in widgets that ensure usability and integration. Further information on these features can be found in .
*Widget Title, Y Axis, Configuration of Data Streams, and Global Date Range Setpoint (GDRS) are foundational features in widgets that ensure usability and integration. Further information on these features can be found in .
*Widget Title, Y Axis, Configuration of Data Streams, and Global Date Range Setpoint (GDRS) are foundational features in widgets that ensure usability and integration. Further information on these features can be found in .
*Widget Title, Y Axis, Configuration of Data Streams, and Global Date Range Setpoint (GDRS) are foundational features in widgets that ensure usability and integration. Further information on these features can be found in .
