T05: Charts and Dashboards

Step 1 — Understand the model first#

Infohub charts are not canvases you place things on. A chart is a tree that the chart type builds, and your job is to drop measures onto the right node.

Create a Widget chart and it starts with structure and no content:

comp 1  General
comp 2    Properties
comp 3    Title
comp 4    Period
comp 5    QuickLinks
comp 6  Sections          < drop here

Drop a measure on Sections and the chart type materialises a Section, a Widget, and the measure item beneath it. There is no "add a measure to a section" step — the Section is a result of the drop.

Step 2 — Create a trend chart#

In Reports, in your Production Reports folder, create a Time Based Chart with the Daily constructor.

Drop Bottles Daily and Production Target Daily onto it.

Set the series types deliberately:

• Bottles Daily as bars — it is a quantity per period
• Production Target Daily as a line — it is a reference level

That distinction carries meaning. A bar says "this much happened in this period". A line says "this value applied continuously". Using bars for the target would imply the target was itself produced.

Step 3 — Fix the axis#

Set the axis minimum to 0 and give it a title including the unit.

For a bar chart this is not optional. Bars encode magnitude by length, so an axis starting at 60,000 makes a 5% difference look like a 50% one. Truncating an axis is defensible on a line chart, where change rather than magnitude is the point; on bars it misleads.

Step 4 — Create two widgets#

Create a Widget chart with the Daily constructor, and drop Production vs Target Daily on the Sections container.

Create a second Widget, also Daily, with Energy per 1000 Bottles.

A widget shows one value large and clear. It is what people read first on a dashboard.

Step 5 — Give the widgets colour#

A number tells you the value. A number with a colour tells you whether to act.

Colour comes from limits, configured on the measure. In the Toolbox, create a limit for Production vs Target Daily — say a low limit at 95% and a target at 100% — then attach it to the measure and bind it onto the widget.

There is one rule: a limit slot only accepts a limit belonging to the measure on its parent chart item. So the chart must already carry that measure as a series before its limit can bind. Add the measure first, bind the limit second.

Step 6 — Create a table#

Create a Time Based Table with the Daily constructor, and drop Bottles Daily, Production Target Daily, Energy Daily, and Water Used Daily onto it.

Charts show shape; tables show numbers. When someone needs to read an exact figure or export it, a table is right and a chart is a frustration.

Check the alignment. If the decimals look ragged, the measures are using # in their format strings where 0 was needed — 0.0 renders 5 as 5.0, so a column lines up.

Step 7 — Compose the dashboard#

Create a dashboard called Filler 1 Daily.

Dashboards use a 12-column grid, with rows growing downward. Each panel has a left, top, width, and height.

A layout that works:

+------------------------------------------------+
| Text: "Filler 1 — Daily Performance"           |  12 × 1
+--------------+--------------+------------------+
| Widget       | Widget       |  (space)         |  3 × 3 each
| vs Target    | kWh/1000     |                  |
+--------------+--------------+------------------+
| Time Based Chart — production vs target        |  12 × 5
+------------------------------------------------+
| Time Based Table — the numbers                 |  12 × 5
+------------------------------------------------+

Add a Text panel as the heading. This matters more than it looks — a dashboard with a clear title and a statement of what it covers gets used; an unlabelled grid of charts gets abandoned.

Twelve divides by 2, 3, 4, and 6, which is why four widgets across (3 each) or three charts across (4 each) both work. Five of anything does not.

Step 8 — Look at it#

Deploy the server if needed, and open the dashboard in a browser.

You should have: a heading, two coloured widgets showing the current state, a trend showing how it got there, and a table with the exact figures. Status, then trend, then detail — which is the order questions are actually asked in.

Step 9 — Label the period#

Look at the dashboard and ask: what period does each panel cover?

The widgets show today, which is a partial day until midnight. The chart and table show a range of days. That is three different things on one screen, and unlabelled it misleads — someone will compare today's partial figure against yesterday's complete one and conclude performance has collapsed.

Fix it in the Text heading, or rename the widget captions to say (today so far). This is one of the most common dashboard failures and one of the easiest to prevent.

What you have learned#

The chart type builds the structure. Drop a measure on the right container; do not try to assemble nodes.

Constructors fix the interval. Permanently. Tag measures are refused by every interval chart.

Series type carries meaning. Lines for rates, bars for quantities, steps for values that hold and jump.

Include zero on bar axes. Truncating them misleads.

Colour comes from limits. Configure the limit on the measure; the chart follows.

Limits bind after the series. The chart must carry the measure first.

Dashboards are a 12-column grid. Status, then trend, then detail.

Label the period. Always.

Try this before moving on#

Add a second dashboard for a different audience.

You have built a supervisor's dashboard — moderate detail, a table, read from a desk. Now build a control room version of the same information: three elements, no table, very large widgets, colour carrying the message, readable from across a room.

The exercise is instructive because the temptation is to reuse the first dashboard. It will not work at four metres, and a dashboard that tries to serve both audiences satisfies neither.

Next: T06: Format Strings — including the trick that turns a number into the word "Pass".

See also#

• T04: Your First Calculation
• T06: Format Strings
• How Infohub Charts Work
• Dashboards and Navigation