Sales per month

{chart} draws a chart as inline SVG on the server. There is no JavaScript, so the chart prints, works where scripts do not run, and caches like any other output. A bar chart puts columns on a zero baseline; a line chart draws a line over a light wash with the last point marked.

PHP
fragments/charts_1.php HTML
fragments/charts_1.pad Result

PHP fragments/charts_1.php	HTML fragments/charts_1.pad	Result
`<?php $sales = [ [ 'month' => 'Jan', 'amount' => 1200 ], [ 'month' => 'Feb', 'amount' => 950 ], [ 'month' => 'Mar', 'amount' => 1430 ], [ 'month' => 'Apr', 'amount' => 1610 ] ]; ?>`	`{chart 'bar', data='sales', label='month', value='amount', title='Sales per month', width=480, height=200}`

<?php

  $sales = [
    [ 'month' => 'Jan', 'amount' => 1200 ],
    [ 'month' => 'Feb', 'amount' =>  950 ],
    [ 'month' => 'Mar', 'amount' => 1430 ],
    [ 'month' => 'Apr', 'amount' => 1610 ]
  ];

?>

{chart 'bar', data='sales', label='month', value='amount',
              title='Sales per month', width=480, height=200}

The first word picks the kind of chart, after the job the data has to do:

Kind	Shows	Options
`line`	change over time	`label`, `value`
`bar` (or `column`), `hbar`	categories compared	`label`, `value`, `stacked`
`pie`, `donut`	parts of a whole	`label`, `value`
`scatter`, `bubble`	how two numbers relate	`x`, `y`, `size`, `label`, `color`, `trend`
`heatmap`	patterns in a grid of two categories	`x`, `y`, `value`
`sankey`	flows from one stage to the next	`source`, `target`, `value`
`network`	connections	`source`, `target`, `value`, `layout`, `arrows`
`treemap`, `sunburst`	a hierarchy, each part's share	`label`, `value`, `levels`
`sparkline`	a shape the size of a word	`label`, `value`

An option left out takes the first field that fits: a numeric one for a number, another one for a name.

Where the numbers come from

data='sales' - a {data} store, a sequence store, an array of the page's PHP, or a _data file of that name.
value= names the field with the number, label= the field for the axis. Without them the first numeric field is the value and the first other field the label.
sequence='fibonacci', rows=12 - the first terms of a sequence, for demo data straight away.

Several series

A list of fields in value= draws a series each - bars side by side, or on top of each other with stacked, or a line each, named at its end. A legend above the plot names them in the fixed order of the colours; eight series at most.

PHP
fragments/charts_3.php HTML
fragments/charts_3.pad Result

PHP fragments/charts_3.php	HTML fragments/charts_3.pad	Result
`<?php $sales = [ [ 'month' => 'Jan', 'online' => 1200, 'shop' => 800 ], [ 'month' => 'Feb', 'online' => 950, 'shop' => 1100 ], [ 'month' => 'Mar', 'online' => 1430, 'shop' => 960 ], [ 'month' => 'Apr', 'online' => 1610, 'shop' => 720 ] ]; ?>`	`{chart 'bar', data='sales', label='month', value='online, shop', width=480, height=220} {chart 'bar', data='sales', label='month', value='online, shop', stacked, width=480, height=220} {chart 'line', data='sales', label='month', value='online, shop', width=480, height=220}`

<?php

  $sales = [
    [ 'month' => 'Jan', 'online' => 1200, 'shop' => 800 ],
    [ 'month' => 'Feb', 'online' =>  950, 'shop' => 1100 ],
    [ 'month' => 'Mar', 'online' => 1430, 'shop' => 960 ],
    [ 'month' => 'Apr', 'online' => 1610, 'shop' => 720 ]
  ];

?>

{chart 'bar', data='sales', label='month', value='online, shop', width=480, height=220}
{chart 'bar', data='sales', label='month', value='online, shop', stacked, width=480, height=220}
{chart 'line', data='sales', label='month', value='online, shop', width=480, height=220}

Horizontal bars

hbar lays the bars down, the names on the left - for long names or many categories.

PHP	HTML fragments/charts_4.pad	Result
	`{data 'teams'} team,points Lions,71 Tigers,84 Bears,-12 Wolves,55 {/data} {chart 'hbar', data='teams', label='team', value='points', width=480, height=200}`

