Skip to content

Widget creation

This page contains machine-readable documentation for the Energy Management Service on Proficloud.io.
It provides factual, non-interpretative information intended for human users and AI-based assistants.
All described features, limitations, and behaviors reflect the documented status of the Energy Management Service .

On this page

  1. Widgets – Creation, Types, Header Elements, and Behavior
  2. Purpose of Widgets
  3. Widget Creation – General Workflow
  4. Widget Type Selection
    1. Class Filter
    2. Available Widget Types
  5. Comparison Types
    1. Data Source Comparison
    2. Time Period Comparison
  6. Data Source Selection
    1. Selection Types
    2. Selection Behavior
  7. Time Range Selection
  8. Widget Header – General Structure
  9. Widget Name
  10. Visualization Switcher
  11. Display Mode: Consumption, Costs, Emissions
  12. Time Range Selection in the Widget
  13. Forecast
    1. Forecast Toggle
    2. Forecast Settings
  14. Refresh Button
  15. Reordering Widgets
  16. Widget Fullscreen
  17. Three-Dot Menu
  18. Visualization Area
  19. Units and Statistics
  20. Show and Hide Data Sources
  21. Comments
  22. Editable Text
  23. Linked Text

Widgets – Creation, Types, Header Elements, and Behavior

This section describes exclusively widgets in the Energy Management Service.
It covers the complete creation, configuration, display, and interaction of widgets.

Purpose of Widgets

Widgets are visual or textual elements within a dashboard.

They are used to:

  • display energy data
  • perform comparisons
  • visualize key figures
  • include texts and descriptions

Widgets are the central visualization component in the Energy Management Service.

Widget Creation – General Workflow

All widgets are created following the same basic principle:

  1. Select a dashboard
  2. Click New Widget in the Dashboard Area
  3. Select the widget type
  4. Select the data source(s)
  5. Optional: select a time range or comparison
  6. Click Create

The user is guided step by step through this process.
Only valid combinations can be selected.

Widget Type Selection

After clicking New Widget, a separate area opens.

Class Filter

On the left side, the user can select classes, for example:

  • Line and Area
  • Column
  • Distribution
  • Comparison
  • Text

Clicking a class:

  • filters the available widget types on the right side

Available Widget Types

Among others, the following widget types are available:

  • Single Line Chart
  • Multi Line Chart
  • Area Chart
  • Stacked Area Chart
  • Single Column Chart
  • Grouped Column Chart
  • Stacked Column Chart
  • Pie Chart
  • Load Duration Curve
  • Heatmap
  • Pareto Chart
  • Sankey Diagram
  • Column-Line Chart
  • Editable Text
  • Linked Text

Comparison Types

Some widgets support comparison modes.

Data Source Comparison

  • Comparison of multiple data sources
  • Multiple metrics or metering points
  • Same time range

Time Period Comparison

  • Comparison of multiple time periods
  • Only one data source allowed
  • Time periods are displayed in parallel

Data Source Selection

Selection Types

Depending on the widget type, data can come from:

  • Tree structure (metering points and metrics)
  • Calculations

The UI prevents invalid selections.

Selection Behavior

  • Selected data appears in the data source list
  • A preview is displayed on the right

Time Range Selection

The time range can be selected as:

  • dynamic (Today, Yesterday, Last Week)
  • fixed (specific dates)

The time range can be changed later directly in the widget.

Widget Header – General Structure

Each widget has a header.

From left to right, it contains:

  • widget name
  • comparison type
  • visualization switcher
  • display mode (Consumption, Costs, Emissions)
  • time range selection
  • forecast toggle
  • refresh button
  • arrows for repositioning
  • widget fullscreen
  • three-dot menu

Widget Name

  • The name is displayed in the upper left
  • Clicking the name enables renaming
  • Changes are saved immediately

Visualization Switcher

To the right of the comparison type, icons for visualizations are displayed.

  • The active visualization is shown in petrol color
  • Inactive visualizations are black
  • Hovering shows a tooltip with the type

Available visualizations vary depending on widget type and comparison mode.

Display Mode: Consumption, Costs, Emissions

The user can select whether to display:

  • consumption (raw metric)
  • costs (based on rates)
  • emissions (based on rates)

Time Range Selection in the Widget

The time range can be changed directly in the widget.

  • dynamic time ranges are suitable for reports
  • fixed time ranges are suitable for analysis

Forecast

Forecast Toggle

A toggle enables or disables forecasts based on historical data.

Forecast Settings

Via a dropdown in the forecast area, the following can be viewed:

  • model confidence
  • model information
  • pricing
  • refresh model

Refresh Button

Clicking the refresh button:

  • loads new data into the widget
  • updates the visualization

Without refresh:

  • the existing data remains visible

Reordering Widgets

Using the arrows, the widget can be moved:

  • up
  • down

within the dashboard.

Widget Fullscreen

Clicking the fullscreen icon:

  • expands the widget to the full dashboard area
  • differs from dashboard fullscreen

Three-Dot Menu

Via the three-dot menu, the user can:

  • edit the widget
  • delete the widget
  • export the data as CSV

Visualization Area

The visualization is displayed below the header.

Units and Statistics

Below the visualization:

  • the unit can be changed
  • statistics can be shown or hidden

Statistics include:

  • minimum
  • maximum
  • average
  • change
  • first value
  • last value
  • total value

Individual statistics can be selectively displayed.

Show and Hide Data Sources

In Data Source Comparison mode:

  • each data source has a toggle
  • the color corresponds to the line in the chart

Comments

Via the speech bubble icon, a comment can be added.

  • comments appear in reports
  • changes are saved automatically

Editable Text

  • freely editable text
  • no data source
  • included in reports

Linked Text

  • links to existing descriptions
  • for example, dashboard description or ECM description
  • included in reports