Skip to main content

Graphics Builder - Examples of step-by-step Graphic configuration

  • Updated

Floor Plan with Room Temperature

Visualization

floor-plan-with-room-temperature.png

 

 

Configuration Instructions

Please find configuration instructions at Building a Floor Plan,

 

Energy Usage Dashboard

Visualization

# Step Actions

Screenshot

1

Create a Graphics Template

  1. Go to Graphics > Templates

  2. Click on ‘Add New’

  3. Specify the following data:

    1. Customer

    2. Graphic Name (e.g. Demo Graphic)

    3. Graphic Description (e.g. Some description)

  4. Click on ‘Save’

  5. Click on ‘Edit’

 
step-1.png

2

Define a Layout for the created Graphics Template

2.1

Configure Canvas

  1. Open Configuration Tab

  2. Background color: White (default)

  3. Isometric Grid: Off

  4. Viewer Scaling: Scale Horizontally

step-2.png

Canvas Configuration

2.2

Configure widget group ‘This Month vs Last Month Total Energy Usage’
step-2.2.png
Widget appearance in Graphics Viewer

 

2.2.1

Add Widget group title

  1. Put a Text widget on the canvas:

    1. Open Widgets Library, find Text Widget (Text > Text)

    2. Click on ‘Add’ button nearby Text widget

    3. Drag Text widget in the upper middle of the canvas

  2. Change the text of the Text widget:

    1. Select Text widget, open Properties tab

    2. Specify Text: 'This Month vs Last Month Total Energy Usage'
2.2.1.png
Widget Appearance in Graphics Builder

2.2.2

Configure Widget ‘This Month Total Energy Usage’

  1. Put a Table widget on the canvas:

    1. Open Widgets Library, find Table Widget (Text > Table)

    2. Click on ‘Add’ button nearby Text widget

    3. Place the widget below already configured widget group title

  2. Configure the Table widget:

    1. Select Table widget, open Properties tab

    2. Style:

      1. Width: 365

      2. Height: 70

    3. Data Source:

      1. Source: History

      2. Link by: Name

      3. Name: <enter energy point name here> - point of interest (energy consumption)

      4. Set Range: This Month - period of interest

      5. Interpolate: On

      6. Frequency (In Seconds): 86400 - daily energy consumption

    4. Coumns:

      1. TImestamp - to see the period

      2. Value - to see the value of interest

    5. Data Pipeline:

      1. Add Transformer: Cumulative Delta - gets daily energy consumption

        1. Attr: value

        2. Target Attr: value

        3. Group by: uuid

        4. Calculate Percentage: No

      2. Add Transformer: Rollup Data - gets monthly total energy consumption

        1. Digest: Sum

        2. Frequency: Monthly

        3. Group BY: empty - no need for grouping

      3. Add Transformer: Set Precision - round-off value to 2 places

        1. Attr: value

        2. Precision 2

      4. Add Transformer: ISO Formatter - converts db timestamp format (UTC) to YYYY-MM-DD

        1. Attr: timestamp

        2. Format: YYYY-MM-DD

  3. Add Title for a widget:

    1. Put a Text widget on the canvas:

      1. Open Widgets Library, find Text Widget (Text > Text)

      2. Click on ‘Add’ button nearby Text widget

      3. Drag Text widget to the left of the table

    2. Change the text of the Text widget:

      1. Select Text widget, open Properties tab

      2. Specify Text: 'This Month'

widget-appearance-graphics-builder.png

Widget Appearance in Graphics Builder
 
Table_Properties_-_Data_and_Style.png
Table Properties - Data and Style
 
Table_Properties_-_Data_Source.png
Table Properties - Data Source
Table_Properties_-_Data_Pipeline.png
Table Properties - Data Pipeline

2.2.3

Configure Widget ‘Last Month Total Energy Usage’

  1. Copy and paste widget created on step 2.2.2 ‘This Month Total Energy Usage’

  2. Place the widget below widget created on step 2.2.2 ‘This Month Total Energy Usage’

  3. Configure the Table widget:

    1. Data Source

      1. Set Range: Last Month - period of interest

    2. NOTE: all other required widget’s Configurations are already copied

Widget_Appearance_in_Graphics_Builder.png

Widget Appearance in Graphics Builder
 
Table_Properties_-_Data_and_Style.png
Table Properties - Data and Style
 
Table_Properties_-_Data_Source.png
Table Properties - Data Source
 
Table_Properties_-_Data_Pipeline.png
Table Properties - Data Pipeline
 
 

2.2.4