Pie and donut

Parts of a whole: only positive values count, clockwise from twelve o'clock, a legend with each value and its share. Past eight parts the smallest are folded into one grey Other. A donut shows the total in its middle.

PHP HTML
fragments/charts_5.pad Result

PHP	HTML fragments/charts_5.pad	Result
	`{data 'budget'} post,amount Housing,1200 Food,450 Transport,200 Savings,300 {/data} {chart 'pie', data='budget', label='post', value='amount', width=420, height=200} {chart 'donut', data='budget', label='post', value='amount', width=420, height=200}`

{data 'budget'}
  post,amount
  Housing,1200
  Food,450
  Transport,200
  Savings,300
{/data}
{chart 'pie', data='budget', label='post', value='amount', width=420, height=200}
{chart 'donut', data='budget', label='post', value='amount', width=420, height=200}

Scatter and bubble

A dot per row on two numeric axes, x= and y=. color= colours the dots by a field, trend draws the least-squares line. A bubble's size= sets its area.

PHP
fragments/charts_6.php HTML
fragments/charts_6.pad Result

PHP fragments/charts_6.php	HTML fragments/charts_6.pad	Result
<?php $cars = [ [ 'model' => 'Alto', 'weight' => 1000, 'mpg' => 45, 'origin' => 'Japan', 'sold' => 12 ], [ 'model' => 'Berlin', 'weight' => 1200, 'mpg' => 40, 'origin' => 'Europe', 'sold' => 5 ], [ 'model' => 'Corsa', 'weight' => 1350, 'mpg' => 37, 'origin' => 'Japan', 'sold' => 3 ], [ 'model' => 'Dakota', 'weight' => 1500, 'mpg' => 33, 'origin' => 'USA', 'sold' => 20 ], [ 'model' => 'Eagle', 'weight' => 1800, 'mpg' => 28, 'origin' => 'USA', 'sold' => 8 ], [ 'model' => 'Falcon', 'weight' => 2100, 'mpg' => 22, 'origin' => 'USA', 'sold' => 30 ] ]; ?>	`{chart 'scatter', data='cars', x='weight', y='mpg', label='model', color='origin', trend, width=480, height=240} {chart 'bubble', data='cars', x='weight', y='mpg', size='sold', label='model', width=480, height=240}`

<?php

  $cars = [
    [ 'model' => 'Alto',   'weight' => 1000, 'mpg' => 45, 'origin' => 'Japan',  'sold' => 12 ],
    [ 'model' => 'Berlin', 'weight' => 1200, 'mpg' => 40, 'origin' => 'Europe', 'sold' =>  5 ],
    [ 'model' => 'Corsa',  'weight' => 1350, 'mpg' => 37, 'origin' => 'Japan',  'sold' =>  3 ],
    [ 'model' => 'Dakota', 'weight' => 1500, 'mpg' => 33, 'origin' => 'USA',    'sold' => 20 ],
    [ 'model' => 'Eagle',  'weight' => 1800, 'mpg' => 28, 'origin' => 'USA',    'sold' =>  8 ],
    [ 'model' => 'Falcon', 'weight' => 2100, 'mpg' => 22, 'origin' => 'USA',    'sold' => 30 ]
  ];

?>

{chart 'scatter', data='cars', x='weight', y='mpg', label='model', color='origin', trend, width=480, height=240}
{chart 'bubble', data='cars', x='weight', y='mpg', size='sold', label='model', width=480, height=240}

Heatmap

Two categories as columns (x=) and rows (y=), each cell coloured by its value in seven steps of one hue, with the scale underneath.

PHP HTML
fragments/charts_7.pad Result

PHP	HTML fragments/charts_7.pad	Result
	`{data 'visits'} day,hour,count Mon,9h,3 Mon,12h,12 Mon,15h,7 Tue,9h,5 Tue,12h,20 Tue,15h,9 Wed,9h,1 Wed,12h,15 Wed,15h,4 {/data} {chart 'heatmap', data='visits', x='hour', y='day', value='count', width=420, height=200}`

