Tutorial: Configuring a device dashboard

In this tutorial, you are configuring a device dashboard to monitor how well a painting robot is performing in an automotive process.

Before you begin

Complete these tutorials:

About this task

In this tutorial, you configure a dashboard that monitors the load that is handled by individual painting robots in an automotive process.

Dashboard metrics

The dashboard displays the following metrics:

Card types

Use the starter JSON configuration to create a dashboard with five card types:

Important

For help with defining the card types in this tutorial, see Dashboard features and Dashboard JSON reference.

Step 1 - Create a JSON file

Create a new JSON file with using the device dashboard starter JSON configuration:

Step 2 - Set the dashboard attributes

  1. Assign a title to the dashboard. Enter "title": "Painting robot load performance".
  2. Go to the cards array to update the card configuration on the dashboard.

Step 3 - Configure the line graph card

Define the contents of a line graph in a TIMESERIES card.

Populate the line graph card with the following data:

  1. Verify that the card type is set to "type": "TIMESERIES".
  2. Assign a unique card ID. Enter "id": "line_cardID".
  3. Verify that the card size is set to "size": "LARGE".
  4. Assign a title to the card. The graph displays the minimum, maximum and mean load. Add the title "title": "Minimum load vs Maximum load vs Average load".

  5. Define the metrics to display on the graph in the content object. Define the time series metrics to display in the series array. Create a dataSourceId for each metric and assign a metric. Note: Later, you define a dataSource object to map the attributes you display on a card with the data items in the database. Enter:

     {
         "series": [{
             "dataSourceId": "load_mean_ID",
             "label": "Average Load"
         },
         {
             "dataSourceId": "load_max_ID",
             "label": "Minimum Load"
         },
         {
             "dataSourceId": "load_min_ID",
             "label": "Maximumu Load"
         }
         ]
 }

  6. Define the source of the data in the dataSource object.

    1. Define the source of the data items that are displayed on the card in the dataSource.attributes array. You specify the data item name in attribute, assign an aggregation method in aggregator and map the id field to the content.series.dataSourceId attribute. Enter:

           "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"
     }
     ]

    2. Define the time range to apply to the series in the dataSource.range object. Show data for the last day. Enter:

       "range": {
         "count": -1,
         "interval": "day"
     }
    3. Assign a time grain. Aggregate data in the series to an hourly level. Enter: "timeGrain": "hour".

Step 4 - Configure the table card

Go the table card object:

Populate the table card with the following data:

  1. Verify that the card type is set to "type": "TABLE".
  2. Assign a unique card ID. Enter "id": "table_card_ID".
  3. Verify that the card size is set to "size": "LARGE".
  4. Assign a title to the card. The table displays the load values for each timestamp. Add the title "title": "Load".
  5. Define the metrics to display in each column in the content object.
    1. Define the metrics to display in the columns array. You are displaying a max load, a mean load, and a timestamp column. Create a dataSourceId for each metric and assign a label. Note: Later, you define a dataSource object to map the attributes you display on a card with the data items in the database. Enter:
        "columns": [{
              "dataSourceId": "load_max_ID",
              "label": "Max"
          },
          {
              "dataSourceId": "load_mean_ID",
              "label": "Mean"
          },
          {
              "dataSourceId": "timestamp",
              "label": "Timestamp",
              "type": "TIMESTAMP",
              "priority": 1
          }
      ]
    2. Define the metrics to display in the expandedRows array. You are displaying the mean travel time in the expanded row. Enter:
            "expandedRows": [{
                  "dataSourceId": "travel_time_id",
                  "label": "Mean travel time"
              }]
    3. Set the sort order to descending. Enter: "sort": "DESC".
    4. Configure two thresholds in content.thresholds array.
      1. Create an alert that triggers when the mean load is created than 376. Enter: 
               {
                   "comparison": ">",
                   "dataSourceId": "load_mean_ID",
                   "label": "Critical",
                   "severity": 3,
                   "value": 376
               }
      2. Create another alert that triggers when the max load is greater than 377. Enter:
               {
                   "comparison": ">",
                   "dataSourceId": "load_max_ID",
                   "severity": 1,
                   "label": "Warning",
                   "value": 377
               }
  6. Define the source of the data in the dataSource object.
    1. Define the source of the data items that are displayed on the card and that are used in thresholding in the dataSource.attributes array. You specify the data item name in attribute, assign an aggregation method in aggreator, and map the id field to the content.series.dataSourceId attribute. For example:
           "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"
         }
     ]
    2. Define the time range to apply to the series in the dataSource.range object. Show data for the last 7 days. Enter:
           "range": {
             "count": -7,
             "interval": "day"
         }
    3. Assign a time grain. Aggregate data in each column to a daily level. Enter: "timeGrain": "day".

Step 5 - Configure the value card

  1. Go the value card object:

