{timeline}
Draws events on a time axis as inline SVG - cards above and below the axis, spans as bars, or one under the other.
Syntax
{timeline data='name', date='field', label='field', text='field', color='field', format='Y', title='text', width=720, height=300}
{timeline data='name', from='field', to='field', date='field', label='field'}
{timeline date='field', label='field', vertical} ... {/timeline}Options
-
data -
The rows: a
{data}store, a page array or a_datafile, as for{chart}. As a pair the content is the rows - JSON, YAML, XML or CSV. -
date -
The field of a moment: a year (
1969), a month (2026-10) or anythingstrtotimereads - else the first field that reads as one. -
from -
The field with the start of a span, drawn as a bar (with
to). -
to - The field with the end of a span.
-
label - The field with an event's title - else the first other text field.
-
text - The field with the line under the title - else the next text field.
-
color - A field that groups the events: a colour each and a legend.
-
format -
A PHP date format for the dates written - else by the date's precision (
1969,Oct 2026,Oct 8, 2026). -
vertical - Bare option: dates on the left and cards on the right, one under the other - for a long list.
-
width - The width in pixels, default 720 (vertical 600).
-
height - The height in pixels; by default it follows from the cards (not in the vertical form).
-
title -
The accessible name, default
Timeline.
Description
{timeline} lays events out on a time axis and writes them as inline SVG (tags/_lib/timeline.php). The rows come from data= as for {chart}, or from the content of the pair - JSON, YAML, XML or CSV.
A row with a date is a moment: a dot on the axis and a card above or below it with the label and, under it, the text. The sides alternate, and a card that would cover another card or a leader line moves to the other side or a lane further out. A row with from and to is a span, drawn as a bar in a lane under the axis with its label inside or beside it; moments and spans mix in one timeline. Left out, date is the first field that reads as a date, and label and text the first other text fields.
The axis gets round ticks by the span it covers - years in steps of 1 to 100, months by 1, 3 or 6, or days - and the dates on the cards are written by their precision, or by format. color groups the events by a field, a colour each with a legend. vertical puts the events one under the other instead, dates left and cards right, which suits a long list or a narrow column.
Every event has a <title> and the <desc> lists them all. A timeline without rows answers nothing, so its @else@ shows; rows of which none has a usable date are an error under the strict check. For a month grid see {calendar}, for a project plan with progress {chart 'gantt'}.
Examples
Moments from CSV
The rows written as CSV between the tags; format=Y writes only the year.
{timeline date='when', label='what', text='detail', format='Y', title='Milestones of spaceflight'}
when,what,detail
1957-10-04,Sputnik 1,First satellite
1961-04-12,Vostok 1,Gagarin in orbit
1969-07-20,Apollo 11,People on the Moon
1971-04-19,Salyut 1,First space station
1990-04-24,Hubble,A telescope in orbit
1998-11-20,Zarya,The ISS begins
{/timeline}Spans and milestones
from= and to= draw bars, date= the milestones; color= groups them with a legend.
{timeline data='plan', from='start', to='end', date='day', label='name', color='kind', title='Website relaunch 2026'}<?php
$plan = [
[ 'name' => 'Design', 'kind' => 'Phase', 'start' => '2026-02-02', 'end' => '2026-03-27', 'day' => '' ],
[ 'name' => 'Build', 'kind' => 'Phase', 'start' => '2026-03-16', 'end' => '2026-06-12', 'day' => '' ],
[ 'name' => 'Testing', 'kind' => 'Phase', 'start' => '2026-05-25', 'end' => '2026-06-26', 'day' => '' ],
[ 'name' => 'Kick-off', 'kind' => 'Milestone', 'start' => '', 'end' => '', 'day' => '2026-02-02' ],
[ 'name' => 'Beta', 'kind' => 'Milestone', 'start' => '', 'end' => '', 'day' => '2026-05-15' ],
[ 'name' => 'Launch', 'kind' => 'Milestone', 'start' => '', 'end' => '', 'day' => '2026-07-01' ] ];
?>One under the other
vertical lists the events down the page - the rows as JSON in a data store.
{data 'releases'}
[ { "version": "PHP 7.0", "released": "2015-12-03", "brought": "A twice as fast engine" },
{ "version": "PHP 7.4", "released": "2019-11-28", "brought": "Typed properties and arrow functions" },
{ "version": "PHP 8.0", "released": "2020-11-26", "brought": "JIT, named arguments, match" },
{ "version": "PHP 8.1", "released": "2021-11-25", "brought": "Enums, readonly properties, fibers" },
{ "version": "PHP 8.4", "released": "2024-11-21", "brought": "Property hooks" } ]
{/data}
{timeline data='releases', date='released', label='version', text='brought', vertical, width=480, title='PHP releases'}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.
- {calendar} Writes a month as a calendar table with its events, or hands over its weeks and days as rows for markup of your own.
- {diagram} Draws a flowchart or a sequence diagram from Mermaid-style lines of text, laid out on the server as inline SVG.