From ChaosReligion

Jump to: navigation, search

To see WikiTimeLine work, just click on the following five link examples: Timeline (Jesus), Timeline (Elvis Presley), T-Rex, Timeline (Earth), Timeline (Universe)
Click on the appearing gray time intervall, hold the mouse key down and move to the left or right to move the visible time intervall to an earlier or later date in time. You will see the timelines move around as you move the mouse curser while holding the mouse key down.

WikiTimeLine is a MediaWiki extension built in cooperation with the WikiTimeScale website. After entering a start/from and end/to date to an article text with the wtl or wikitimeline tag, a link will be created. By clicking on such a link, a javascript created timeline will be displayed. You can control the timeline by links between the overview timeline at the bottom and the main timeline at the top. You can also click on an event in the timeline and a yellow-info-balloon will appear. This info-balloons have links too. With those links you can zoom in to an event, remove an event from the timeline or go to the article page of an event.

Since version 1.0 the timelines is created client-side, so this extension can now be used on heavy traffic wikis too. Because of this new client-side created JavaScript interface of WikiTimeLine it is now much more interactive too. Now you can change the visible window with this javascrip interface in real-time as you like: Zoom in or out, move to the left or right. Also, you can now click on an event and see more information about it.

Like MediaWiki, WikiTimeLine is licenced under the GNU General Public License.

See this' MediaWiki Version page for a few more technical information about the WikiTimeLine extension. Click on one of the WikiTimeline links to see an example of how it works.


Examples and Description

WikiTimeLine links

The links are produced with the WikiTimeLine tags (described below). Just as you would create a reference in Wikipedia. Once again the five example links. Just click on them and see WikiTimeLine work:


For a description of the WikiTimeLine user-interface see the Help:WikiTimeLine page. The link to this page is displayed under the user-interface too. The interface will pop-up as soon as you click on a WikiTimeLine link (so: as soon as you add an event or person to the timeline, the timeline/user-interface will pop-up). Here are also two images which display the user-interface as soon as it is popped up.

This is the WikiTimeLine interface with one event added.
This is the WikiTimeLine interface with one event added.
In this example, three timelines are shown. You can change the visible window with this javascrip interface as you like: Zoom in or out, move to the left or right.
In this example, three timelines are shown. You can change the visible window with this javascrip interface as you like: Zoom in or out, move to the left or right.


Now we come to the tag examples. Here you will learn how to write WikiTimeLine tags in the article and which links these tags produce. If a reader (or you yourself) clicks on one of those produced links he will add an event or a person to the timeline (see above for such link examples).