Populate the value card with the following data:

  1. Verify that the card type is set to "type": "VALUE".
  2. Assign a unique card ID. Enter "id": "value_card_ID".
  3. Verify that the card size is set to "size": "SMALL".
  4. Assign a title to the card. The card displays the latest average load. Add the title "title": "Latest".

  5. Define the metrics to display on the value card in the content object. Define the metrics to display in a content.attributes array. Create a dataSourceId for each metric and assign a metric. Note: Later, you define a dataSource object to map the attributes you display on a card with the data items in the database. Define a threshold for the value. Display a warning icon if the average load is greater than 10. Define another threshold to display a check mark icon if the average load is normal. Enter:

     "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
             }
             ]
         }
     ]
  6. Define the source of the data in the dataSource object. Define the source of the data items that are displayed on the card in the dataSource.attributes array. You specify the data item name in attribute, assign an aggregation method in aggreator, and map the id field to the content.series.dataSourceId attribute. Enter:
         {
         "attributes": [{
             "aggregator": "last",
             "attribute": "load",
             "id": "load_mean_ID"
         }]
     }

Step 6 - Configure the image card

Go the image card object:

  1. Verify that the card type is set to "type": "IMAGE".
  2. Assign a unique card ID. Enter "id": "Robot-overview-image".
  3. Verify that the card size is set to "size": "LARGE".
  4. Assign a title to the card. The hotspot date on the image displays an aggregate view of the performance of the robot over the last month. Add the title "Last Month".

  5. Define the image to display on the card and metrics to display in hotspots in the content object.

    1. Define the image to display. Enter "image": "robot".
    2. Assign sme alternative text. Enter "alt": "Painting robot".

    3. Define a hotspot to display in a static location on the card. Specify the attributes to display in the hotspots.content.attributes array and the location of the hotspot in the hotspots.locations array. Enter:

            "hotspots": [{
                  "color": "#00F",
                  "icon": "icon--info--outline",
                  "content": {
                      "attributes": [{
                          "dataSourceId": "load_mean_id",
                          "label": "Average Load"
                      },
                      {
                          "dataSourceId": "load_max_id",
                          "label": "Max Load"
                      }
                      ]
                  },
                  "type": "fixed",
                  "locations": [{
                      "x": 5.2,
                      "y": 10.5
                  }]
              }]
  6. Define the source of the data in the dataSource object.
    1. Define the source of the data items that are displayed on the card in the dataSource.attributes array. You specify the data item name in attribute, assign an aggregation method in aggreator and map the id field to the content.series.dataSourceId attribute. Enter:
           "attributes": [{
         "attribute": "load",
         "id": "load_mean_id",
         "aggregator": "mean"
     },
     {
         "attribute": "load",
         "id": "load_max_id",
         "aggregator": "max"
     }
     ]
    2. Define the time range to apply to the series in the dataSource.range object. Show data for the last month. Enter:
       "range": {
         "type": "periodToDate",
         "count": -1,
         "interval": "month"
     }

Step 7 - Configure an alert card

Note: Alert cards are only supported in the beta environment.

Go the alert card object:

  1. Verify that the card type is set to "type": "ALERT".
  2. Assign a unique card ID. Enter "id": "Robot-alerts.
  3. Verify that the card size is set to "size": "LARGE".
  4. Assign a title to the card. Add the title "Robot alerts in the last 3 hours".
  5. In the dataSource configuration, set interval to hour.
  6. In the dataSource configuration, confirm that type is set to alert.

Step 8 - Save the JSON file

Save your JSON file. Validate that the JSON file is well formed before you use it. The dashboard configuration in the JSON file is similar to the following example:

Step 8 - Import the dashboard configuration

  1. Log in to the IBM Maximo Asset Monitor user interface as a user who has the Administrator role.
  2. On the side navigation, click Monitor.
  3. From the Device types tab, select the robot device type that you created for the tutorial.
  4. Click config and then select Manage device dashboard.
  5. Click Import to upload your local JSON dashboard configuration file.

Tip: If the hotspot does not display on the image card, make sure to set the time range on the image card to a period of time that contains data. Alternatively, you might need to resize the dashboard for the hotspot to display.

Step 9 - Configure the dashboard layout

  1. Maximize your web browser on your workstation. The dashboard arranges cards to fit this size.
  2. Drag the cards around the dashboard to the layout for the full screen size.
  3. Click Save.
  4. Change your web browser to another window size and drag cards into position.
  5. Repeat these steps for all window sizes appropriate for your environment.

Step 10 - Monitor the load levels for a specific robot

  1. From the Entities tab, select the robot device type that you created for the tutorial
  2. Under the Instances dashboard, select a device to open its device dashboard.
  3. Verify that you can monitor load data from this dashboard.
  4. Change the time range for the show data for the last 7 days.
  5. Change the anchor time on the dashboard to yesterday and see how the time range on all cards is impacted.

Next steps

Add a summary dashboard