Dashboards

Subscription access level

This section describes all general operations that a *Subscription access level * user can perform with Dashboards.

What are dashboards in Inimco.facts?

A dashboard is a customisable visual display that shows real-time telemetry data from devices within an organisational unit or subscription. Dashboards are composed of widgets that can be customised according to the specific needs and preferences of the user.

The widgets include:

• Latest State Widget: It displays the most recent telemetry data from a chosen device. Users select a device and its capability to view the latest data, with optional conditional formatting to highlight values when certain conditions are met.

• Line Chart Widget: It visualizes historical telemetry data in a line chart format. Users can select multiple devices and capabilities to plot over time, along with data aggregation and time range options.

• Bar Chart Widget: Similar to the Line Chart, this widget displays historical telemetry data but in a bar chart format. Users select devices, capabilities, and configure the aggregation type, time range, and visualization preferences.

• Microsoft 365 Widget: It allows integration of Microsoft 365 documents into the dashboard, displaying content directly in the IoT Central interface with the help of an embed code from the Microsoft 365 platform.

• Power BI Widget: This widget integrates Power BI reports or dashboards into the IoT environment, offering embedded analytics and visualizations that are selectable based on established Power BI service connections.

• Embedded Application Widget: It enables the embedding of external applications within the dashboard through a direct URL, allowing users to interact with third-party services or platforms directly within IoT Central.

• Value Chart Average Widget: It shows the average value of a selected metric over a chosen time frame and provides options for displaying minimum and maximum values and for adding conditions to filter and highlight data points.

• Heat Map Widget: It offers a heat map representation of data, using color variations to display the intensity or frequency of data points across two dimensions, allowing for easy spotting of trends and patterns.

• Value Chart Sum Widget: This widget focuses on the sum of data points for a selected metric, also displaying average, minimum, and maximum values, with options for rounding and condition-based filtering.

• Donut Chart Widget: It presents data in a donut chart format, allowing users to see proportions and relationships between different data segments or metrics, with options for aggregation and organizational filtering.

What can we do with dashboards in Inimco.facts?

Dashboard Management

• Create a Dashboard: Build a new dashboard to suit specific monitoring requirements.

• Edit a Dashboard: Modify the name of an existing dashboard for clarity or updated purposes.

• Delete a Dashboard: Remove an entire dashboard that is no longer necessary.

Widget Management

• View Device Data: Use widgets to display real-time or historical data from devices.

• Set Up Widgets: Configure various widgets, such as Latest State, Line Chart, Bar Chart, Microsoft 365, Power BI, Embedded Application, and various analytical charts like line, bar, and pareto, to visualize different data aspects.

• Edit a Dashboard Widget: Adjust widget settings to change how data is displayed.

• Delete a Dashboard Widget: Remove widgets that are no longer relevant to the dashboard’s function.

Procedures

View device data on a dashboard

1. Log in to Inimco.facts.
2. Navigate to Dashboards.

Create a dashboard

1. Log in to Inimco.facts.
2. Navigate to Dashboards.
3. Click Create dashboard.
4. Enter the dashboard name into the Dashboard name field.
5. Click Create.
6. Click Edit dashboard.
7. Click the pencil icon in the top right corner.
8. Select the required widget type.
9. Click Next.
10. Fill out the required widget parameters as described in Widgets.
11. Click Submit.
12. Click Save.

Edit a dashboard name

1. Log in to Inimco.facts.
2. Navigate to Dashboards.
3. Click the gear icon in the top right corner.
4. Enter the new dashboard name into the Dashboard name field.
5. Click Update.

Edit a dashboard widget

1. Log in to Inimco.facts.
2. Navigate to Dashboards.
3. Click the gear icon in the top right corner.
4. Click the ellipsis (...) in the top right corner of the widget you need to edit.
5. Click Edit.
6. Fill out the required widget parameters as described in Widgets.
7. Click Submit.
8. Click Save.

Delete a dashboard widget

1. Log in to Inimco.facts.
2. Navigate to Dashboards.
3. Click the gear icon in the top right corner.
4. Click the ellipsis (...) in the top right corner of the widget you need to edit.
5. Click Delete.
6. Confirm deletion.
7. Click Save.

Delete a dashboard

