# |
Step |
Actions |
Screenshot
|
1
|
Create a Graphics Template
|
-
Go to Graphics > Templates
-
Click on ‘Add New’
-
Specify the following data:
-
Customer
-
Graphic Name (e.g. Demo Graphic)
-
Graphic Description (e.g. Some description)
-
Click on ‘Save’
-
Click on ‘Edit’
|
|
2
|
Define a Layout for the created Graphics Template
|
2.1
|
Configure Canvas
|
-
Open Configuration Tab
-
Background color: White (default)
-
Isometric Grid: Off
-
Viewer Scaling: Scale Horizontally
|

|
2.2
|
Configure widget group ‘This Month vs Last Month Total Energy Usage’
|
Widget appearance in Graphics Viewer
|
2.2.1
|
Add Widget group title
|
-
Put a Text widget on the canvas:
-
Open Widgets Library, find Text Widget (Text > Text)
-
Click on ‘Add’ button nearby Text widget
-
Drag Text widget in the upper middle of the canvas
-
Change the text of the Text widget:
-
Select Text widget, open Properties tab
-
Specify Text: 'This Month vs Last Month Total Energy Usage'
|
Widget Appearance in Graphics Builder
|
2.2.2
|
Configure Widget ‘This Month Total Energy Usage’
|
-
Put a Table widget on the canvas:
-
Open Widgets Library, find Table Widget (Text > Table)
-
Click on ‘Add’ button nearby Text widget
-
Place the widget below already configured widget group title
-
Configure the Table widget:
-
Select Table widget, open Properties tab
-
Style:
-
Width: 365
-
Height: 70
-
Data Source:
-
Source: History
-
Link by: Name
-
Name: <enter energy point name here> - point of interest (energy consumption)
-
Set Range: This Month - period of interest
-
Interpolate: On
-
Frequency (In Seconds): 86400 - daily energy consumption
-
Coumns:
-
TImestamp - to see the period
-
Value - to see the value of interest
-
Data Pipeline:
-
Add Transformer: Cumulative Delta - gets daily energy consumption
-
Attr: value
-
Target Attr: value
-
Group by: uuid
-
Calculate Percentage: No
-
Add Transformer: Rollup Data - gets monthly total energy consumption
-
Digest: Sum
-
Frequency: Monthly
-
Group BY: empty - no need for grouping
-
Add Transformer: Set Precision - round-off value to 2 places
-
Attr: value
-
Precision 2
-
Add Transformer: ISO Formatter - converts db timestamp format (UTC) to YYYY-MM-DD
-
Attr: timestamp
-
Format: YYYY-MM-DD
-
Add Title for a widget:
-
Put a Text widget on the canvas:
-
Open Widgets Library, find Text Widget (Text > Text)
-
Click on ‘Add’ button nearby Text widget
-
Drag Text widget to the left of the table
-
Change the text of the Text widget:
-
Select Text widget, open Properties tab
-
Specify Text: 'This Month'
|

Widget Appearance in Graphics Builder
Table Properties - Data and Style
Table Properties - Data Source
Table Properties - Data Pipeline
|
2.2.3
|
Configure Widget ‘Last Month Total Energy Usage’
|
-
Copy and paste widget created on step 2.2.2 ‘This Month Total Energy Usage’
-
Place the widget below widget created on step 2.2.2 ‘This Month Total Energy Usage’
-
Configure the Table widget:
-
Data Source
-
Set Range: Last Month - period of interest
-
NOTE: all other required widget’s Configurations are already copied
|

