View source for Template: Graphical timeline/doc - New World Encyclopedia

<includeonly>{{template doc page transcluded}}</includeonly><noinclude>{{template doc page viewed directly}}</noinclude>
<!-- EDIT TEMPLATE DOCUMENTATION BELOW THIS LINE -->

{{nutshell|
*Use {{tl|Include timeline}} in the main article for assisted generation.
*Type <code><nowiki>{{Graphical timeline|help=on}}</nowiki></code> into a page, then press preview for a ready-to-go template.
*Check that complicated timelines display as you expect in both [[internet explorer|IE]] and [[Firefox]]}}

==The easy way==
Type {{tlx|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==
Whilst I've tested this template as thoroughly as I can, I suspect it could be further improved. If you find any glitches or areas you wish you could customise, please let me know! ''[[User:Verisimilus|Verisimilus]]''&nbsp;'''<small>[[User_talk:Verisimilus|T]]</small>''' 12:02, 12 June 2007 (UTC)

==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 reside within a table - although a margin can be added.

==Why use this template?==
The alternative to this template is [[m:EasyTimeline]], using the <nowiki><template></nowiki> 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're 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 isn't scalable - it doesn't enlarge with text size.

==Using the template==
===Where to use it===
Whilst short timelines can be inserted directly into the article, some editors that long, complex timelines break up the flow of the page and make editing difficult. Therefore, you may want to use {{tl|Include timeline}} to host the timeline code on a separate page, which will be automatically included.

===Getting started===
You can set the switch <tt>|help=on</tt> in the template to produce some quick pointers.<br> When you're getting started, you might want to use <tt>{</tt><tt>{Graphical timeline|help=on}}</tt> to generate a ready-made, empty template - or type {<tt>{subst:Graphical timeline/blank}</tt>} 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 of [[em (typography)|em]], 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 <code> |bar1-left=0 |bar1-right=0.5 |bar2-left=0.666 |bar3-left=0.5 |bar3-right=0.666 </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 the [[CSS]] standards of <code>solid, dotted, dashed, double, groove, ridge, inset</code> or <code>outset</code>. Width is in the same units as height, and if none is specified 0.1 to 0.2 is a suitable hairline value.

===Blank lines===
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 don't specify.

===Geological periods===
To draw a geological period, use the syntax |period3=Triassic, with |period3-left=0.1 as usual.  The template will then calculate the beginning, end and correct colour of the bar.  For an example, see {{tiw|Triassic graphical timeline}}

===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 least [[internet explorer|IE]] and [[firefox]] if you're making a particularly complex timeline.

====Colours====
If you're setting colours using html values that look like <code>#e0b539</code>, do consider that some older monitors, and many projectors, cannot display some colours. Sticking to multiples of <tt>33</tt> — e.g. <code>#ff99cc</code> or <code>#03C</code> — ensures maximum compatability, which is often appreciated.

====Capacity====
If you find that highly-numbered bars, notes or legend entries are not showing up, it could be because the template has not been coded to handle it. There are instructions in the template code for how to add capacity for more bars etc. yourself (it's a simple copy and paste job); if you're not confident doing that, let ''[[User:Verisimilus|Verisimilus]]''&nbsp;'''<small>[[User_talk:Verisimilus|T]]</small>''' know.

====Easy editing====
If you create a timeline on a subpage, do use the <code> | link-to= </code> parameter. Specify the page name (e.g. <tt>Template:My graphical timeline</tt>, and "edit" and "history" links will appear.

==Parameter list==

The list may be long, but don't be daunted - you only need to use a couple, and the rest give you infinite flexibility!

Replace any instance of # with a number.

To and from are mandatory, all other parameters are optional.

===General parameters===
{| class="wikitable sortable"
|+Timeline parameters
!Parameter
! Function
! Required?
|- 
|from
|The start date of the timeline. May be negative.
|{{yes}}
|- 
|to
|The final (uppermost) date of the timeline. May be negative.
|{{yes}}
|- 
|width
| width of the timeline
|{{no}}
|-
| title
| What to display in the title bar
| {{no}}
|-
| title-colour
| The background colour for the title bar
| {{no}}
|-
|}

===Geological periods===

{| class="wikitable sortable"
!Parameter
! Function
|- 
| period#
| Specify the name of the period; the template will automatically work out when it starts and ends, and colour it correctly.
|-
|+ Period parameters
|}

===Bars===
{| class="wikitable sortable"
!Parameter
! Function
|- 
|width
| width of the timeline
|-
|+ Bar parameters
|}
===Legend===
{| class="wikitable sortable"
!Parameter
! Function
|- 
|width
| width of the timeline
|-
|+ Legend parameters
|}
===Notes===
{| class="wikitable sortable"
!Parameter
! Function
|- 
|width
| width of the timeline
|-
|+ Note parameters
|}

==In use: an example==
The code on the left produces the timeline on the right, which is deliberately horrendous in order to demonstrate the limitations of the template. For a working example, I'd recommend looking at [[Ediacaran biota]].

{{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 was 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-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.
}}
<pre>{{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 was 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.
}}
</pre>

==Notes on the example==
* <tt>{</tt><tt>{!}}</tt>  must be used whereever you want a | to appear (e.g. the caption)
* If you don't 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 the two borders - 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.

<!-- Categories and interwikis below this line -->
<includeonly>
[[Category:Timeline templates|{{PAGENAME}}]]
[[de:Vorlage:Grafische_Zeitleiste]]
</includeonly><noinclude>
{{Credits|227094541}}
</noinclude>