1. Log in to Inimco.facts.
2. Navigate to Dashboards.
3. Click the bin icon in the top right corner.
4. Type in the dashboard name.
5. Click I UNDERSTAND, DELETE DASHBOARD.

Set up the Latest State widget

1. Log in to Inimco.facts.
2. Navigate to Dashboards.
3. Click Create dashboard.
4. Enter the dashboard name into the Dashboard name field.
5. Click Create.
6. Click Edit dashboard.
7. Click the pencil icon in the top right corner.
8. Select the required widget type.
9. Click Next.
10. From the Select a device menu, choose a device from which to receive telemetry data.
11. From the Select a capability menu, pick a capability of the chosen device to display in the widget.
12. In the Widget name field, input the name you want the widget to display.
13. If required, apply conditional formatting to a value that this widget will show:
    • Select the necessary condition from the condition field.
    • Input the trigger value into the Value field.
    • Enter the label name into the Label field.
    • Choose the desired color.
14. Click Submit.
15. Click Save.

Set up the Line Chart widget

1. Log in to Inimco.facts.
2. Navigate to Dashboards.
3. Click Create dashboard.
4. Enter the dashboard name into the Dashboard name field.
5. Click Create.
6. Click Edit dashboard.
7. Click the pencil icon in the top right corner.
8. Select the required widget type.
9. Click Next.
10. From the Select a device menu, choose a device from which to receive telemetry data.
11. From the Select capabilities menu, pick a capability of the chosen device to display in the widget.
12. In the Widget name field, input the name you want the widget to display.
13. Choose the necessary data aggregation type from the Select data aggregation type menu.
14. Choose the time range for data collection from the Select time range field.
15. Click Submit.
16. Click Save.

Set up the Bar Chart widget

1. Log in to Inimco.facts.
2. Navigate to Dashboards.
3. Click Create dashboard.
4. Enter the dashboard name into the Dashboard name field.
5. Click Create.
6. Click Edit dashboard.
7. Click the pencil icon in the top right corner.
8. Select the required widget type.
9. Click Next.
10. From the Select a device menu, choose a device from which to receive telemetry data.
11. From the elect capabilities menu, pick a capability of the chosen device to display in the widget.
12. In the Widget name field, input the name you want the widget to display.
13. Choose the necessary data aggregation type from the Select data aggregation type menu.
14. Choose the time range for data collection from the Select time range field.
15. Choose th evisualisation type from the Select visualisation menu.
16. Click Submit.
17. Click Save.

Set up the Microsoft 365 widget

1. Log in to Inimco.facts.
2. Navigate to Dashboards.
3. Click Create dashboard.
4. Enter the dashboard name into the Dashboard name field.
5. Click Create.
6. Click Edit dashboard.
7. Click the pencil icon in the top right corner.
8. Select the required widget type.
9. Click Next.
10. In the Widget name field, input the name you want the widget to display.
11. In the Embed Code field, input the embedding code associated with the Microsoft 365 document or item.

note

Please use only the link to the document or item rather than copying the generated HTML directly from the web application.

12. Click Submit.
13. Click Save.

Set up the Power BI widget

note

Before proceeding, ensure that your Environment access level user has established a connection to the Power BI service on Inimco.facts as described here. Once that's in place, you can select the relevant connection from the PowerBIService Connection dropdown.

1. Log in to Inimco.facts.
2. Navigate to Dashboards.
3. Click Create dashboard.
4. Enter the dashboard name into the Dashboard name field.
5. Click Create.
6. Click Edit dashboard.
7. Click the pencil icon in the top right corner.
8. Select the required widget type.
9. Click Next.
10. In the Widget name field, input the name you want the widget to display.
11. In the Power BI Widget Type dropdown, choose between embedding a 'Report' or a 'Dashboard', depending on the kind of Power BI visualization you aim to integrate.
12. From the Power BI Resource dropdown, choose the specific report or dashboard you want to embed. This dropdown will populate based on the resources available through the selected PowerBI Service Connection.
13. Click Submit.
14. Click Save.

Set up the Embedded Application widget

