{sparkline}

Draws a word-sized line chart as inline SVG - no axes, the last point marked - to stand in a sentence or a table cell.

Charts and codes Either form

Syntax 

{sparkline data='name', label='field', value='field', title='text', width=120, height=32}
{sparkline sequence='fibonacci', rows=12}
{sparkline type='json'} ... {/sparkline}

Options

data
The rows: a {data} store, a sequence store, an array of the page (or a field of the current row holding a list) or a _data file of that name, or a literal (data='[3,1,4]'). Left out on a pair, the content is the data.
type
For a pair: the format of the content - json, yaml, xml or csv - when it is not to be recognised on sight.
sequence
Plot the first rows terms (default 10) of a sequence type.
value
The field with the number - else the first numeric field.
label
The field naming each point, used in the description read by a screen reader.
title
The accessible name, the SVG's one <title>.
width
The width in pixels, default 120.
height
The height in pixels, default 32.

Description

{sparkline} is {chart 'sparkline'} by a name of its own: a small line with no axes, no grid and no labels, the last point marked with a dot. Its job is the shape of a series - up, down, flat or jumpy - in the space of a word, so it fits in running text or in a cell of a table.

The data is found as for a chart: data= names a {data} store, a sequence store, an array of the page or a _data file - and inside a loop a field of the current row that holds a list, so each row of a table can draw its own line. sequence= plots the first rows terms of a sequence type, and as a pair the content is the data (JSON, YAML, XML or CSV). A plain list of numbers is enough; rows with fields take value=, else their first numeric field.

The size is 120 x 32 by default. The line is scaled to its own minimum and maximum, not to zero, so even a small change shows; equal values draw a flat line through the middle. Every finite number is taken - a sparkline has no axis to keep in range. Unlike the bigger kinds it has only the chart's one <title>, no tooltip per point; the colour is --pad-chart-series on .pad-chart.

Examples

In a sentence

A literal list of numbers as data, drawn the height of the text around it.

Templateexamples/sparkline/1-sentence.pad 
<p>Sign-ups this fortnight {sparkline data='[12, 15, 14, 18, 22, 19, 24, 27, 25, 31, 29, 34, 38, 41]', height=20, title='Sign-ups per day'} - up again.</p>
Resultopen alone

Sign-ups this fortnight Sign-ups per day 1: 12; 2: 15; 3: 14; 4: 18; 5: 22; 6: 19; 7: 24; 8: 27; 9: 25; 10: 31; 11: 29; 12: 34; 13: 38; 14: 41 - up again.

A line per table row

Inside a loop, data= names a field of the row that holds a list.

Templateexamples/sparkline/2-table.pad 
<table>
  <tr><th>Share</th><th>Ten days</th><th>Last</th></tr>
  {shares}
  <tr><td>{$name}</td><td>{sparkline data='closes', title=$name}</td><td>{$last}</td></tr>
  {/shares}
</table>
PHPexamples/sparkline/2-table.php 
<?php

  $shares = [
    [ 'name' => 'Acme',    'closes' => [ 64, 65, 64, 66, 67, 66, 68, 67, 69, 70 ], 'last' => 70 ],
    [ 'name' => 'Globex',  'closes' => [ 21.4, 21.1, 20.8, 21.0, 20.6, 20.2, 20.5, 19.9, 19.6, 19.8 ], 'last' => 19.8 ],
    [ 'name' => 'Initech', 'closes' => [ 88, 87, 89, 86, 88, 90, 87, 85, 88, 89 ], 'last' => 89 ] ];

?>
Resultopen alone
Share Ten days Last
Acme Acme 1: 64; 2: 65; 3: 64; 4: 66; 5: 67; 6: 66; 7: 68; 8: 67; 9: 69; 10: 70 70
Globex Globex 1: 21.4; 2: 21.1; 3: 20.8; 4: 21; 5: 20.6; 6: 20.2; 7: 20.5; 8: 19.9; 9: 19.6; 10: 19.8 19.8
Initech Initech 1: 88; 2: 87; 3: 89; 4: 86; 5: 88; 6: 90; 7: 87; 8: 85; 9: 88; 10: 89 89

A sequence as data

sequence= plots the first rows terms of a sequence type.

Templateexamples/sparkline/3-sequence.pad 
<p>Fibonacci {sparkline sequence='fibonacci', rows=12} and the primes {sparkline sequence='prime', rows=12}</p>
Resultopen alone

Fibonacci Fibonacci, the first 12 terms 1: 0; 2: 1; 3: 1; 4: 2; 5: 3; 6: 5; 7: 8; 8: 13; 9: 21; 10: 34; 11: 55; 12: 89 and the primes Prime, the first 12 terms 1: 2; 2: 3; 3: 5; 4: 7; 5: 11; 6: 13; 7: 17; 8: 19; 9: 23; 10: 29; 11: 31; 12: 37

See also

  • {chart} Draws a chart as inline SVG on the server - 46 kinds, from bars and lines to sankeys, maps of a hierarchy and org charts.
  • {sequence} Generates a range, a list or one of 80 mathematical sequences, and iterates its values.
  • {data} Turns its content - JSON, XML, YAML, CSV, a list or a range - into a named data set for a later tag to iterate.