Widget Appearance in Graphics Builder
Table Properties - Data and Style
Table Properties - Data Source
Table Properties - Data Pipeline
|
2.2.4
|
Configure Widget ‘Total Energy Usage Delta’
|
-
Put a Table widget on the canvas:
-
Open Widgets Library, find Table Widget (Text > Table)
-
Click on ‘Add’ button nearby Text widget
-
Place the widget below already configured widget ‘Last Month Total Energy Usage’ (step 2.2.3)
-
Configure the Table widget:
-
Select Table widget, open Properties tab
-
Style:
-
Width: 125
-
Height: 70
-
Data Source:
-
Source: History
-
Link by: Name
-
Name: <enter energy point name here> - point of interest (energy consumption)
-
Set Range: Last 90 Days - data horizont to capture current month’s and last month’s data
-
Interpolate: On
-
Frequency (In Seconds): 86400 - daily energy consumption
-
Coumns:
-
Value - to see the value of interest
-
Data Pipeline:
-
Transformer: Cumulative Delta - gets daily energy consumption
-
Attr: value
-
Target Attr: value
-
Group by: uuid
-
Calculate Percentage: No
-
Filter: not equal to (!=) - eliminates 0 values from data massive (sites without energy meters / available data)
-
Attr: value
-
Value: 0
-
Transformer: Rollup Data - gets monthly total energy consumption
-
Digest: Sum
-
Frequency: Monthly
-
Group BY: empty - no need for grouping
-
Transformer: Set Precision - round-off value to 2 places
-
Attr: value
-
Precision 2
-
Transformer: ISO Formatter - converts db timestamp format (UTC) to YYYY-MM-DD
-
Attr: timestamp
-
Format: YYYY-MM-DD
-
Add title for a widget:
-
Put a Text widget on the canvas:
-
Open Widgets Library, find Text Widget (Text > Text)
-
Click on ‘Add’ button nearby Text widget
-
Drag Text widget to the left of the table
-
Change the text of the Text widget:
-
Select Text widget, open Properties tab
-
Specify Text: 'Delta'
|
Widget Appearance in Graphics Builder
Table Properties - Data and Style
Table Properties - Data Source
Table Properties - Data Pipeline
|
2.3
|
Configure widget group ‘Energy Usage Breakdown’
|
Widget Appearance in Graphics Viewer
|
2.3.1
|
Add Widget group title
|
-
Put a Text widget on the canvas:
-
Open Widgets Library, find Text Widget (Text > Text)
-
Click on ‘Add’ button nearby Text widget
-
Drag Text widget below widget group ‘This Month vs Last Month Total Energy Usage’ (p.2.2)
-
Change the text of the Text widget:
-
Select Text widget, open Properties tab
-
Specify Text: ‘Energy Usage Breakdown’
|
Widget Appearance in Graphics Builder
|
2.3.2
|
Configure Widget ‘This Month Energy Usage Breakdown’
|
-
Put a Chart widget on the canvas:
-
Open Widgets Library, find Table Widget (Charting > Chart)
-
Click on ‘Add’ button nearby Chart widget
-
Place the widget below already configured widget group title
-
Configure the Chart widget:
-
Select Chart, open Properties tab:
-
Widget Name: Pie Chart - This Month
-
Chart Type: Pie Chart
-
Style:
-
Width: 650
-
Height: 400
-
Advanced Options
-
X Attribute Name: Site Name
-
Y Attribute Name: value
-
Show Legend: On
-
Legend Position: Right
-
Show Data Labels: On
-
Chart Theme: Multicolor
-
Data Source:
-
Source: History
-
Link by: Name
-
Name: <enter energy point name here> - point of interest (energy consumption)
-
Set Range: This Month - data range of intetrest
-
Interpolate: On
-
Frequency (In Seconds): 86400 - daily energy consumption
-
Data Pipeline:
-
Transformer: Cumulative Delta - gets daily energy consumption
-
Attr: value
-
Target Attr: value
-
Group By: uuid
-
Calculate Percentage: no
-
Transformer: Parse URI - retrieves parameters to be used for filtering on subsequent pipeline steps
-
Transformer: Rollup Data - gets monthly total energy consumption
-
Digest: Sum
-
Frequency: None
-
Group BY: site_name - groups energy consumption by site name
-
Transformer: Sort Data - orders pie chart slices from smallest to biggest
-
Attr: value
-
Is Timestamp: false
-
Transformer: Reverse List -displays pie chart slices from biggest to smallest
-
Add title for a widget:
-
Put a Text widget on the canvas:
-
Open Widgets Library, find Text Widget (Text > Text)
-
Click on ‘Add’ button nearby Text widget
-
Drag Text widget to the upper left of the Chart
-
Change the text of the Text widget:
-
Select Text widget, open Properties tab
-
Specify Text: 'This Month'
|
Widget Appearance in Graphics Builder
Widget Properties - Widget Name and Chart Type
Widget Properties - Style
Widget Properties - Advanced Options
Widget Properties - Data Source
Widget Properties - Data Pipeline
|
2.3.3
|
Configure Widget ‘Last Month Energy Usage Breakdown’
|
-
Copy and paste widget created on step 2.3.2 ‘This Month Energy Usage Breakdown’
-
Place the widget to the right of the widget created on step 2.3.2 ‘This Month Energy Usage Breakdown’
-
Configure the Chart widget:
-
Select Chart, open Properties tab
-
Widget Name: Pie Chart - Last Month
-
Data Source
-
Set Range: Last Month - period of interest
-
NOTE: all other required widget’s Configurations are already copied
-
Add title for a widget:
-
Put a Text widget on the canvas:
-
Open Widgets Library, find Text Widget (Text > Text)
-
Click on ‘Add’ button nearby Text widget
-
Drag Text widget to the upper right of the Chart
-
Change the text of the Text widget:
-
Select Text widget, open Properties tab
-
Specify Text: 'Last Month'
|
Widget Appearance in Graphics Builder
Widget Properties - Widget Name and Chart Type
Widget Properties - Style
Widget Properties - Advanced Options
Widget Properties - Data Source
Widget Properties - Data Pipeline
|
2.4
|
Configure widget group ‘Total Energy Usage Trend’
|
Widget Appearance in Graphics Viewer
|
2.4.1
|
Add Widget group title
|
-
Put a Text widget on the canvas:
-
Open Widgets Library, find Text Widget (Text > Text)
-
Click on ‘Add’ button nearby Text widget
-
Drag Text widget below widget group ‘Energy Usage Breakdown’ (p.2.3)
-
Change the text of the Text widget:
-
Select Text widget, open Properties tab
-
Specify Text: 'Total Energy Usage Trend'
|
Widget Appearance in Graphics Builder
|
2.4.2
|
Configure Widget ‘This Month Total Energy Usage Trend’
|
-
Put a Chart widget on the canvas:
-
Open Widgets Library, find Table Widget (Charting > Chart)
-
Click on ‘Add’ button nearby Chart widget
-
Place the widget below already configured widget group title
-
Configure the Chart widget:
-
Select Chart, open Properties tab:
-
Widget Name: Line Chart - This Month Trend
-
Chart Type: Line Chart
-
Style:
-
Width: 650
-
Height: 400
-
Advanced Options
-
X Attribute Name: Timestamp
-
Y Attribute Name: value
-
Show Legend: Off
-
Show Data Labels: On
-
Show X-Axis Grid: On
-
Show Y-Axis Grid: On
-
Stepped line: false
-
Chart Theme: Default
-
Data Source:
-
Source: Widget - will reuse the data source of already configured Widget
-
Widget: Pie Chart - This Month - the widget ‘This Month Energy Usage Breakdown’ created on step 2.3.2
-
Data From: Original Data - use the original data that was passed to the source widget before passing through the data pipeline.
-
Data Pipeline:
-
Transformer: Cumulative Delta - gets daily energy consumption
-
Attr: value
-
Target Attr: value
-
Group By: uuid
-
Calculate Percentage: no
-
Transformer: Rollup Data - gets daily total energy consumption
-
Digest: Sum
-
Frequency: Daily
-
Group BY: (blank)
-
Transformer: Set precision - applies rounding to optimize float values display on chart
-
Attr: value - Pont’s value will be rounded
-
Precision: 2 - 2 decimal places
-
Add title for a widget:
-
Put a Text widget on the canvas:
-
Open Widgets Library, find Text Widget (Text > Text)
-
Click on ‘Add’ button nearby Text widget
-
Drag Text widget to the upper left of the Chart
-
Change the text of the Text widget:
-
Select Text widget, open Properties tab
-
Specify Text: 'This Month'
|
Widget Appearance in Graphics Builder
Widget Properties - Widget Name and Chart Type
Widget Properties - Style
Widget Properties - Advanced Options
Widget Properties - Data Source
Widget Properties - Data Pipeline
|
2.4.3
|
Configure Widget ‘Last Month Total Energy Usage Trend’
|
-
Copy and paste widget created on step 2.4.3 ‘This Month Total Energy Usage’
-
Place the widget to the right of the widget created on step 2.4.3 ‘This Month Energy Usage Breakdown’
-
Configure the Chart widget:
-
Select Chart, open Properties tab:
-
Widget Name: Pie Chart - Last Month
-
Data Source:
-
Widget: Pie Chart - Last Month - the widget ‘This Month Energy Usage Breakdown’ created on step 2.3.2
-
NOTE: all other required widget’s Configurations are already copied
-
Add title for a widget:
-
Put a Text widget on the canvas:
-
Open Widgets Library, find Text Widget (Text > Text)
-
Click on ‘Add’ button nearby Text widget
-
Drag Text widget to the upper right of the Chart
-
Change the text of the Text widget:
-
Select Text widget, open Properties tab
-
Specify Text: 'Last Month'
|
Widget Appearance in Graphics Builder
Widget Properties - Widget Name and Chart Type
Widget Properties - Advanced Options
Widget Properties - Data Source
Widget Properties - Data Pipeline
|
2.5
|
Configure widget group ‘Top 5 sites with most energy usage'
|
|
2.5.1
|
Add Widget group title
|
-
Put a Text widget on the canvas:
-
Open Widgets Library, find Text Widget (Text > Text)
-
Click on ‘Add’ button nearby Text widget
-
Drag Text widget below widget group ‘Total Energy Usage Trend’ (p.2.4)
-
Change the text of the Text widget:
-
Select Text widget, open Properties tab
-
Specify Text: '‘Top 5 sites with most energy usage'
|
Widget Appearance in Graphics Builder
|
2.5.2
|
Configure Widget ‘Top 5 sites with most energy usage - This Month’
|
-
Put a Chart widget on the canvas:
-
Open Widgets Library, find Table Widget (Charting > Chart)
-
Click on ‘Add’ button nearby Chart widget
-
Place the widget below already configured widget group title
-
Configure the Chart widget:
-
Select Chart, open Properties tab:
-
Widget Name: Bar chart - Top 5 this month
-
Chart Type: Horizontal Bar Chart
-
Style:
-
Width: 650
-
Height: 400
-
Advanced Options
-
X Attribute Name: Site Name
-
Y Attribute Name: value
-
Show Legend: Off
-
Show Data Labels: On
-
Show X-Axis Grid: On
-
Show Y-Axis Grid: On
-
Stepped line: false
-
Chart Theme: Default
-
Data Source:
-
Source: Widget - will reuse the data source of already configured Widget
-
Widget: Pie Chart - This Month - the widget ‘This Month Energy Usage Breakdown’ created on step 2.3.2
-
Data From: Original Data - use the original data that was passed to the source widget before passing through the data pipeline.
-
Data Pipeline:
-
Transformer: Cumulative Delta - gets daily energy consumption
-
Attr: value
-
Target Attr: value
-
Group By: uuid
-
Calculate Percentage: no
-
Transformer: Parse URI - retrieves parameters to be used for filtering on subsequent pipeline steps
-
Transformer: Rollup Data - gets daily total energy consumption
-
Digest: Sum
-
Frequency: none
-
Group BY: site_name - data grouping by Site Name
-
Transformer: Sort Data - orders bars from smallest to biggest
-
Attr: value
-
Is Timestamp: false
-
Transformer: Limit - gets top 5 values
-
Limit: 5
-
From bottom: Yes
-
Transformer: Reverse List - displays bars from biggest to smallest
-
Transformer: Set precision - applies rounding to optimize float values display on chart
-
Attr: value - Pont’s value will be rounded
-
Precision: 2 - 2 decimal places
-
Add title for a widget:
-
Put a Text widget on the canvas:
-
Open Widgets Library, find Text Widget (Text > Text)
-
Click on ‘Add’ button nearby Text widget
-
Drag Text widget to the upper left of the Chart
-
Change the text of the Text widget:
-
Select Text widget, open Properties tab
-
Specify Text: 'This Month'
|
 Widget Appearance in Graphics Builder