1. Log in to Inimco.facts.
2. Navigate to Dashboards.
3. Click Create dashboard.
4. Enter the dashboard name into the Dashboard name field.
5. Click Create.
6. Click Edit dashboard.
7. Click the pencil icon in the top right corner.
8. Select the required widget type.
9. Click Next.
10. In the Widget name field, input the name you want the widget to display.
11. In the Embed URL field, enter the direct URL of the application you intend to embed.

note

Please use only the link to the application rather than copying the generated HTML directly from the web application.

12. Click Submit.
13. Click Save.

Set up the Analytical line chart widget

1. Log in to Inimco.facts.
2. Navigate to Dashboards.
3. Click Create dashboard.
4. Enter the dashboard name into the Dashboard name field.
5. Click Create.
6. Click Edit dashboard.
7. Click the pencil icon in the top right corner.
8. Select the required widget type.
9. Click Next.
10. Expand the Line chart field.
11. Select the required metric from the Metric field.
12. Select the required aggregation type from the Aggregation type field.
13. Select the organisational unit from the Organizational unit field.
14. If you need to enable time shifts, switch on the Time shift toggle, select the time shift unit from the Time shift unit field and enter the time shift value into the Time shift value field.
15. Add more line charts, if required, by clicking + ADD LINE CHART.
16. In the Widget name field, input the name you want the widget to display.
17. From the Time Range dropdown, specify the timeframe for which you want to visualize the data.
18. If required, set the threshold value by clicking Threshold, entering the threshold name into the Name field, its value into the Value field and picking the colour from the Color selector.
19. Add more thresholds, if required, by clicking + ADD THRESHOLD.
20. Click Submit.
21. Click Save.

Set up the Analytical bar chart widget

1. Log in to Inimco.facts.
2. Navigate to Dashboards.
3. Click Create dashboard.
4. Enter the dashboard name into the Dashboard name field.
5. Click Create.
6. Click Edit dashboard.
7. Click the pencil icon in the top right corner.
8. Select the required widget type.
9. Click Next.
10. Expand the Line chart field.
11. Select the required metric from the Metric field.
12. Select the required aggregation type from the Aggregation type field.
13. Select the organisational unit from the Organizational unit field.
14. If you need to enable time shifts, switch on the Time shift toggle, select the time shift unit from the Time shift unit field and enter the time shift value into the Time shift value field.
15. Select the required granularity from the Granularity field.
16. Add more line charts, if required, by clicking + ADD BAR CHART.
17. In the Widget name field, input the name you want the widget to display.
18. From the Time Range dropdown, specify the timeframe for which you want to visualize the data.
19. If required, set the threshold value by clicking Threshold, entering the threshold name into the Name field, its value into the Value field and picking the colour from the Color selector.
20. Add more thresholds, if required, by clicking + ADD THRESHOLD.
21. Click Submit.
22. Click Save.

Set up the Analytical pareto chart widget

1. Log in to Inimco.facts.
2. Navigate to Dashboards.
3. Click Create dashboard.
4. Enter the dashboard name into the Dashboard name field.
5. Click Create.
6. Click Edit dashboard.
7. Click the pencil icon in the top right corner.
8. Select the required widget type.
9. Click Next.
10. Expand the Line chart field.
11. Select the required metric from the Metric field.
12. Select the required aggregation type from the Aggregation type field.
13. Select the organisational unit from the Organizational unit field.
14. If you need to enable time shifts, switch on the Time shift toggle, select the time shift unit from the Time shift unit field and enter the time shift value into the Time shift value field.
15. Select the required granularity from the Granularity field.
16. Add more line charts, if required, by clicking + ADD BAR CHART.
17. In the Widget name field, input the name you want the widget to display.
18. From the Time Range dropdown, specify the timeframe for which you want to visualize the data.
19. If required, set the threshold value by clicking Threshold, entering the threshold name into the Name field, its value into the Value field and picking the colour from the Color selector.
20. Add more thresholds, if required, by clicking + ADD THRESHOLD.
21. Click Submit.
22. Click Save.

Set up the Canvas widget

1. Log in to Inimco.facts.
2. Navigate to Dashboards.
3. Click Create dashboard.
4. Enter the dashboard name into the Dashboard name field.
5. Click Create.
6. Click Edit dashboard.
7. Click the pencil icon in the top right corner.
8. Select the required widget type.
9. Click Next.
10. Click Blank canvas to start a new canvas, or click Copy canvas and select the canvas to use as a base.
11. Enter the widget name into the Widget name field.
12. Enter the canvas name into the Canvas name field.
13. Click Continue.
14. Customise the parameters as described below.