Configure Widget ‘Total Energy Usage Delta’

  1. Put a Table widget on the canvas:

    1. Open Widgets Library, find Table Widget (Text > Table)

    2. Click on ‘Add’ button nearby Text widget

    3. Place the widget below already configured widget ‘Last Month Total Energy Usage’ (step 2.2.3)

  2. Configure the Table widget:

    1. Select Table widget, open Properties tab

    2. Style:

      1. Width: 125

      2. Height: 70

    3. Data Source:

      1. Source: History

      2. Link by: Name

      3. Name: <enter energy point name here> - point of interest (energy consumption)

      4. Set Range: Last 90 Days - data horizont to capture current month’s and last month’s data

      5. Interpolate: On

      6. Frequency (In Seconds): 86400 - daily energy consumption

    4. Coumns:

      1. Value - to see the value of interest

    5. Data Pipeline:

      1. Transformer: Cumulative Delta - gets daily energy consumption

        1. Attr: value

        2. Target Attr: value

        3. Group by: uuid

        4. Calculate Percentage: No

      2. Filter: not equal to (!=) - eliminates 0 values from data massive (sites without energy meters / available data)

        1. Attr: value

        2. Value: 0

      3. Transformer: Rollup Data - gets monthly total energy consumption

        1. Digest: Sum

        2. Frequency: Monthly

        3. Group BY: empty - no need for grouping

      4. Transformer: Set Precision - round-off value to 2 places

        1. Attr: value

        2. Precision 2

      5. Transformer: ISO Formatter - converts db timestamp format (UTC) to YYYY-MM-DD

        1. Attr: timestamp

        2. Format: YYYY-MM-DD

  3. Add title for a widget:

    1. Put a Text widget on the canvas:

      1. Open Widgets Library, find Text Widget (Text > Text)

      2. Click on ‘Add’ button nearby Text widget

      3. Drag Text widget to the left of the table

    2. Change the text of the Text widget:

      1. Select Text widget, open Properties tab

      2. Specify Text: 'Delta'
Widget_Appearance_in_Graphics_Builder.png
Widget Appearance in Graphics Builder
 
 
Table_Properties_-_Data_and_Style.png
Table Properties - Data and Style
 
Table_Properties_-_Data_Source.png
Table Properties - Data Source
 
 
Table_Properties_-_Data_Pipeline.png
Table Properties - Data Pipeline
 
 
 

2.3

Configure widget group ‘Energy Usage Breakdown’
Widget_Appearance_in_Graphics_Viewer.png
Widget Appearance in Graphics Viewer

2.3.1

Add Widget group title

  1. Put a Text widget on the canvas:

    1. Open Widgets Library, find Text Widget (Text > Text)

    2. Click on ‘Add’ button nearby Text widget

    3. Drag Text widget below widget group ‘This Month vs Last Month Total Energy Usage’ (p.2.2)

  2. Change the text of the Text widget:

    1. Select Text widget, open Properties tab

    2. Specify Text: ‘Energy Usage Breakdown’
Widget_Appearance_in_Graphics_Builder.png
Widget Appearance in Graphics Builder

2.3.2

Configure Widget ‘This Month Energy Usage Breakdown’

  1. Put a Chart widget on the canvas:

    1. Open Widgets Library, find Table Widget (Charting > Chart)

    2. Click on ‘Add’ button nearby Chart widget

    3. Place the widget below already configured widget group title

  2. Configure the Chart widget:

    1. Select Chart, open Properties tab:

    2. Widget Name: Pie Chart - This Month

    3. Chart Type: Pie Chart

    4. Style:

      1. Width: 650

      2. Height: 400

    5. Advanced Options

      1. X Attribute Name: Site Name

      2. Y Attribute Name: value

      3. Show Legend: On

      4. Legend Position: Right

      5. Show Data Labels: On

      6. Chart Theme: Multicolor

    6. Data Source:

      1. Source: History

      2. Link by: Name

      3. Name: <enter energy point name here> - point of interest (energy consumption)

      4. Set Range: This Month - data range of intetrest

      5. Interpolate: On

      6. Frequency (In Seconds): 86400 - daily energy consumption

    7. Data Pipeline:

      1. Transformer: Cumulative Delta - gets daily energy consumption

        1. Attr: value

        2. Target Attr: value

        3. Group By: uuid

        4. Calculate Percentage: no

      2. Transformer: Parse URI - retrieves parameters to be used for filtering on subsequent pipeline steps

      3. Transformer: Rollup Data - gets monthly total energy consumption

        1. Digest: Sum

        2. Frequency: None

        3. Group BY: site_name - groups energy consumption by site name

      4. Transformer: Sort Data - orders pie chart slices from smallest to biggest

        1. Attr: value

        2. Is Timestamp: false

      5. Transformer: Reverse List -displays pie chart slices from biggest to smallest

  3. Add title for a widget:

    1. Put a Text widget on the canvas:

      1. Open Widgets Library, find Text Widget (Text > Text)

      2. Click on ‘Add’ button nearby Text widget

      3. Drag Text widget to the upper left of the Chart

    2. Change the text of the Text widget:

      1. Select Text widget, open Properties tab

      2. Specify Text: 'This Month'