Widget Properties - Widget Name and Type
Widget Properties - Widget Style
Widget Properties - Advanced Options
Widget Properties - Data Source
Widget Properties - Data Pipeline
|
2.5.3
|
Configure Widget ‘Top 5 sites with most energy usage - Last Month’
|
-
Copy and paste widget created on step 2.5.4 ‘Configure Widget ‘Top 5 sites with most energy usage - This Month’’
-
Place the widget to the right of the widget created on step 2.5.4 ‘Configure Widget ‘Top 5 sites with most energy usage - This Month’’
-
Configure the Chart widget:
-
Select Chart, open Properties tab:
-
Widget Name: Bar chart - Top 5 last month
-
Data Source:
-
Widget: Pie Chart - Last Month - the widget ‘This Month Energy Usage Breakdown’ created on step 2.3.2
-
NOTE: all other required widget’s Configurations are already copied
-
Add title for a widget:
-
Put a Text widget on the canvas:
-
Open Widgets Library, find Text Widget (Text > Text)
-
Click on ‘Add’ button nearby Text widget
-
Drag Text widget to the upper right of the Chart
-
Change the text of the Text widget:
-
Select Text widget, open Properties tab
-
Specify Text: 'Last Month'
|
Widget Appearance in Graphics Builder
Widget Properties - Widget Name and Type
Widget Properties - Widget Style
Widget Properties - Advanced Options
Widget Properties - Data Source
Widget Properties - Data Pipeline
|
3
|
Set up Graphics Configuration
|
-
Go to Graphics > Configuration
-
Click on ‘Add New’
-
Specify the following data:
-
Customer (specify the same customer as for ‘Demo Graphic’ (a Graphic Template already created on Step #1)
-
Configuration Name
-
Configuration Description
-
Linked Graphic: ‘Demo Graphic’ (a Graphic Template already created on Step #1)
-
Default Graphic: ‘Demo Graphic’ (a Graphic Template already created on Step #1)
-
Click ‘Next’
-
Specify ‘Link To’ (a page to display a Graphic): Customer
-
Click ‘Save’
|
|
4
|
View the created Graphic
|
-
Go to the Customer Page you linked a Graphic Template on step 3 (Sites > Filter by Customer > Customer Details)
-
The Graphic will be opened by default
|
 |