Skip to main content

Display Widgets: Titles, Dividers, Dead Space and Clocks

Display Widgets: Titles, Dividers, Dead Space and Clocks

Display widgets give a dashboard its structure. A Title heads a section, a Divider or Vertical divider separates one group of widgets from the next, Dead space holds a gap open so widgets line up, and a Clock shows the time in any time zone, so a row of them becomes a world clock for your offices. They hold no data and take no filters, and they don't count toward a dashboard's widget limit, so use as many as you need.


Before you start

  • You need edit access to the dashboard.

  • Click Edit in the dashboard's toolbar. Display widgets are added, changed and moved in edit mode; everyone viewing the dashboard sees the result.


Add a display widget

In edit mode, a bar of Draggable widgets sits across the top of the dashboard. After Reporting widget come the five display widgets.

  1. Drag a chip onto the dashboard and drop it where you want it, or click it to add it at the bottom. A clicked Title or Divider starts a new row under the last one; a clicked Vertical divider, Dead space or Clock goes at the end of the last row.

  2. To change it, hover over it and click the gear. The settings window shows its size and, for a clock, its time zone and style.

  3. To move it, drag it like any widget. To remove it, hover over it and click the trash can (dead space has a ✕ instead).

You can also add one from the widget picker: choose the Display only widget type and pick from the list.


Titles

A Title is a section heading. To change its text, hover over it in edit mode, click the pencil, type the heading and save.

Its size sets how prominent the heading is. In the gear's settings, choose Small, Medium or Large, or give it a custom width and height.


Dividers

  • A Divider draws a line across the dashboard, between one section and the next. Its size sets the line's thickness; a custom size takes a height only, since a divider always spans its row.

  • A Vertical divider draws a line between two widgets in the same row, as tall as the row. A custom size takes a width only.


Dead space

Dead space is an empty block, from 25 × 25 pixels up, that holds a gap open so the widgets around it line up. Viewers see nothing; in edit mode it shows as a faint dashed box you can resize and move. Qvasa also adds it for you when you resize a widget from its left edge. More on that, and on resizing widgets in general: Free-Size Widgets: Resize and Arrange Your Dashboard.


Clocks

A Clock shows the current time in one time zone. A new clock starts in your browser's time zone and is named after that zone's city. Hover over it and click the gear to set it up:

  • Time zone: listed by city, for example "London (Europe/London)". Daylight saving is followed automatically.

  • Style: Digital, Analog (a dial with tick marks), or Analog + digital (a numbered dial with the digital time under it).

  • Hours: 12-hour or 24-hour, for the styles that show the time in numbers.

  • Seconds and Date: show or hide each.

  • Size: Small, Medium or Large (200, 300 or 400 pixels square), or drag it to any size down to 100 × 100. The face scales to its box.

The clock's name sits above the face. Rename it like a title (hover, click the pencil), for example to an office name, or leave it blank to show the city.

A world clock for your offices

Each clock shows one time zone, so add one per office and place them side by side in a row, with a Title such as "Our offices" above them. Mix styles if you like.

Clocks keep time in the browser, so they tick live without a refresh. They work in presentation mode, on tabs and in the carousel, in embedded dashboards and in image exports. For dashboards on a TV, see Presentation Mode and Auto Refresh for Live Dashboards.


What done looks like

Your dashboard reads in sections: each group of widgets under its own heading, separated by a line, with the gaps where you want them and a clock for every office your team works from.


Troubleshooting

  • I don't see the Draggable widgets bar. It shows in edit mode only. Click Edit in the dashboard's toolbar.

  • A clock shows the wrong time. Check its Time zone in the gear's settings. A new clock starts in the time zone of the browser that added it.

  • There's no Hours setting on my clock. It's set to Analog, which has no numbers to format. Switch the style to Digital or Analog + digital to choose 12- or 24-hour.

  • There's a gap I can't get rid of. It's probably dead space. In edit mode, hover over the gap and click its ✕.

Did this answer your question?