Widget_Appearance_in_Graphics_Builder.png
Widget Appearance in Graphics Builder
 
Widget_Properties_-_Widget_Name_and_Chart_Type.png
Widget Properties - Widget Name and Chart Type
 
Widget_Properties_-_Style.png
Widget Properties - Style
 
Widget_Properties_-_Advanced_Options.png
Widget Properties - Advanced Options
Widget_Properties_-_Data_Source.png
Widget Properties - Data Source
 
Widget_Properties_-_Data_Pipeline.png
Widget Properties - Data Pipeline

2.3.3

Configure Widget ‘Last Month Energy Usage Breakdown’

  1. Copy and paste widget created on step 2.3.2 ‘This Month Energy Usage Breakdown’

  2. Place the widget to the right of the widget created on step 2.3.2 ‘This Month Energy Usage Breakdown’

  3. Configure the Chart widget:

    1. Select Chart, open Properties tab

    2. Widget Name: Pie Chart - Last Month

    3. Data Source

      1. Set Range: Last Month - period of interest

    4. NOTE: all other required widget’s Configurations are already copied

  4. Add title for a widget:

    1. Put a Text widget on the canvas:

      1. Open Widgets Library, find Text Widget (Text > Text)

      2. Click on ‘Add’ button nearby Text widget

      3. Drag Text widget to the upper right of the Chart

    2. Change the text of the Text widget:

      1. Select Text widget, open Properties tab

      2. Specify Text: 'Last Month'
Widget_Appearance_in_Graphics_Builder.png
Widget Appearance in Graphics Builder
 
Widget_Properties_-_Widget_Name_and_Chart_Type.png
Widget Properties - Widget Name and Chart Type
 
Widget_Properties_-_Style.png
Widget Properties - Style
Widget_Properties_-_Advanced_Options.png
Widget Properties - Advanced Options
 
Widget_Properties_-_Data_Source.png
Widget Properties - Data Source
 
Widget_Properties_-_Data_Pipeline.png
Widget Properties - Data Pipeline

2.4

Configure widget group ‘Total Energy Usage Trend’
Widget_Appearance_in_Graphics_Viewer.png
Widget Appearance in Graphics Viewer

2.4.1

Add Widget group title

  1. Put a Text widget on the canvas:

    1. Open Widgets Library, find Text Widget (Text > Text)

    2. Click on ‘Add’ button nearby Text widget

    3. Drag Text widget below widget group ‘Energy Usage Breakdown’ (p.2.3)

  2. Change the text of the Text widget:

    1. Select Text widget, open Properties tab

    2. Specify Text: 'Total Energy Usage Trend'
Widget_Appearance_in_Graphics_Builder.png
Widget Appearance in Graphics Builder

2.4.2

Configure Widget ‘This Month Total Energy Usage Trend’

  1. Put a Chart widget on the canvas:

    1. Open Widgets Library, find Table Widget (Charting > Chart)

    2. Click on ‘Add’ button nearby Chart widget

    3. Place the widget below already configured widget group title

  2. Configure the Chart widget:

    1. Select Chart, open Properties tab:

    2. Widget Name: Line Chart - This Month Trend

    3. Chart Type: Line Chart

    4. Style:

      1. Width: 650

      2. Height: 400

    5. Advanced Options

      1. X Attribute Name: Timestamp

      2. Y Attribute Name: value

      3. Show Legend: Off

      4. Show Data Labels: On

      5. Show X-Axis Grid: On

      6. Show Y-Axis Grid: On

      7. Stepped line: false

      8. Chart Theme: Default

    6. Data Source:

      1. Source: Widget - will reuse the data source of already configured Widget

      2. Widget: Pie Chart - This Month - the widget ‘This Month Energy Usage Breakdown’ created on step 2.3.2

      3. Data From: Original Data - use the original data that was passed to the source widget before passing through the data pipeline.

    7. Data Pipeline:

      1. Transformer: Cumulative Delta - gets daily energy consumption

        1. Attr: value

        2. Target Attr: value

        3. Group By: uuid

        4. Calculate Percentage: no

      2. Transformer: Rollup Data - gets daily total energy consumption

        1. Digest: Sum

        2. Frequency: Daily

        3. Group BY: (blank)

      3. Transformer: Set precision - applies rounding to optimize float values display on chart

        1. Attr: value - Pont’s value will be rounded

        2. Precision: 2 - 2 decimal places

  3. Add title for a widget:

    1. Put a Text widget on the canvas:

      1. Open Widgets Library, find Text Widget (Text > Text)

      2. Click on ‘Add’ button nearby Text widget

      3. Drag Text widget to the upper left of the Chart

    2. Change the text of the Text widget:

      1. Select Text widget, open Properties tab

      2. Specify Text: 'This Month'