{data 'visits'}
  day,hour,count
  Mon,9h,3
  Mon,12h,12
  Mon,15h,7
  Tue,9h,5
  Tue,12h,20
  Tue,15h,9
  Wed,9h,1
  Wed,12h,15
  Wed,15h,4
{/data}
{chart 'heatmap', data='visits', x='hour', y='day', value='count', width=420, height=200}

Sankey

A row is a flow from source= to target=, as wide as its value=. The columns follow the flows; flows that go round in a circle are an error.

PHP HTML
fragments/charts_8.pad Result

PHP	HTML fragments/charts_8.pad	Result
	`{data 'energy'} from,to,amount Coal,Electricity,40 Gas,Electricity,30 Gas,Heat,25 Solar,Electricity,15 Electricity,Homes,45 Electricity,Industry,30 Electricity,Losses,10 Heat,Homes,25 {/data} {chart 'sankey', data='energy', source='from', target='to', value='amount', width=480, height=260}`

{data 'energy'}
  from,to,amount
  Coal,Electricity,40
  Gas,Electricity,30
  Gas,Heat,25
  Solar,Electricity,15
  Electricity,Homes,45
  Electricity,Industry,30
  Electricity,Losses,10
  Heat,Homes,25
{/data}
{chart 'sankey', data='energy', source='from', target='to', value='amount', width=480, height=260}

Network

A row is a link between two nodes. The default layout='force' pulls linked nodes together - the same data always draws the same picture - and layout='radial' sets them on a circle; arrows shows the direction.

PHP HTML
fragments/charts_9.pad Result

PHP	HTML fragments/charts_9.pad	Result
	`{data 'friends'} from,to Ann,Bob Ann,Cas Bob,Cas Cas,Dirk Dirk,Eva Eva,Fay Fay,Dirk {/data} {chart 'network', data='friends', source='from', target='to', arrows, width=420, height=260} {chart 'network', data='friends', source='from', target='to', layout='radial', width=420, height=260}`

{data 'friends'}
  from,to
  Ann,Bob
  Ann,Cas
  Bob,Cas
  Cas,Dirk
  Dirk,Eva
  Eva,Fay
  Fay,Dirk
{/data}
{chart 'network', data='friends', source='from', target='to', arrows, width=420, height=260}
{chart 'network', data='friends', source='from', target='to', layout='radial', width=420, height=260}

Treemap and sunburst

levels= lists the fields above the parts, the outermost first. A treemap nests rectangles, a sunburst rings; the colour is that of the outermost level.

PHP HTML
fragments/charts_10.pad Result

PHP	HTML fragments/charts_10.pad	Result
	`{data 'spend'} dept,post,amount IT,Laptops,500 IT,Cloud,800 IT,Licences,300 HR,Training,400 HR,Recruiting,250 Sales,Travel,600 Sales,Events,350 {/data} {chart 'treemap', data='spend', levels='dept', label='post', value='amount', width=480, height=260} {chart 'sunburst', data='spend', levels='dept', label='post', value='amount', width=300, height=300}`

{data 'spend'}
  dept,post,amount
  IT,Laptops,500
  IT,Cloud,800
  IT,Licences,300
  HR,Training,400
  HR,Recruiting,250
  Sales,Travel,600
  Sales,Events,350
{/data}
{chart 'treemap', data='spend', levels='dept', label='post', value='amount', width=480, height=260}
{chart 'sunburst', data='spend', levels='dept', label='post', value='amount', width=300, height=300}

Sparklines

{sparkline} is a line chart the size of a word, without axes, to stand in a sentence or a table cell.

PHP	HTML fragments/charts_2.pad	Result
	`<p>Fibonacci grows fast: {sparkline sequence='fibonacci', rows=12}</p>`	Fibonacci grows fast:

Accessible and themeable

Every chart is an image to a screen reader (role="img"), named by its title= and described by a list of its values. Every bar, point, slice, cell, flow and node carries its own tooltip; a sparkline has none. The colours are CSS custom properties - --pad-chart-series, --pad-chart-text, --pad-chart-grid, --pad-chart-surface, the categorical --pad-chart-1 to --pad-chart-8, --pad-chart-other and the heatmap's --pad-chart-heat-0 to --pad-chart-heat-6 - set on .pad-chart, and their defaults follow the page's color-scheme, light or dark.