{chart} draws a chart as inline SVG on the server - no JavaScript, no image
library and no remote service, so a chart works in print and in an e-mail and is cached like
any other output. The first parameter is the kind, the options name the data and the fields
to plot. An unknown kind is an error under the strict check (and is drawn as a bar chart
without it).
data='name' names the rows: a {data} store, a sequence store, an
array of the page's PHP or a file in _data/ - or a literal, data='[3,1,4]'.
sequence='fibonacci' plots the first rows terms (10) of a
sequence type. Written as a pair, without data or
sequence, the content between the tags is the data - JSON, YAML, XML or CSV,
recognised on sight as {data} recognises it, or named by
type=. The content is taken as it stands before the level walks it, so the braces
of JSON need no {ignore}, and the indent its lines share is taken off. A chart
with no data at all is an error under the strict check.
The data option is not iterated: the chart is drawn once, from all rows. A field option
left out takes the first field of the first row that fits - a numeric field for
value, another for label. A row without a finite number is left
out, and a chart without points writes nothing, so its @else@ shows.
bar (column), hbar,
line, area, stream, multiples,
dual: label, value (a comma list draws a series each),
stacked (bar, hbar, area), percent (area), by and
columns (multiples), line (dual).pie, donut, waffle
(cells), funnel, pyramid, marimekko,
parliament, treemap, sunburst, pack
(levels), venn (sets), proportional
(square).histogram (bins), boxplot,
density and violin (bandwidth), scatter
and bubble (x, y, size, color,
trend), heatmap (x, y, value),
parallel (color).gauge (from, to,
bands, target, unit - value=72 is the
number itself, no data needed), bullet, rings,
radialbar, radar, rose, waterfall
(total).calendar (date, year),
gantt (from, to, progress,
color, mark), candlestick (open,
high, low, close, volume),
spiral (period, turn), sparkline.sankey, chord, arc and
network (source, target, value;
network also layout and arrows), orgchart
(id, parent, label, sub).A kind reads only the options it draws with, so an option of another kind -
stacked on a line chart - is an option nothing reads, which the strict check
reports. The chart's options are named apart from the handling options every tag takes
(rows, group, sort ...).
The default size is 600 x 300; the round kinds are 480 x 280, the tall ones (sankey,
network, treemap, radar, chord, pack, orgchart, parallel, multiples) 600 x 400.
.pad-chart { max-width: 100%; height: auto } in the page's CSS lets a chart
shrink with its column. The colours are CSS custom properties on .pad-chart -
--pad-chart-series, --pad-chart-text, --pad-chart-grid,
--pad-chart-surface, the slots --pad-chart-1 to -8 - with
light and dark defaults that follow the page's color-scheme. The SVG has
role="img", a <title> and a <desc> listing
the values, and every bar, point or slice its own <title>, the tooltip on
hover. {sparkline} is the word-sized line by its own name.