Widget_Appearance_in_Graphics_Builder.png
Widget Appearance in Graphics Builder
 
Widget_Properties_-_Widget_Name_and_Chart_Type.png
Widget Properties - Widget Name and Chart Type
 
Widget_Properties_-_Style.png
Widget Properties - Style
 
Widget_Properties_-_Advanced_Options.png
Widget Properties - Advanced Options
 
Widget_Properties_-_Data_Source.png
Widget Properties - Data Source
 
Widget_Properties_-_Data_Pipeline.png
Widget Properties - Data Pipeline

2.4.3

Configure Widget ‘Last Month Total Energy Usage Trend’

  1. Copy and paste widget created on step 2.4.3 ‘This Month Total Energy Usage’

  2. Place the widget to the right of the widget created on step 2.4.3 ‘This Month Energy Usage Breakdown’

  3. Configure the Chart widget:

    1. Select Chart, open Properties tab:

    2. Widget Name: Pie Chart - Last Month

    3. Data Source:

      1. Widget: Pie Chart - Last Month - the widget ‘This Month Energy Usage Breakdown’ created on step 2.3.2

    4. NOTE: all other required widget’s Configurations are already copied

  4. Add title for a widget:

    1. Put a Text widget on the canvas:

      1. Open Widgets Library, find Text Widget (Text > Text)

      2. Click on ‘Add’ button nearby Text widget

      3. Drag Text widget to the upper right of the Chart

    2. Change the text of the Text widget:

      1. Select Text widget, open Properties tab

      2. Specify Text: 'Last Month'
Widget_Appearance_in_Graphics_Builder.png
Widget Appearance in Graphics Builder
 
Widget_Properties_-_Widget_Name_and_Chart_Type.png
Widget Properties - Widget Name and Chart Type
 
Widget_Properties_-_Advanced_Options.png
Widget Properties - Advanced Options
 
Widget_Properties_-_Data_Source.png
Widget Properties - Data Source
 
Widget_Properties_-_Data_Pipeline.png
Widget Properties - Data Pipeline
 

2.5

Configure widget group ‘Top 5 sites with most energy usage'
Widget_Appearance_in_Graphics_Viewer.png

2.5.1

Add Widget group title

  1. Put a Text widget on the canvas:

    1. Open Widgets Library, find Text Widget (Text > Text)

    2. Click on ‘Add’ button nearby Text widget

    3. Drag Text widget below widget group ‘Total Energy Usage Trend’ (p.2.4)

  2. Change the text of the Text widget:

    1. Select Text widget, open Properties tab

    2. Specify Text: '‘Top 5 sites with most energy usage'
Widget_Appearance_in_Graphics_Builder.png
Widget Appearance in Graphics Builder

2.5.2

