Incubator escapee wiki:EasyTimeline
Template:UpdateTemplate:Accessibility dispute Template:Information page As the saying goes: a picture often tells more than a thousand words. This is certainly true for graphical timelines. A detailed listing of events and dates in tabular form may offer the reader a lot of specifics, but may fail to provide an overview, a grand perspective.
From June 1, 2004 there is a wiki way to compose graphical time charts offline.
Syntax description at Help:EasyTimeline syntax.
You can also use this tool outside Wikipedia and locally, see the EasyTimeline project site, or activate it on other MediaWiki installations, see EasyTimeline activation.
The original EasyTimeline tool hasn't been updated since 2004 so you may get errors on current environments. Fortunately there exists a version on Wikimedia's Phabricator, that fixes some of the bugs and the last update is from August 2024.
For an overview of all charts prepared with EasyTimeline on all wikipedias (images and code) see EasyTimeline Index, refreshed weekly as part of the statistics job. (May be down, try the archive.)
AccessibilityEdit
Text is too small and distorted to be legible at default size. Be sure that the text of the article also conveys all the relevant information, or links to an article which does, so that it is available to people who cannot see the image. See WP:ACCESS for more.
Charts examplesEdit
Two simple examples of what is possible. For more extensive examples see Template:Timeline WW II - Pacific Theatre, Template:Timeline_History_of_Computing, de:Template:Zeitleiste Tour-de-France-Sieger.
A nice example of a diagram that is not a timeline in the general sense is Vocal and instrumental pitch ranges.
|
<timeline> ImageSize = width:160 height:550 PlotArea = width:50 height:530 left:50 bottom:10 DateFormat = yyyy Period = from:1919 till:1991 TimeAxis = orientation:vertical ScaleMajor = unit:year increment:5 start:1920
Define $dx = 25 # shift text to right side of bar PlotData= bar:Leaders color:red width:25 mark:(line,white) align:left fontsize:S from:start till:1922 shift:($dx,15) text:Vladimir~Ilyich~Lenin from:1922 till:1953 shift:($dx,5) text:Josef Stalin from:1953 till:1964 shift:($dx,5) text:Nikita~Khrushchev from:1964 till:1982 shift:($dx,5) text:Leonid~Brezhnev from:1982 till:1984 shift:($dx,-12) text:Yuri~Andropov from:1984 till:1985 shift:($dx,4) text:Konstantin~Chernenko fontsize:XS from:1985 till:end shift:($dx,10) text:Mikhail~Gorbachev </timeline> |
<timeline> ImageSize = width:800 height:100 PlotArea = width:720 height:75 left:65 bottom:20 AlignBars = justify Colors = id:epoch value:rgb(0.7,0.7,1) # light yellow id:period value:rgb(1,0.7,0.7) # light red id:age value:rgb(0.7,1,0.7) # light green id:era value:rgb(1,1,0.7) # light blue id:eon value:rgb(1,0.7,1) # light purple id:black value:black Period = from:-4500 till:0 TimeAxis = orientation:horizontal ScaleMajor = unit:year increment:500 start:-4500 ScaleMinor = unit:year increment:100 start:-4500 Define $markred = text:"*" textcolor:red shift:(0,3) fontsize:10 PlotData= align:center textcolor:black fontsize:8 mark:(line,black) width:25 shift:(0,-5) bar:eon color:eon at: 0 align:right $markred at: -545 align:left $markred from: -545 till: 0 text:Phanerozoic from:-4500 till: 0 text:Precambrian bar:era color:era from: -64.3 till: 0 text:C~z shift:(0,1.5) from: -251.1 till: -64.3 text:Meso~zoic shift:(0,1.5) from: -545 till: -251.1 text:Paleo~zoic shift:(0,1.5) from:-4500 till: -545 text:Proterozoic bar:period color:period fontsize:6 from: -1.6 till: 0 from: -64.3 till: -1.6 from: -146 till: -64.3 from: -208 till: -146 from: -251.1 till: -208 from: -286 till: -251.1 from: -360 till: -286 from: -408.5 till: -360 from: -443.5 till: -408.5 from: -490 till: -443.5 from: -545 till: -490 fontsize:8 from: -900 till: -545 text:Neoprote-~rozoic shift:(0,1.8) from:-1600 till: -900 text:Mesoproterozoic from:-2500 till: -1600 text:Paleoproterozoic from:-3800 till: -2500 text:Archaean from: start till: -3800 text:Hadean </timeline> <timeline> ImageSize = width:800 height:120 PlotArea = width:720 height:95 left:65 bottom:20 AlignBars = justify Colors = id:epoch value:rgb(0.7,0.7,1) # light yellow id:period value:rgb(1,0.7,0.7) # light red id:age value:rgb(0.7,1,0.7) # light green id:era value:rgb(1,1,0.7) # light blue id:eon value:rgb(1,0.7,1) # light purple id:filler value:gray(0.8) # background bar id:black value:black Period = from:-545 till:0 TimeAxis = orientation:horizontal ScaleMajor = unit:year increment:100 start:-500 ScaleMinor = unit:year increment:10 start:-540 Define $markred = text:"*" textcolor:red shift:(0,3) fontsize:10 Define $markgreen = text:"*" textcolor:green shift:(0,3) fontsize:10 PlotData= align:center textcolor:black fontsize:8 mark:(line,black) width:25 shift:(0,-5) bar:eon color:eon at: 0 align:right $markred at: -545 align:left $markred from: -545 till: 0 text:Phanerozoic bar:era color:era at: 0 align:right $markgreen at: -64.3 align:left $markgreen from: -64.3 till: 0 text:Cenozoic from: -251.1 till: -64.3 text:Mesozoic from: -545 till: -251.1 text:Paleozoic bar:period color:period fontsize:8 from: -1.6 till: 0 from: -64.3 till: -1.6 text:Tertiary from: -146 till: -64.3 text:Cretaceous from: -208 till: -146 text:Jurassic from: -251.1 till: -208 text:Triassic from: -286 till: -251.1 text:Permian from: -360 till: -286 text:Carboniferous from: -408.5 till: -360 text:Devonian from: -443.5 till: -408.5 text:Silurian from: -490 till: -443.5 text:Ordovician from: -545 till: -490 text:Cambrian bar:age color:age fontsize:6 from: start till: end from: -23 till: -1.6 text:Neo-~gene shift:(0,0.5) from: -64.3 till: -23 text:Paleo~gene shift:(0,0.5) from: -286 till: -251.1 # mark end of Paleozoic from: -325 till: -286 text:Pennsyl-~vanian shift:(0,0.5) from: -360 till: -325 text:Missis-~sippian shift:(0,0.5) </timeline> <timeline> ImageSize = width:800 height:120 PlotArea = width:720 height:95 left:65 bottom:20 AlignBars = justify Colors = id:epoch value:rgb(0.7,0.7,1) # light yellow id:period value:rgb(1,0.7,0.7) # light red id:age value:rgb(0.7,1,0.7) # light green id:era value:rgb(1,1,0.7) # light blue id:black value:black Period = from:-65.5 till:0 TimeAxis = orientation:horizontal ScaleMajor = unit:year increment:10 start:-60 ScaleMinor = unit:year increment:1 start:-65 Define $markgreen = text:"*" textcolor:green shift:(0,3) fontsize:10 PlotData= align:center textcolor:black fontsize:8 mark:(line,black) width:25 shift:(0,-5) bar:era color:era at: 0 align:right $markgreen at: start align:left $markgreen from:start till: 0 text:Cenozoic bar:period color:period from: -1.6 till: 0 text:Qua~ter~nary fontsize:6 align:left shift:(-7,5) from:start till: -1.6 text:Tertiary bar:age color:age from: -1.6 till: 0 from: -23 till: -1.6 text:Neogene from:start till: -23 text:Paleogene bar:epoch color:epoch from: -0.1 till: 0 from: -1.6 till: -0.1 text:P from: -5 till: -1.6 text:Plio~cene shift:(0,1) fontsize:6 from:-23 till: -5 text:Miocene from:-38 till:-23 text:Oligocene from:-55 till:-38 text:Eocene from:start till:-55 text:Paleocene </timeline> |
Code exampleEdit
Just to show you that the script syntax is reasonably intuitive: here is the script for the image to the left: Soviet Leaders.
<syntaxhighlight lang="perl">
- All measures are in pixels
ImageSize = width:160 height:550 PlotArea = left:50 right:0 bottom:10 top:10 AlignBars = justify
DateFormat = yyyy Period = from:1919 till:1991 TimeAxis = orientation:vertical ScaleMajor = unit:year increment:5 start:1920
- there is no automatic collision detection,
- so shift texts up or down manually to avoid overlap
Define $dx = 25 # shift text to right side of bar
PlotData=
bar:Leaders color:red width:25 mark:(line,white) align:left fontsize:S
from:start till:1922 shift:($dx,15) text:Vladimir~Ilyich~Lenin from:1922 till:1953 shift:($dx,5) text:Josef~Stalin from:1953 till:1964 shift:($dx,5) text:Nikita~Khrushchev from:1964 till:1982 shift:($dx,5) text:Leonid~Brezhnev from:1982 till:1984 shift:($dx,-12) text:Yuri~Andropov from:1984 till:1985 shift:($dx,4) text:Konstantin~Chernenko fontsize:XS from:1985 till:end shift:($dx,10) text:Mikhail~Gorbachev
</syntaxhighlight>
Double and single brackets can be used like on wikipedia, language prefix is possible, e.g. Template:Elc. Single brackets for external links are also supported.
Great Timelines ElsewhereEdit
Here are two great sites that may serve as inspiration, it would be very easy to recreate most of those timelines verbatim and with roughly similar layout with EasyTimeline (not yet with images but that may change), but I'm afraid that would be 'not done'.
- Hyperhistory (e.g. click on button 'people' left, then on 'special lifelines', right.
- I hope we will have a set like [1] in a years time (click on full size image for any map), possibly even with images. The main effort will be to gather all info without snatching everything from here (most of these maps are based exclusively on data from Brittanica).
UnicodeEdit
EasyTimeline does not yet support Unicode. This will be added later. So better not use it on Unicode enabled Wikipedias yet.
Aug 2004: Minimal UTF-8 support has been added, meaning that EasyTimeline now recognizes UTF-8 encoded characters. However only extended ASCII accented characters can be shown and not even all of them (rendering package Ploticus has an incomplete ASCII set in its internal font). So full Unicode support will have to wait until external font support has been added (planned late in 2004, other Wikipedia projects take priority right now).
TipsEdit
For first time users EasyTimeline may not seem that easy at all. As with all script languages it takes some getting used to. Also the syntax description may be a bit bewildering due to its sheer size. Fortunately many elements of the script language are optional.
The 'Easy' in EasyTimeline conveys the message that once a timeline exists it is not so hard to understand, enhance or correct. Also translating for use on another wikipedia it is pretty straightforward.
Tips:
- Put each timeline on a separate Template page: this makes it easier to edit, faster to preview, possible to include it in several pages
- Feel free to ask Erik Zachte (the author of EasyTime) for help or advice.