The avaliable Tags

  • <wtl ...>Name</wtl> or <wikitimeline ...>Name</wikitimeline></nowiki> for normal tags that will crate links (the three points represent the tag options, see below). Possible is also: <wtl ... /> and <wikitimeline ... /> The name will then be the title of the page. You can change the caption in the timeline, the link to the article and the displaying in the text to something different than the Name of the tag. The only thing you can't change to something different is the headline in the yellow info-balloon of the event in the timeline. This will always be the name of the tag like specified between the open- and end-tag.
  • <wtl_frame name="name"><wtl ...>Name Tag 1</wtl><wtl ...>Name Tag 2</wtl> ... </wtl_frame> You can create a WikiTimeLine frame, in style just like the category links at the end of the article page, with <wtl> or <wikitimeline> tags in between its open- and end-tag. You can use the optional "name" tag-option to give it a name and use the "inline" option for keeping it inside the article text (if "normaly" wikitimeline tags are displayed at the end of the page, just like categories, because otherwise the frame wouldn't be displayed). So one example is: <wtl_frame inline><wtl ...>...</wtl></wtl_frame>.

The available Tag options

  • Date information: Dates must be written in the international format: Year-Month-Day (Example: 2008-12-24 or -100000-3-7). It is also possible to specify only the year and month or only the year (Example: 2008-12 for the December 1, 2008 and -100000 for Jannuary 1, 100,000 B.C.). You can use the point, slash or minus as separator (Example: 2008-1-4 or 2008.1.4 or 2008/1/4).
    • For the beginning date: fromdate, begindate, startdate, from, begin, start
    • For the ending date: todate, enddate, to, end
    • For an alternative beginning date: altfromdate,altbegindate,altstartdate,altfrom,altbegin,altstart
    • For an alternative ending date: alttodate,altenddate,altto,altend
    • You can specify the year, month and day of the (alternative) beginning and (alternative) ending dates separately (year, month and day separately). This you won't need if you use one of the above four tags.
      • For just the beginning year: fromyear,startyear,beginyear
      • For just the beginning month: frommonth,startmonth,beginmonth
      • For just the beginning day: fromday,startday,beginday
      • For just the ending year: toyear,endyear
      • For just the ending month: tomonth,endmonth
      • For just the ending day: today,endday
      • For just the alternative beginning year: altfromyear,altstartyear,altbeginyear
      • For just the alternative beginning month: altfrommonth,altstartmonth,altbeginmonth
      • For just the alternative beginning day: altfromday,altstartday,altbeginday
      • For just the alternative ending year: alttoyear,altendyear
      • For just the alternative ending month: alttomonth,altendmonth
      • For just the alternative ending day: alttoday,altendday
  • Displaying options for the timeline: These concern the way the event or person is displayed on the timeline (for example: color).
    • For the color: color, colour You can use one of these color names for WikiTimeLine or specify a hex. color code like in HTML when positioning a sharp in front of the hex. color code (Example: #05f4ae).
    • For the article: link This will specify the article to which the headline in the yellow info-balloon links.
    • For the caption in the timeline: caption This will specify what caption the event or person has in the timeline.
    • For the text in the yellow info-balloon: text This will add some additional text to the yellow info-balloon about the event or person.
    • For the type or group of the event/person: type, group This will add the specified text next to the headline in the yellow info-balloon. (Example: "Person" or "War")
  • Then there are options for the kind of displaying in the article text:
    • For superior text: sup, high, up (no value)
    • For inline text (or inline frame): inline (no value) This is only needed if "normal" tags would be displayed like category at the end of the article. Inline text would then be displayed inside the article, not at the end.
    • For a different text in the article: display, prompt Otherwise the text between the WikiTimeLine tags would be displayed.

If a option has no value, this means you don't have to give it a value. It's enough to write <wtl inline startdate="..."> or <wikitimeline sup startdate="...">

Tag examples

For better understanding, the format of the wikitimeline tags will be made visible (through nowiki tags) at the examples, but normaly they would, of course, not be seen.

  • Example 1: <wtl startdate="2001-05-01" enddate="2002-01-10">Example 1</wtl> This will be displayed at the end of the article, just like categories. It's name will be "Example 1"
  • Example 2: <wikitimeline startdate="100-10-05" enddate="1500-11-25" altenddate="1502-06-15"/> This has an alternative end date (just put an "alt" in front of the enddate or startdate to get an alternative date) and will use the article title as timeline name. Again, this will be displayed at the end of the article, just like categories.
  • Example 3: <wikitimeline altstartdate="-7-12-24" startdate="0-12-24" enddate="33-4-10" color="red">Jesus</wikitimeline> This one has an alternative startdate that's BC (simply a negative year number) and the color "red". Once more, this will be displayed at the end of the article, just like categories.
  • Example 4: <wtl inline fromyear="1900" toyear="2000" color="#55f00f">19th century</wtl> This time it is an inline tag that will be forced to appear within the text and not at the end of the article, and the color is a hexadecimal code. The start and end date is only given by years this time: Timeline (19th century)
  • Example 5: <wtl sup fromyear="1950" enddate="1959-12-31" /> Again inline but this time it's a sup-element (just like in html), from date is only a year, enddate is a whole year-month-day format. The name of the tag is again the article name: Timeline
  • Example 6: <wikitimeline_frame inline name="Years"><wtl fromyear="2001" toyear="2002">Year 1</wtl><wikitimeline fromyear="2002" toyear="2003">Year 2</wikitimeline><wtl fromyear="2003" toyear="2004">Year 3</wtl></wikitimeline_frame> In this case we have a whole frame that is made to appear inline, additionally to the ones that are at the end of the article. We only have to make the frame inline and the tags inside the frame will follow:
  • Example 7: <wtl inline startdate="2003-3-20" enddate="2003-5-1" ongoing>Iraq war</wtl> This is an ongoing event with an ending date. This means that the alternative date is ongoing. Link: Timeline (Iraq war)
  • Example 8: <wtl inline startdate="2001-10-7" ongoing >War in Afghanistan</wtl> This is an ongoing event without an ending date. This means that the whole event is ongoing. Link: Timeline (War in Afghanistan)
  • Example 9: <wtl inline start="-540000000" end="-250000000" link="Trilobite" caption="Trilobites" display="The Trilobites" text="The Trilobites were an early species" color="#00ff00">Trilobite</wtl> This event has the caption "Trilobites" in the timeline, referes to the article "Trilobite" and will be displayed as "The Trilobites" in the text. In the yellow info-ballon of the event there will appear the text "The Trilobites were an early species" (if you click on the event in the timeline it will appear). Also, the headline in this yellow info-balloon the headline will refer to the article "Trilobite" (with the 'link' option). Link: The Trilobites


You are encouraged to try out the WikiTimeLine extension on your own in the Sandbox. To be able to try out the WikiTimeLine links please create a user profile and/or log in, since WikiTimeLine can only be used by logged in users. You can also use the Guest account: Type in the username Guest at the login and don't use a password (simply leave the textbox for the password blank).


  • WikiTimeLine extension in zip format: Version 1.0 (client side)
  • WikiTimeLine extension in zip format: Version 0.1.2 (old server side version, creating images)
  • Complex font in zip format (only needed for Version 0.1.2 (old server side version): This is needed for the old version 0.1.2 server side WikiTimeLine extension to display complex-sign languages like chinese, so the signs can be displayed in the picture. If you need this, download it and unpack the file to the "fonts" subdirectory of the WikiTimeLine extension. Afterwards change the value of $wgWikiTimeLineCONST_FONT parameter in wikitimeline.setup.php (in the WikiTimeLine extension directory) to the filename of the new font (which is 'simsun.ttc'). Now you can use complex languages.

Install instructions

  • Unpack the package into your "extensions" subdirectory of your mediawiki installation (so that all files are in a "wikitimeline" named subdirectory of the extensions directory afterwards).
  • Add the following line to the bottom of the LocalSettings.php file in your mediawiki home/main directory:


Tested Browsers

WikiTimeLine was tested successfully with the following browsers:

  • Internet Explorer 6, 7, 8
  • Firefox 2, 3
  • Opera 8, 9.5 (partially functional with 7 and 7.5)
  • Safari 3.1, 4
  • Mozilla 1
  • Netscape Navigator 8, 9 (partially functional with 6 and 7)


Go here for the JSDoc documentation of the JavaScript interface.

Timeline Link Examples

Beneath are the not-inline examples of the links resulting out of the wtl and wikitimeline tags.

Personal tools