← Back to the hackathon home
Topic 14 of 18

DHIS2 Dashboards

Step by Step Guide: Building the ANC Dashboard in Two Columns, One Item at a Time

Purpose of this guide

This topic puts the charts from Topic 7 and the map from Topic 8 onto one page. The columns are set first, then the eleven items go on one at a time, so you can watch the dashboard fill up row by row.

Step 1: Save Every Chart First

A dashboard holds nothing of its own. It shows items that were already saved, so every ANC chart from Topic 7 and the ANC map from Topic 8 must be saved with a clear name before you start.

In the Data Visualizer: File → Save as → name → Save
Figure 1. The item types this dashboard uses.
  1. 1Pivot table. The monthly numbers.
  2. 2Column. Visits by district.
  3. 3Stacked column. Visits by age group.
  4. 4Bar. Visits by facility, long labels.
  5. 5Stacked bar. The same, split by visit.
  6. 6Line. Visits over twelve months.
  7. 7Area. Visits over time, stacked.
  8. 8Stacked area. Same again, for many series.
  9. 9Pie. Share of each visit.
  10. 10Year over year (line). This year against last year.
  11. 11Year over year (column). The same as columns.
  12. 12Open as Map. How the ANC map began.
Step 2: Open the Dashboard App
Click: Apps menu → Dashboard
Figure 2. The apps menu.
  1. 1Search apps. Type dash.
  2. 2Dashboard. Open it.
  3. 3Maps. Where the ANC map was saved.
  4. 4Data Visualizer. Where the ANC charts were saved.
Step 3: Create the Dashboard and Name It
Click: plus button → type the title and code
Figure 3. A new, empty dashboard.
  1. 1Save changes. Nothing exists until this is clicked.
  2. 2Dashboard title. ANC Dashboard.
  3. 3Dashboard code. anc_001.
  4. 4Description. One line on what it covers.
  5. 5Exit without saving. Leaves it unsaved.
Figure 4. The title and the code in place.
  1. 1Title. ANC Dashboard.
  2. 2Code. anc_001.
  3. 3Change layout. Used in the next step.
  4. 4Search for items. Used from Step 5 onwards.
Step 4: Make the Columns Before Adding Anything

Set the layout first. Items added afterwards pack themselves into the columns, so nothing has to be dragged into place.

Click: Change layout → Fixed columns → Number of columns 2 → Save layout
Figure 5. Freeflow, the setting to move away from.
  1. 1Freeflow. Items go anywhere, at any size.
  2. 2Fixed columns. What we want instead.
  3. 3Save layout. Applies the choice.
Figure 6. Fixed columns, set to two. Only the number of columns was changed in this picture.
  1. 1Fixed columns. Selected.
  2. 2Number of columns. 2.
  3. 3The layout line. It now reads 2 columns.
  4. 4Save layout. Two columns, before a single item exists.
Step 5: Add the Items in Order

Every item goes on from the same box. Type ANC and the saved charts and map appear. Each click drops one item onto the dashboard, filling the two columns from the top left, so the order you click is the order people will read.

Figure 7. The search box, with the saved ANC items.
  1. 1Search for items. Type ANC.
  2. 2First click. Lands top left.
  3. 3Second click. Top right.
  4. 4Last click. Bottom of the dashboard.
The order used below: table, line, column, stacked column, bar, stacked bar, area, pie, year over year line, year over year column, map.
Step 6: Item 1: the Table

Click the item in the search box. It drops straight into the next free space.

Figure 8. The table on its own, as it was saved.
  1. 1The months. Down the side.
  2. 2The values. Across the top, one column per data element.
Figure 9. ANC: monthly values. The numbers everything else is drawn from.
  1. 1Item one. Top left, because it was clicked first.
  2. 2Its title. Taken from the name you saved it with.
  3. 3The three dots. Every item carries its own menu.
Step 7: Item 2: the Line Chart

