Charts

A chart block shows data as lines, columns or a pie. A script computes the numbers for it, so the chart is always built from fresh data: revenue by day, or the load on your services over a week, for example.

There is a second path, without a program: if the data already lies in your database, it can be taken by a query description and shown in one of 33 visualisation types (see the Data Sources & Visualisations section). A chart fed by a script is chosen when the data has to be assembled or calculated first; a ready selection from a database is easier to show as a visualisation.

Two ways to describe a chart

  • The simple way — the script returns two sets: categories (along the axis) and series (the values). The portal picks the colors, labels and tooltips itself. When the chart has more than one series, a legend appears automatically. This fits most cases.
  • The full way — the script returns ready chart settings: the type, the axes, the colors, the look. Needed for an unusual shape — a mixed chart with columns and a line, say.

What is set on the page itself

  • Height — from 160 to 720 points. The default is 320.
  • Width — set on the same 12-part grid as any other block: 12 takes the full page width, 6 a half.
  • Execution time — how many seconds to wait for the calculation before showing an error.
  • Result storage period — how often to recompute, so the source is not disturbed needlessly.
  • Ready settings — when set right in the page, the script can extend them, and its data always outweighs the static part.

The chart follows the theme

The chart adapts itself to the portal’s light and dark theme: the axes, labels, tooltips and line colors change together with the look. When the reader switches the theme, the chart redraws at once, without fetching the data again. The numbers stay tidy and readable on any background.

What loading and errors look like

  • Loading — a frame of the right height pulses gently in the chart’s place. The screen does not “jump”: the spot for the chart is already reserved.
  • No data — when the script returns an empty set, the calm caption “No data” shows instead of an empty field.
  • Error — the reader sees a readable message, with a button beside it to copy the details and hand them to the agent.
  • The library did not load — when the external chart library is unreachable, an honest message says so instead of an empty spot. The other blocks on the page keep working as usual.

Under the chart you always see when the data was updated, plus a refresh button. A click recomputes the chart right there, without reloading the page.

Next: where data can be taken from — in the Data Sources & Visualisations section; how forms with data submission work — in the Forms section; how data is computed — in Scripts & Dependencies; how a script receives and returns data — in Dynamic Python Blocks.

← Back to the documentation index