Tutorial: Adding bar charts to a summary dashboard

Before you begin

Complete the Tutorial: Adding data from physical devices tutorial that creates a sample robot type.

About this task

In this tutorial, you create a summary dashboard that displays simple bar charts, grouped bar charts, and stacked bar charts. Use the dashboard to explore the bar chart configurations.

Step 1: Create a dashboard

1. On the Monitor page, on the Devices tab, select your device type and click Setup.
2. Select the Dashboards tab.
3. Click Add dashboard.
4. On the Definition page, assign the name "Hourly_summary" to the dashboard.
5. Select the hourly time grain.
6. Click Next.
7. On the Contents page, choose load to include it on the dashboard.
8. Set the aggregation method to mean.
9. Click Configure dashboard.

Step 2: Save the .json configuration

Save the .json bar chart configuration to a file.

{
	"timeGrain": "hour",
	"cards": [{
			"id": "simple-barchart",
			"size": "MEDIUM",
			"title": "Abnormal stops by manufacturer",
			"type": "BAR",
			"content": {
				"layout": "VERTICAL",
				"type": "SIMPLE",
				"series": [{
					"dataSourceId": "abnormal_stop_count_ID",
					"label": "Avg abnormal stops",
					"color": [
						"red",
						"blue"
					]
				}],
				"categoryDataSourceId": "manufacturer",
				"xLabel": "Manufacturer",
				"yLabel": "Avg no."
			},
			"dataSource": {
				"groupBy": [
					"manufacturer"
				],
				"attributes": [{
					"aggregator": "mean",
					"attribute": "abnormal_stop_count",
					"id": "abnormal_stop_count_ID"
				}],
				"range": {
					"type": "rolling",
					"count": -1,
					"interval": "day"
				},
				"timeGrain": "hour"
			}
		},
		{
			"id": "simple-time-barchart",
			"size": "MEDIUMWIDE",
			"title": "Abnormal stops over time",
			"type": "BAR",
			"content": {
				"layout": "VERTICAL",
				"type": "SIMPLE",
				"series": [{
					"dataSourceId": "abnormal_stop_count_ID",
					"label": "Abnormal stops",
					"color": [
						"orange"
					]
				}],
				"timeDataSourceId": "timestamp",
				"xLabel": "Time",
				"yLabel": "Avg no."
			},
			"dataSource": {
				"attributes": [{
					"aggregator": "mean",
					"attribute": "abnormal_stop_count",
					"id": "abnormal_stop_count_ID"
				}],
				"range": {
					"type": "rolling",
					"count": -1,
					"interval": "day"
				},
				"timeGrain": "hour"
			}
		},
		{
			"id": "group-barchart",
			"size": "MEDIUM",
			"title": "Abnormal stops & completed movements by manufacturer",
			"type": "BAR",
			"content": {
				"layout": "VERTICAL",
				"type": "GROUPED",
				"series": [{
						"dataSourceId": "abnormal_stop_count_ID",
						"label": "Abnormal stops",
						"color": [
							"red"
						]
					},
					{
						"dataSourceId": "completed_movement_count_ID",
						"label": "Completed movements",
						"color": [
							"green"
						]
					}
				],
				"categoryDataSourceId": "manufacturer",
				"xLabel": "Manufacturer",
				"yLabel": "Average no."
			},
			"dataSource": {
				"groupBy": [
					"manufacturer"
				],
				"attributes": [{
						"aggregator": "mean",
						"attribute": "abnormal_stop_count",
						"id": "abnormal_stop_count_ID"
					},
					{
						"aggregator": "mean",
						"attribute": "completed_movement_count",
						"id": "completed_movement_count_ID"
					}
				],
				"range": {
					"type": "rolling",
					"count": -1,
					"interval": "day"
				},
				"timeGrain": "hour"
			}
		},
		{
			"id": "stacked-time-barchart",
			"size": "MEDIUMWIDE",
			"title": "Abnormal stops & completed movements over time",
			"type": "BAR",
			"content": {
				"layout": "VERTICAL",
				"type": "STACKED",
				"series": [{
						"dataSourceId": "abnormal_stop_count",
						"label": "Abnormal stops",
						"color": [
							"red"
						]
					},
					{
						"dataSourceId": "completed_movement_count_ID",
						"label": "Completed movements",
						"color": [
							"green"
						]
					}
				],
				"timeDataSourceId": "timestamp",
				"xLabel": "Time",
				"yLabel": "Average no."
			},
			"dataSource": {
				"attributes": [{
						"aggregator": "mean",
						"attribute": "abnormal_stop_count",
						"id": "abnormal_stop_count"
					},
					{
						"aggregator": "mean",
						"attribute": "completed_movement_count",
						"id": "completed_movement_count_ID"
					}
				],
				"range": {
					"type": "rolling",
					"count": -1,
					"interval": "day"
				},
				"timeGrain": "hour"
			}
		},
		{
			"id": "stacked-time-category-barchart",
			"size": "MEDIUMWIDE",
			"title": "Abnormal stops by manufacturer over time",
			"type": "BAR",
			"content": {
				"layout": "VERTICAL",
				"type": "STACKED",
				"series": [{
					"dataSourceId": "abnormal_stop_count",
					"color": {
						"Rentech": "black",
						"GHI Industries": "orange"
					}
				}],
				"timeDataSourceId": "timestamp",
				"categoryDataSourceId": "manufacturer",
				"xLabel": "Time",
				"yLabel": "Average no."
			},
			"dataSource": {
				"groupBy": [
					"manufacturer"
				],
				"attributes": [{
					"aggregator": "mean",
					"attribute": "abnormal_stop_count",
					"id": "abnormal_stop_count"
				}],
				"range": {
					"type": "rolling",
					"count": -1,
					"interval": "day"
				},
				"timeGrain": "hour"
			}
		}
	],
	"title": "Abnormal stops & Completed movements for the plant",
	"layouts": {
	}
}
			

Step 3: Import the .json configuration

1. From the Devices tab, select your device type.
2. From the Dashboards tab, find the dashboard that you want to edit under Summary Dashboards.
3. Click the three-dot menu and then click Edit.
4. Go to the Dashboard page of the summary dashboard editor.
5. Click the import icon.
6. Browse to select the Bar chart summary file.
7. Click Save.

Step 4: Explore the dashboard

The dashboard displays various bar chart types. Review each chart to understand the data it is displaying.

If you are familiar with the JSON configuration, change the cards.content.layout to HORIZONTAL to view a horizontal orientation for each chart.