Tutorial: Customizing a device dashboard
In this tutorial, you are learning to customize a device dashboard.
About this task
You will learn how to use the following dashboard features:
- Display dimensions on a value card ( step 1).
- Plot raw data on a line graph card ( step 2).
- Use variables in the title of a value card ( step 3).
- Use variables in hotspot titles ( step 4).
- Use hyperlinks on table cards: ( step 5)
- Customize the severity for threshold configurations on table cards:
Example: 
Before you begin
Ensure that you have data and device types for robots, dimensions are added to those device types, images are available to add to a dashboard, and you have at least one device dashboard created.
The following text is an example of the .json configuration file that you can use for a device dashboard:
{
"title": "Painting robot load performance",
"cards": [{
"type": "TIMESERIES",
"id": "line_cardID",
"size": "LARGE",
"title": "Minimum load vs Maximum load vs Average load",
"content": {
"series": [{
"dataSourceId": "load_mean_ID",
"label": "Average Load"
},
{
"dataSourceId": "load_max_ID",
"label": "Minimum Load"
},
{
"dataSourceId": "load_min_ID",
"label": "Maximumu Load"
}
]
},
"dataSource": {
"attributes": [{
"aggregator": "mean",
"attribute": "load",
"id": "load_mean_ID"
},
{
"aggregator": "max",
"attribute": "load",
"id": "load_max_ID"
},
{
"aggregator": "min",
"attribute": "load",
"id": "load_min_ID"
}
],
"range": {
"count": -1,
"interval": "day"
},
"timeGrain": "hour"
}
},
{
"type": "TABLE",
"id": "table_card_ID",
"size": "LARGE",
"title": "Load",
"content": {
"columns": [{
"dataSourceId": "load_max_ID",
"label": "Max"
},
{
"dataSourceId": "load_mean_ID",
"label": "Mean"
},
{
"dataSourceId": "timestamp",
"label": "Timestamp",
"type": "TIMESTAMP",
"priority": 1
}
],
"expandedRows": [{
"dataSourceId": "travel_time_id",
"label": "Mean travel time"
}],
"sort": "DESC",
"thresholds": [{
"comparison": ">",
"dataSourceId": "load_mean_ID",
"label": "Critical",
"severity": 3,
"value": 376
},
{
"comparison": ">",
"dataSourceId": "load_max_ID",
"severity": 1,
"label": "Warning",
"value": 377
}
]
},
"dataSource": {
"attributes": [{
"aggregator": "max",
"attribute": "load",
"id": "load_max_ID"
},
{
"aggregator": "mean",
"attribute": "load",
"id": "load_mean_ID"
},
{
"aggregator": "mean",
"attribute": "travel_time",
"id": "travel_time_id"
}
],
"range": {
"count": -7,
"interval": "day"
},
"timeGrain": "day"
}
},
{
"type": "VALUE",
"id": "value_card_ID",
"size": "SMALL",
"title": "Latest",
"content": {
"attributes": [{
"dataSourceId": "load_mean_ID",
"precision": 3,
"label": "load",
"thresholds": [{
"color": "#5aa700",
"comparison": "<",
"icon": "icon--info--outline",
"value": 10
},
{
"color": "#F00",
"comparison": ">",
"icon": "icon--warning",
"value": 10
}
]
}]
},
"dataSource": {
"attributes": [{
"aggregator": "last",
"attribute": "load",
"id": "load_mean_ID"
}]
}
},
{
"id": "Robot-overview-image",
"size": "LARGE",
"title": "Last month",
"type": "IMAGE",
"content": {
"image": "robot",
"alt": "Painting robot",
"hotspots": [{
"color": "#00F",
"icon": "icon--info--outline",
"content": {
"attributes": [{
"dataSourceId": "load_mean_id",
"label": "Average Load"
},
{
"dataSourceId": "load_max_id",
"label": "Max Load"
}
]
},
"locations": [{
"x": 5.2,
"y": 10.5
}]
}]
},
"dataSource": {
"attributes": [{
"attribute": "load",
"id": "load_mean_id",
"aggregator": "mean"
},
{
"attribute": "load",
"id": "load_max_id",
"aggregator": "max"
}
],
"range": {
"count": -1,
"interval": "month"
}
}
},
{
"id": "alerts",
"size": "LARGE",
"title": "Alerts in the last 3 hours",
"type": "ALERT",
"dataSource": {
"range": {
"count": -3,
"interval": "hour"
},
"type": "alert"
}
}
]
}
Step 1 - Show dimensions on a value card
Display the manufacturer name and the firmware of robots on the dashboard. Create a
value card and add the manufacturer and firmware dimensions to the
card.
In the card.content.attributes section of the card, specify the
attribute to use and the label to display. Link the attribute to a dataSoutceId. In
the card.dataSource section, specify the data item to use in
attribute.
Example:
{
"id": "manufacturer_ID",
"size": "MEDIUM",
"title": "Car makers",
"type": "VALUE",
"dataSource": {
"attributes": [{
"attribute": "manufacturer",
"id": "manufacturer_id"
},
{
"attribute": "firmware",
"id": "firmware_id"
}
]
},
"content": {
"attributes": [{
"dataSourceId": "manufacturer_id",
"label": "Manufacturer",
"thresholds": [{
"color": "a56eff",
"dateSourceId": "manufacturer",
"comparison": "=",
"icon": "car",
"value": "GHI Industries"
}]
},
{
"dataSourceId": "firmware_id",
"label": "Firmware"
}
]
}
}
In this example, by using a threshold configuration, a car icon is displayed for the car manufacturer GHI Industries. Add the value card example to the dashboard.
Step 2 - Plot raw load values on a line graph
Show raw load data on the line graph card. Remove the aggregate load metrics from the line graph card.
Example:
{
"type": "TIMESERIES",
"id": "line_cardID",
"size": "LARGE",
"title": "Raw load",
"content": {
"series": [{
"dataSourceId": "load_raw_ID",
"label": "Raw Load"
}]
},
"dataSource": {
"attributes": [{
"attribute": "load",
"id": "load_raw_ID",
"aggregator": "min"
}],
"range": {
"type": "periodToDate",
"count": -1,
"interval": "day"
},
"timeGrain": "hour"
}
}
Replace the existing line graph on the dashboard with this example.
Step 3 - Use a variable in the title of a value card
In the "Latest" value card, update the title to display the
firmware of the robot. For example, "title": "Latest - firmware {firmware2_ID}"
uses the dimension firmware as a variable.
Example:
{
"type": "VALUE",
"id": "value_card_ID",
"size": "MEDIUM",
"title": "Latest - firmware {firmware2_ID}",
"content": {
"attributes": [{
"dataSourceId": "load_mean_ID",
"precision": 3,
"label": "load",
"thresholds": [{
"color": "#FF6347",
"dateSourceId": "manufacturer",
"comparison": "=",
"icon": "car",
"value": "GHI Industries"
},
{
"color": "#F00",
"comparison": ">",
"icon": "warning",
"value": 10
}
]
}]
},
"dataSource": {
"attributes": [{
"aggregator": "mean",
"attribute": "load",
"id": "load_mean_ID"
},
{
"attribute": "firmware",
"id": "firmware2_ID"
}
]
}
}
Replace the existing "Latest" value card on the dashboard with this example.
Step 4 - Use a variable in hotspot titles
In the image card configuration, use a variable in the hotspot title, for example,
"title": "Sensor load readings for robot {deviceid} at firmware {firmware}".
Example:
{
"id": "Robot-overview-image",
"size": "LARGE",
"title": "Last month",
"type": "IMAGE",
"content": {
"id": "robot.png",
"alt": "Painting robot",
"hotspots": [{
"color": "#00F",
"icon": "information",
"content": {
"title": "Sensor load readings for robot {deviceid} at firmware {firmware_img_ID}",
"description": "The robot is using {firmware_img_ID}",
"attributes": [{
"dataSourceId": "load_mean_id",
"label": "Average Load"
},
{
"dataSourceId": "load_max_id",
"label": "Max Load"
}
]
},
"locations": [{
"x": 5.2,
"y": 10.5
}]
}]
},
"dataSource": {
"attributes": [{
"attribute": "load",
"id": "load_mean_id",
"aggregator": "mean"
},
{
"attribute": "load",
"id": "load_max_id",
"aggregator": "max"
},
{
"attribute": "firmware",
"id": "firmware_img_ID"
}
],
"range": {
"count": -1,
"interval": "month"
}
}
}
Replace the image card on the dashboard with this example.
Step 5 - Update the table card
On
the table card, add a hyperlink to a related article about robot manufacturing. Define the hyperlink
in the linkTemplate object under the card.content.columns
configuration in the JSON configuration.
In the thresholds configuration,
configure the following options:
- Specify a custom icon. Use
"icon": "warning square filled". - Specify the color of the icon. Use
"color": "#FF4500". - Specify the text to use for severity. Use
"severityLabel": "Warning situation".
Use a variable in the table title. Use "title": "Load - firmware
{firmwareID}".
Example:
{
"type": "TABLE",
"id": "table_card_ID",
"size": "LARGE",
"title": "Load - firmware {firmwareID}",
"content": {
"columns": [{
"dataSourceId": "load_max_ID",
"label": "Max"
},
{
"dataSourceId": "load_mean_ID",
"label": "Mean",
"linkTemplate": {
"href": "_url_",
"target": "_blank"
}
},
{
"dataSourceId": "timestamp",
"label": "Timestamp",
"type": "TIMESTAMP",
"priority": 1,
"sort": "DESC"
}
],
"expandedRows": [{
"dataSourceId": "travel_time_id",
"label": "Mean travel time"
}],
"thresholds": [{
"comparison": ">",
"dataSourceId": "load_max_ID",
"severity": 1,
"label": "Severity",
"icon": "warning square filled",
"color": "#FF4500",
"value": 377,
"severityLabel": "Warning situation"
}]
},
"dataSource": {
"attributes": [{
"aggregator": "max",
"attribute": "load",
"id": "load_max_ID"
},
{
"aggregator": "mean",
"attribute": "load",
"id": "load_mean_ID"
},
{
"aggregator": "mean",
"attribute": "travel_time",
"id": "travel_time_id"
},
{
"attribute": "firmware",
"id": "firmwareID"
}
],
"range": {
"count": -7,
"interval": "day"
},
"timeGrain": "day"
}
}
Replace the table card on the dashboard with this example.
Step 6 - Import the dashboard
- Log in as an adminstrator.
- On the Monitor page, on the Device types tab, select the robot device type.
- Click
and then select Manage device dashboard. - Click Import to upload your local JSON dashboard configuration file.
Example of the updated dashboard:
{
"title": "Painting robot load performance",
"cards": [{
"id": "manufacturer_ID",
"size": "MEDIUM",
"title": "Car makers",
"type": "VALUE",
"dataSource": {
"attributes": [{
"attribute": "manufacturer",
"id": "manufacturer_id"
},
{
"attribute": "firmware",
"id": "firmware_id"
}
]
},
"content": {
"attributes": [{
"dataSourceId": "manufacturer_id",
"label": "Manufacturer",
"thresholds": [{
"color": "a56eff",
"comparison": "=",
"icon": "car",
"value": "GHI Industries"
}]
},
{
"dataSourceId": "firmware_id",
"label": "Firmware"
}
]
}
},
{
"type": "TIMESERIES",
"id": "line_cardID",
"size": "LARGE",
"title": "Raw load",
"content": {
"series": [{
"dataSourceId": "load_raw_ID",
"label": "Raw Load"
}]
},
"dataSource": {
"attributes": [{
"attribute": "load",
"id": "load_raw_ID"
}],
"range": {
"type": "periodToDate",
"count": -1,
"interval": "day"
},
"timeGrain": "hour"
}
},
{
"type": "TABLE",
"id": "table_card_ID",
"size": "LARGE",
"title": "Load - firmware {firmwareID}",
"content": {
"columns": [{
"dataSourceId": "load_max_ID",
"label": "Max"
},
{
"dataSourceId": "load_mean_ID",
"label": "Mean",
"linkTemplate": {
"href": "_url_",
"target": "_blank"
}
},
{
"dataSourceId": "timestamp",
"label": "Timestamp",
"type": "TIMESTAMP",
"priority": 1
}
],
"expandedRows": [{
"dataSourceId": "travel_time_id",
"label": "Mean travel time"
}],
"sort": "DESC",
"thresholds": [{
"comparison": ">",
"dataSourceId": "load_max_ID",
"severity": 1,
"label": "Severity",
"icon": "warning square filled",
"color": "#FF4500",
"value": 377,
"severityLabel": "Warning situation"
}]
},
"dataSource": {
"attributes": [{
"aggregator": "max",
"attribute": "load",
"id": "load_max_ID"
},
{
"aggregator": "mean",
"attribute": "load",
"id": "load_mean_ID"
},
{
"aggregator": "mean",
"attribute": "travel_time",
"id": "travel_time_id"
},
{
"attribute": "firmware",
"id": "firmwareID"
}
],
"range": {
"count": -7,
"interval": "day"
},
"timeGrain": "day"
}
},
{
"type": "VALUE",
"id": "value_card_ID",
"size": "MEDIUM",
"title": "Latest - firmware {firmware2_ID}",
"content": {
"attributes": [{
"dataSourceId": "load_mean_ID",
"precision": 3,
"label": "load",
"thresholds": [{
"color": "#5aa700",
"comparison": "<",
"icon": "information",
"value": 10
},
{
"color": "#F00",
"comparison": ">",
"icon": "warning",
"value": 10
}
]
}]
},
"dataSource": {
"attributes": [{
"aggregator": "mean",
"attribute": "load",
"id": "load_mean_ID"
},
{
"attribute": "firmware",
"id": "firmware2_ID"
}
]
}
},
{
"id": "Robot-overview-image",
"size": "LARGE",
"title": "Last month",
"type": "IMAGE",
"content": {
"id": "robot.png",
"alt": "Painting robot",
"hotspots": [{
"color": "#00F",
"icon": "information",
"content": {
"title": "Sensor load readings for robot {deviceid} at firmware {firmware_img_ID}",
"description": "The robot is using {firmware_img_ID}",
"attributes": [{
"dataSourceId": "load_mean_id",
"label": "Average Load"
},
{
"dataSourceId": "load_max_id",
"label": "Max Load"
}
]
},
"locations": [{
"x": 5.2,
"y": 10.5
}]
}]
},
"dataSource": {
"attributes": [{
"attribute": "load",
"id": "load_mean_id",
"aggregator": "mean"
},
{
"attribute": "load",
"id": "load_max_id",
"aggregator": "max"
},
{
"attribute": "firmware",
"id": "firmware_img_ID"
}
],
"range": {
"count": -1,
"interval": "month"
}
}
}
]
}