Type{{include timeline}} in your article, press preview, and follow the link generated. You'll be presented with a ready-to-go template; once this is finished, return to your article, and { {include timeline} } will display your timeline.
Development
As of May 2021, the template has been converted to Lua and is now implemented atModule:Graphical timeline. New features include:
Unlimited numbered parameters --- use note435, note34234532, whatever is convenient
HTML size, memory, and run-time are all proportional to the number of items, not the number of potential items
Incorrect HTML and fragile CSS now cleaned up
Annotation text now automatically aligned with arrows (|disable-arrow-align=true to turn off)
Box text now automatically centered (|disable-box-align=true to turn off)
Template function
This template provides an intuitive, user-friendly and flexible way to insert timelines into articles. It's designed to require the minimum number of variables, and to generate an HTML table.
Why use this template?
The alternative to this template ism:EasyTimeline, using the <template> syntax. EasyTimeline has the following weaknesses:
Pixelated image produced, which looks different and increases page load time
Long set-up time – taking 30 minutes plus even when you know what you are doing
Impenetrable code requiring precise syntax
Difficult to place bars exactly where you want them
Changing minimum dates and sizes requires modification in many places
Everything must be specified – nothing is automatic
It is not scalable – it does not enlarge with text size.
Using the template
Where to use it
Whilst short timelines can be inserted directly into the article, some editors complain that long, complex timelines break up the flow of the page and make editing difficult. Therefore, you may want to use{{Include timeline}} to host the timeline code on a separate page, which will be automatically included.
Getting started
You can set the switch|help=on in the template to produce some quick pointers. When you are getting started, you might want to use{{Graphical timeline|help=on}} to generate a ready-made, empty template – or type{{subst:Graphical timeline/blank}} into a sandbox page, save the page, and edit the resulting code. Hopefully, the parameter names are pretty self-explanatory.
What numbers mean
Numeric values are by default in units ofem, that is, the height and width of a capital M.
The exception to this is the left and right parameters of a bar, which are set using fractional coordinates. That is to say, the code
...will produce bar1 covering the left half of the area, bar2 covering the right-most third, and bar3 in between them. Further, for operational reasons, the height-units are always used to generate border widths.
Bar borders
Borders appear only on the top and bottom of any given bar. Unfortunately, this cannot be changed – to have a border at the top or bottom only of a bar, you should create a separate bar to overlay the end.
Border style can be set to theCSS standards ofsolid, dotted, dashed, double, groove, ridge, inset oroutset. Width is in the same units as height, and if none is specified 0.1 to 0.2 is a suitable hairline value.
Blank parameters
Leaving a parameter blank is NOT the same as not specifying it – it will override the template's default value. Be sure to remove any lines you do not specify.
Geological periods
To draw a geological period, use the syntax |period3=Cenozoic, with |period3-left=0.1 as usual. The template will then calculate the beginning, end and correct color of the bar. For an example, seeTemplate:Cenozoic graphical timeline(backlinksedit)
Considerations
Browsers
Unfortunately, different browsers have different ways of dealing with lines of text that overflow their container – some stretch the container whilst others wrap the text. This means it's probably worth checking your finished timeline in at leastIE andFirefox if you are making a particularly complex timeline.
Colors
If you are setting colors using html values that look like#e0b539, do consider that some older monitors, and many projectors, cannot display some colours. Sticking toWeb-safe colors ensures maximum compatibility, which is often appreciated; i.e. multiples of33, e.g.#ff99cc or#03C.
Easy editing
If you create a timeline on a template page, do use the | link-to= parameter. Specify the page name withoutTemplate: (e.g.My graphical timeline forTemplate:My graphical timeline), and "view", "talk", "edit" links will appear.
Parameter list
The list may be long, but do not be daunted – you only need to use a couple, and the rest give you incredible flexibility!
Replace any instance of # with a number.
To and from are mandatory, all other parameters are optional.
Either spelling ofcolour/color is always acceptable.
General parameters
General parameters
−200 —
–
0 —
–
200 —
–
400 —
–
600 —
–
800 —
–
1000 —
–
1200 —
–
1400 —
–
1600 —
–
1800 —
–
Timeline parameters
Parameter
Function
Default
from to
Bounds the start & end of the timeline. May be negative.
Required
instance-id
Differentiates this timeline from others that appear on the page
Sometimes required
title
Writes the title bar
No title
title-colour
Colours the title bar's background
No colour
plot-colour
Colours the background for the timeline space
No colour
unit
Defines the unit of (graphical) measurement
em
height-unit width-unit
Overrides either the height or width unit
<unit>
height width
Sizes the timeline container
36 10
disable-arrow-align
If true (or equivalent), enables text in notes to be nudged away from arrow
false
disable-box-align
If true (or equivalent), enables text in bars to be nudged away from center
false
collapsible
If true (or equivalent), enables infobox to be collapsed
false
state
Use|state=expanded to force the box to the expanded state, or|state=collapsed to hide it.
expanded
embedded
If yes/true/1, the graphical timeline is embedded in an infobox. Borders etc. are removed.
false
Bars
Bars are sizable coloured rectangles with a text label in the middle.
Bar parameters are prefixed withbar#, where# is the bar's ID. The number doesn't imply any particular order, but it does have to be unique.
−200 —
–
0 —
–
200 —
–
400 —
–
600 —
–
800 —
–
1000 —
–
1200 —
–
1400 —
–
1600 —
–
1800 —
–
bar1
bar2
bar3
bar4
bar5
bar6
bar7
bar8
bar9
Parameter
Function
Default
-colour (-color)
Sets the background colour
Required
-from -to
Positions the top & bottom edges along the timeline
Required
-left -right
Positions the left & right edges, as a fraction of the width (0.0 to 1.0)
0.0 1.0
-border-width -border-colour -border-style
Stylises the top & bottom borders, simultaneously; styles aresolid dotted dashed double groove ridge inset outset. Border width has same units has height (em by default).
No border
-text
Writes the central label
No text
-font-size
Sizes the label
90%
-nudge-down -nudge-up -nudge-right -nudge-left
Nudges the label around (Units are inems). Only enabled if|disable-box-align=1
0.0
Bar parameters
Geological periods
Gets data to create a bar with default values for-colour, -from, -to, -text.
Period parameters are prefixed withperiod#, where# is the period's unique number.
An approximate time-scale of events at the base of theCambrianPeriod. Axis scale is in millions of years ago.
{{Graphical timeline|title=Example Timeline|align=right|plot-colour=#bbeebb|from=-550|to=-500|scale-increment=10|width=10|height=250|height-unit=px|legend1=[[Phanerozoic]]|bar1-from=-542|bar1-left=0|bar1-right=0.1|legend2=[[Precambrian]]|bar2-to=-542|bar2-left=0|bar2-right=0.2|legend3=[[Infracambrian]]|legend3-colour=#e0aacc|bar3-to=-534|bar3-left=0.1|bar3-right=0.2|bar3-colour=#e0aacc|<!-- If this were bar 4, it would be overlapped by the Botomian bar -->|bar14-from=-530|bar14-to=-520|bar14-left=0.95|bar14-right=1.05|bar14-colour=red|legend14=Cambrian explosion|<!--Epochs & stages-->|bar5-text=[[Ediacaran]]|bar5-to=-540|bar5-left=0.2|bar5-border-width=1|bar5-border-colour= #996666|bar5-colour=#cc9999|bar6-text=[[Nemakit-Daldynian]]|bar6-from=-542|bar6-to=-534|bar6-left=0.2|bar6-border-width=0.1|bar6-colour=#99cc99|bar7-text=[[Tommotian]]|bar7-from=-534|bar7-to=-530|bar7-left=0.1|bar7-colour=#99cc99|bar7-border-width=0.1|bar8-from=-530.1|bar8-to=-529.9|bar8-left=0.2|bar8-colour=black|bar9-text=[[Atdabanian]]|bar9-from=-530|bar9-to=-524|bar9-left=0.1|bar9-right=0.95|bar9-colour=#99cc99|bar10-text=[[Botomian]]|bar10-from=-524|bar10-to=-518|bar10-left=0.1|bar10-colour=#99cc99|bar10-border-width=0.1|bar11-text=[[Toyonian]]|bar11-from=-518|bar11-to=-513|bar11-left=0.1|bar11-border-width=0.1|bar11-colour=#99cc99|note1=Base of the Cambrian|note1-at=-542|note1-colour=green|note2=[[Middle Cambrian]]|note2-nudge-left=8.5|note2-nudge-down=0|note2-at=-507|note2-remove-arrow=yes|caption=An approximate time-scale of events<br>at the base of the[[Cambrian]][[Period (geology){{!}}Period]].<br>Axis scale is in millions of years ago.}}
Notes on the example
{{!}} must be used wherever you want a | to appear (e.g. the caption)
If you do not specify when a bar should start or end, it will continue to the edge of the plot
Text should not be too long for the bar
The way that overflowing text wraps is also handled differently in different browsers – it pokes out of the right of the bar on Firefox, but is wrapped within it by IE. Try to manually enter newlines when required rather than relying on browsers to sort it out. Or position a note over the bar – check out note2, which is nudged left over the plot background.
Blank template to copy
{{Graphical timeline|<!--you MUST remove any lines you don't need-->| help=off| link-to={{subst:PAGENAMEE}}<!--use that^ line if the timeline's on a page of its own, so it can be edited easily-->| embedded={{{embedded|}}}<!--Leave if might be used in table-->| from=REQUIRED| to=REQUIRED| scale-increment=| align=| margin=| width=| annotations-width=<!--defines space for notes right to the timelines width-->| width-unit=| height=| height-unit=| unit=<!--overridden by: width-unit or height-unit-->| title=| title-colour=| plot-colour=<!-- replace # with 1, 2, 3 etc.-->| bar#-from=| bar#-to=| bar#-left=<!--0 is the far left of the timeline, 1 the far right.-->| bar#-right=| bar#-colour=| bar#-border-width=<!--in the same units as height-->| bar#-border-colour=| bar#-text=| bar#-nudge-left=| bar#-nudge-right=<!--overrides nudge-left-->| bar#-nudge-up=| bar#-nudge-down=<!--overrides nudge-up-->| legend#=| legend#-colour=<!-- defaults to bar#-colour-->| note#=| note#-nudge-down=<!--overrides nudge-up-->| note#-nudge-up=| note#-nudge-left=| note#-nudge-right=<!--overrides nudge-left-->| note#-remove-arrow=yes| note#-size=<!--Default value is 90%-->| note#-colour=| caption=}}
