View source for RetroWikipedia:EasyTimeline

{{update}}{{Accessibility dispute|reason=Text is way too small and distorted to be legible at default size}}
{{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 play with it at [http://test.wikipedia.org/w/index.php?title=EasyTimeline test.wikipedia.org]. -->
<!-- not now, EasyTimeline not active on test -->

You can also use this tool outside RetroWikipedia and locally, see the [http://infodisiac.com/RetroWikipedia/EasyTimeline/Introduction.htm EasyTimeline project site], or activate it on other MediaWiki installations, see [[m:Help:EasyTimeline activation|EasyTimeline activation]].

The original EasyTimeline tool hasn't been updated since 2004 so you may get errors on current environments. Fortunately there exists [https://phabricator.wikimedia.org/project/profile/140/ a version on Wikimedia's Phabricator], that fixes some of the bugs and [https://phabricator.wikimedia.org/diffusion/ETLN/browse/master/scripts/ the last update is from August 2024].

For an overview of all charts prepared with EasyTimeline on all wikipedias (images and code) see [http://en.wikipedia.org/wikistats/EN/TimelinesIndex.htm EasyTimeline Index], refreshed weekly as part of the statistics job. (May be down, try the [https://web.archive.org/web/20060830005905/http://stats.wikimedia.org/EN/TimelinesEN.htm#8a540f480ca6432fa99496992da07f32 archive].)

== Accessibility ==
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 examples ==
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 [[:en:Template:Vocal and instrumental pitch ranges|Vocal and instrumental pitch ranges]]. 

<table><tr>
<td valign=top>

<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

# 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:[[Stalin|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>
</td>

<td>&nbsp;&nbsp;</td>
<td valign=top>

<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:[[Mesozoic|Meso~zoic]] shift:(0,1.5)
  from: -545   till: -251.1 text:[[Paleozoic|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:[[Neoproterozoic|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:[[Neogene|Neo-~gene]]             shift:(0,0.5)
  from: -64.3  till: -23    text:[[Paleogene|Paleo~gene]]          shift:(0,0.5)
  from: -286   till: -251.1 # mark end of Paleozoic
  from: -325   till:  -286  text:[[Pennsylvanian|Pennsyl-~vanian]] shift:(0,0.5)
  from: -360   till:  -325  text:[[Mississippian|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:[[Quaternary|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:[[Pleistocene|P]]
  from: -5    till: -1.6  text:[[Pliocene|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>

</td>
</tr></table>

== Code example ==
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:[[Stalin|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. {{elc|de:foo|more about foo}}. Single brackets for external links are also supported.

==Great Timelines Elsewhere==
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'.

*[http://www.hyperhistory.com/online_n2/History_n2/a.html Hyperhistory] (e.g. click on button 'people' left, then on 'special lifelines', right.
*I hope we will have a set like [http://chaos1.hypermart.net/fullsize.htm] 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).

==Unicode==
EasyTimeline does not yet support [[Unicode]]. This will be added later. So better not use it on Unicode enabled RetroWikipedias 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 RetroWikipedia projects take priority right now). 

==Tips==
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 [[:en:user:Erik Zachte|Erik Zachte]] (the author of EasyTime) for help or advice.

==See also==
*[[RetroWikipedia:Timeline standards]]
*[[RetroWikipedia:Timeline syntax]]
*[[mw:Extension:EasyTimeline]]
[[Category:RetroWikipedia features|{{PAGENAME}}]]
[[Category:RetroWikipedia article elements help]]