Configure Widget ‘Top 5 sites with most energy usage - This Month’

  1. Put a Chart widget on the canvas:

    1. Open Widgets Library, find Table Widget (Charting > Chart)

    2. Click on ‘Add’ button nearby Chart widget

    3. Place the widget below already configured widget group title

  2. Configure the Chart widget:

    1. Select Chart, open Properties tab:

    2. Widget Name: Bar chart - Top 5 this month

    3. Chart Type: Horizontal Bar Chart

    4. Style:

      1. Width: 650

      2. Height: 400

    5. Advanced Options

      1. X Attribute Name: Site Name

      2. Y Attribute Name: value

      3. Show Legend: Off

      4. Show Data Labels: On

      5. Show X-Axis Grid: On

      6. Show Y-Axis Grid: On

      7. Stepped line: false

      8. Chart Theme: Default

    6. Data Source:

      1. Source: Widget - will reuse the data source of already configured Widget

      2. Widget: Pie Chart - This Month - the widget ‘This Month Energy Usage Breakdown’ created on step 2.3.2

      3. Data From: Original Data - use the original data that was passed to the source widget before passing through the data pipeline.

    7. Data Pipeline:

      1. Transformer: Cumulative Delta - gets daily energy consumption

        1. Attr: value

        2. Target Attr: value

        3. Group By: uuid

        4. Calculate Percentage: no

      2. Transformer: Parse URI - retrieves parameters to be used for filtering on subsequent pipeline steps

      3. Transformer: Rollup Data - gets daily total energy consumption

        1. Digest: Sum

        2. Frequency: none

        3. Group BY: site_name - data grouping by Site Name

      4. Transformer: Sort Data - orders bars from smallest to biggest

        1. Attr: value

        2. Is Timestamp: false

      5. Transformer: Limit - gets top 5 values

        1. Limit: 5

        2. From bottom: Yes

      6. Transformer: Reverse List - displays bars from biggest to smallest

      7. Transformer: Set precision - applies rounding to optimize float values display on chart

        1. Attr: value - Pont’s value will be rounded

        2. Precision: 2 - 2 decimal places

  3. Add title for a widget:

    1. Put a Text widget on the canvas:

      1. Open Widgets Library, find Text Widget (Text > Text)

      2. Click on ‘Add’ button nearby Text widget

      3. Drag Text widget to the upper left of the Chart

    2. Change the text of the Text widget:

      1. Select Text widget, open Properties tab

      2. Specify Text: 'This Month'
Widget_Appearance_in_Graphics_Builder.pngWidget Appearance in Graphics Builder
 
Widget_Properties_-_Widget_Name_and_Type.png
Widget Properties - Widget Name and Type
Widget_Properties_-_Widget_Style.png
Widget Properties - Widget Style
 
Widget_Properties_-_Advanced_Options.png
Widget Properties - Advanced Options
 
Widget_Properties_-_Data_Source.png
Widget Properties - Data Source
 
Widget_Properties_-_Data_Pipeline.png
Widget Properties - Data Pipeline

2.5.3

Configure Widget ‘Top 5 sites with most energy usage - Last Month’

  1. Copy and paste widget created on step 2.5.4 ‘Configure Widget ‘Top 5 sites with most energy usage - This Month’’

  2. 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’’

  3. Configure the Chart widget:

    1. Select Chart, open Properties tab:

    2. Widget Name: Bar chart - Top 5 last month

    3. Data Source:

      1. Widget: Pie Chart - Last Month - the widget ‘This Month Energy Usage Breakdown’ created on step 2.3.2

    4. NOTE: all other required widget’s Configurations are already copied

  4. Add title for a widget:

    1. Put a Text widget on the canvas:

      1. Open Widgets Library, find Text Widget (Text > Text)

      2. Click on ‘Add’ button nearby Text widget

      3. Drag Text widget to the upper right of the Chart

    2. Change the text of the Text widget:

      1. Select Text widget, open Properties tab

      2. Specify Text: 'Last Month'
Widget_Appearance_in_Graphics_Builder.png
Widget Appearance in Graphics Builder
 
Widget_Properties_-_Widget_Name_and_Type.png
Widget Properties - Widget Name and Type
 
 
Widget_Properties_-_Widget_Style.png
Widget Properties - Widget Style
 
Widget_Properties_-_Advanced_Options.png
Widget Properties - Advanced Options
 
Widget_Properties_-_Data_Source.png
Widget Properties - Data Source
 
Widget_Properties_-_Data_Pipeline.png
Widget Properties - Data Pipeline
 
 
 

3

Set up Graphics Configuration

  1. Go to Graphics > Configuration

  2. Click on ‘Add New’

  3. Specify the following data:

    1. Customer (specify the same customer as for ‘Demo Graphic’ (a Graphic Template already created on Step #1)

    2. Configuration Name

    3. Configuration Description

    4. Linked Graphic: ‘Demo Graphic’ (a Graphic Template already created on Step #1)

    5. Default Graphic: ‘Demo Graphic’ (a Graphic Template already created on Step #1)

  4. Click ‘Next’

  5. Specify ‘Link To’ (a page to display a Graphic): Customer

  6. Click ‘Save’
graphics-configuration.png

4

View the created Graphic

  1. Go to the Customer Page you linked a Graphic Template on step 3 (Sites > Filter by Customer > Customer Details)

  2. The Graphic will be opened by default

 view-the-created-graphic.png

Related articles