Top menu

Menu Option	Description
Save	Saves canvas.
Delete	Clears all objects from the canvas.
Grid	Creates a background grid. Allows the user to define whether to use the grid and, if yes, set the grid cell size and color.
Zoom in	Zooms in.
Zoom reset	Resets the zoom.
Zoom out	Zooms out.
Undo	Undoes an action.
Redo	Redoes an action.
Copy	Copies a selected element.
Remove	Removes a selected element.
Preset of connectors	Presets the connectors. If required, use auto max connection height. Otherwise, set the max connection height yourself and adjust the connection positioning.
Line type	Allows selection of the line type for the path.
Connector type left	Enables selection of the connector type for the left side of the line.
Line type	Sets the line type.
Connector type right	Enables selection of the connector type for the right side of the line.
Canvas name	Adjusts the canvas name.
Show/hide left menu	Toggles the visibility of the menu on the left.
X	Goes back.

Library

Basic shapes

Node

Click on NODE. This action will prompt the Node Properties window to appear on the right side of the interface.

####### Node styles

The Styles tab provides options to customize the appearance of the node.

To adjust the node dimensions:

1. Navigate to the fields labeled Width and Height.
2. Input desired dimensions for the visual representation of the node.

To add an image to the node:

1. Click on the + UPLOAD button or enter the image url into the Image url or file field.
2. After uploading, you can modify the image's aspect ratio as necessary. The aspect ratio attribute dictates how an element with a given aspect ratio should be scaled and positioned within a viewport of a different aspect ratio, allowing for specific alignment and scaling methods.

To edit the node's borders:

1. Use the Border color dropdown menu to select the desired color for the Node's border.
2. Use the Border width field to change the node's border width.
3. Use the Border radius field to change the node's border radius.

To edit the stroke-dasharray attribute of the node:

• Input the required attribute into the Stroke Dasharray field. The stroke-dasharray attribute in SVG defines the pattern of dashes and gaps for outlining shapes, and can be applied to various SVG elements like <circle>, <path>, and <line>.

To edit the node's background color:

• Select the required color from the Background Color field.

To edit the node's background opacity:

• Use the slider to determine how transparent or opaque the node's background appears.

Node labels

The Label tab offers functionalities to input and style textual labels for the node.

To add a text label to the node:

1. Enter the text into the Label Text field's left section. You can alternatively add data bind input into the right section of the Label Text field. This is one of the data points that can be enbaled in the DATA & CALCULATIONS tab.
2. Use the Label Font Size slider to adjust the label's font size.

To edit the label's background color:

• Select the required color from the Label Font Color field.

To rotate the label:

• Use the Rotate slider.

Node connectors

The Connectors tab provides feature to create and customize connections between nodes.

To enable connectors:

• Select the required connection places from the Connections dropdown. If required, use the auto connection sort and fit the connection to the node size.

Data and calculations

The Data and Calculations tab provides the functionality to establish data points on the canvas and define calculations based on these data points.

To define a data point:

1. Click on Data Points + button.
2. From the Device Field, choose a device.
3. From the Range Capability Field, select the desired capability.
4. Click Submit.

To create a calculation:

1. Input a formula into the designated formula field, e.g., +A1+A2, where A1 and A2 are the previously defined data points.
2. Click Submit.

Label

Click on LABEL. Upon this action, the Label Properties window will emerge on the right side of the interface.

Label styles

The Styles tab offers diverse options to customize the appearance of the label.

To rotate the label:

• Utilize the Rotate slider.

To modify the label's borders:

1. Choose the desired color from the Border Color dropdown. Data bind input can also be set here.
2. Adjust the border width using the Border Width field.
3. Alter the border's curvature using the Border Radius field.

For the stroke-dasharray attribute:

• Enter the needed attribute in the Stroke Dasharray field. This attribute defines the dashes and gaps pattern used in outlining shapes.

To adjust the label's background:

1. Pick the desired color from the Background Color dropdown. Data bind input can also be set in this field.
2. Use the Background Opacity slider to set how transparent or opaque the label's background should appear, data bind input can be adjusted here too.

For the label's font customization:

1. Use the Font Size slider to determine the size of the label text.
2. Choose the desired color from the Font Color dropdown. Data bind input can also be set here.
3. Pick the desired typeface from the Font Family dropdown.

Label text

The Text tab is dedicated to managing the label's textual content.

To input and manage label text:

1. Input your desired text into the Text field. Data bind input can also be adjusted in this section.
2. If you want the label size to adjust automatically to the text, choose the auto setting. If a specific size is desired, manually input dimensions into the Width and Height fields.

Legend

Click on LEGEND. This action will reveal the Legend Properties window on the right side of the interface.

Legend styles

The Styles tab provides options to customize the appearance of the legend.

To adjust the legend's font:

1. Use the Font Size slider to modify the text size.
2. Choose the desired color from the Font Color dropdown. You also have the option to set the data bind input here.

Legend items

The Items tab allows you to specify the contents of the legend.

To add and manage legend items:

1. Enter the desired item name into the Item Name field.
2. Pick the preferred color for the legend item from the Color dropdown.
3. Adjust the color's transparency using the Opacity slider.
4. To include more items to the legend, click the + button.

Path

Click on PATH. This action will prompt the Line Properties window to appear on the right side of the interface.

Path styles

The Styles tab provides options to customize the appearance of the path.

To set the path label:

1. Navigate to the Value field.
2. Input the desired text or set the data bind input.

To enable connection scaling:

• Check the Use Connection Scale option.

For defining the path's arrows:

1. Use the Source Arrow dropdown to select the preferred source arrow style.
2. Use the Target Arrow dropdown to select the preferred target arrow style.

To set the path's outline:

• Input the desired pattern into the Stroke Dasharray field.

To adjust the path's background:

1. Select the desired background color from the Background Color dropdown. A data bind input option is also available here.
2. Use the Background Opacity slider to determine the background transparency. This slider also offers a data bind input option.
3. For a gradient background, toggle on the Use Gradient Color switch and then pick the desired gradient colors.

Path label

The Label tab provides functionalities for the path's label.

To input label text:

1. Enter your content into the Text field. You can also use macro (0) for value substitution and set data bind input if needed.
2. Define the position of the label using the Position X dropdown for the X-axis and Position Y dropdown for the Y-axis.

For label appearance:

1. Rotate the label using the Rotate slider.
2. Set the border color for the label using the Border Color dropdown. A data bind input option is available here.
3. Adjust the border width with the Border Width field and the border radius with the Border Radius field. The stroke dasharray can also be customized here.
4. Pick a background color from the Background Color dropdown and set its opacity with the Background Opacity slider. Both of these offer data bind input options.
5. Use the Font Size slider to set the size of the font, and choose a color with the Font Color dropdown. Again, a data bind input option is provided. Finally, select the desired font type from the Font Family dropdown.

Advanced Shapes

Click on any of the available shapes (e.g., engines, compressors, filters, flow sensors, piping, crushers grinding, fittings, separators, agitators, apparatus elements, centrifuges, compressors IDO, driers, feeders, heat exchangers, mixers, pumps, pumps DIN, pumps ISO, shaping machines, vessels, valves, miscellaneous). Upon selection, the Figure Properties column will appear on the right side of the interface.

Advanced Shape Styles

The Styles tab provides options to customize the appearance of the advanced shape.

To rotate the element:

• Use the Rotate slider.

To scale the element on the X axis:

• Use the Scale X slider.

To scale the element on the Y axis:

• Use the Scale Y slider.

To edit the element's borders:

1. Select the desired color from the Border Color dropdown (data bind input is also available).
2. Adjust the width using the Border Width field.
3. Modify the radius with the Border Radius field.

To define the stroke-dasharray attribute:

• Input the required attribute into the Stroke Dasharray field.

To edit the element's background color:

• Select the desired color from the Background Color dropdown (data bind input is also available).

To set the element's background opacity:

• Use the Background Opacity slider to determine the desired transparency level (data bind input is also available).

Advanced Shape SVG

The SVG tab displays the SVG code of the icon, representing the selected advanced shape.