Click the item in the search box. It drops straight into the next free space.

Figure 10. The line chart on its own.
  1. 1The lines. One per ANC visit.
  2. 2The months. Last twelve.
Figure 11. The line chart lands beside the table, because the dashboard is two columns wide.
  1. 1Item two. Top right.
  2. 2The pair. Numbers on the left, trend on the right.
  3. 3Row one. Now full.
Step 8: Items 3 and 4: Column and Stacked Column

Click the item in the search box. It drops straight into the next free space.

Figure 12. The column chart on its own.
  1. 1The columns. One per period or district.
  2. 2The legend. Same colours as everywhere else.
Figure 13. Row two: visits by district, then the same split by age group.
  1. 1Item three. Left of row two.
  2. 2Item four. Right of row two.
  3. 3Reading across. Totals first, then the split.
Step 9: Items 5 and 6: Bar and Stacked Bar

Click the item in the search box. It drops straight into the next free space.

Figure 14. The bar chart on its own.
  1. 1The labels. Read left to right, with room to breathe.
  2. 2The bars. Same colours as the columns above.
Figure 15. Row three: the same comparisons with long labels, lying down.
  1. 1Item five. Left of row three.
  2. 2Item six. Right of row three.
  3. 3Why bars. Facility names need the width.
Step 10: Items 7 and 8: Area and Pie

Click the item in the search box. It drops straight into the next free space.

Figure 16. The area chart on its own.
  1. 1The bands. Stacked, so the outline is the total.
  2. 2The months. The same twelve again.
Figure 17. Row four: the shape over time, then the share of the whole.
  1. 1Item seven. Left of row four.
  2. 2Item eight. Right of row four.
  3. 3The pie. One moment in time, so keep the period in the filter.
Step 11: Items 9 and 10: Year Over Year

Click the item in the search box. It drops straight into the next free space.

Figure 18. The year over year chart on its own.
  1. 1Two lines. This year and last year.
  2. 2The months. January to December, so the years line up.
Figure 19. Row five: this year against last year, as lines and as columns.
  1. 1Item nine. Left of row five.
  2. 2Item ten. Right of row five.
  3. 3Same question, two ways. Some readers prefer bars.
Step 12: Item 11: the Map

Click the item in the search box. It drops straight into the next free space.

Figure 20. The map on its own, as it was saved in Topic 8.
  1. 1The districts. Coloured by coverage.
  2. 2The colours. Set in the Maps app, not on the dashboard.
Figure 21. Row six: the ANC map, added exactly like a chart.
  1. 1Item eleven. Bottom left.
  2. 2Its title. Says what is coloured and for which period.
  3. 3The space beside it. Ready for whatever you add next.
Step 13: Read the Finished Dashboard

Eleven items, two columns, one pair per row.

Figure 22. The finished ANC dashboard.
  1. 1The name. ANC Dashboard.
  2. 2Row one, left. The table.
  3. 3Row one, right. The line chart.
  4. 4Row two, left. Column.
  5. 5Row two, right. Stacked column.
  6. 6Row six. The map.
RowLeft columnRight column
1Monthly values, table1 to 4 visits, line
2Visits by district, columnVisits by age group, stacked column
3Visits by facility, barVisits by facility, stacked bar
4Visits over time, areaShare of visits, pie
5Year over year, lineYear over year, column
6Coverage by district, mapFree for the next item
Step 14: Save, Filter and Share
Click: Save changes → Filter to test it → Share → add the user groups → Apply
Figure 23. The controls along the top.
  1. 1Edit. Goes back to the screen from Steps 3 to 5.
  2. 2Share. Give user groups access.
  3. 3Filter. Change the organisation unit or period for every item at once.
  4. 4The name. What people search for in the dashboards list.
Expected result: One ANC dashboard, two columns, holding every chart built in Topic 7 and the map from Topic 8.

Final Checklist

DHIS2 Hackathon, Topic 9: Dashboards