DokuWiki

It's better when it's simple

User Tools

Site Tools


plugin:timeline

timeline Plugin

Compatible with DokuWiki

2009-01-30

plugin Add TimeLine capability to DokuWiki

Last updated on
2009-07-30
Provides
Syntax

This extension has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues.

Similar to csstimeline, timeline2

Tagged with diagram, images, media, time

Download and Installation

Search and install the plugin using the Extension Manager. Refer to Plugins on how to install plugins manually.

Old versions:

Revision History

Date Version Description
2010-01-27 02 Internal DokuWiki links from time band added
2009-08-04 01 First version

Description

Timeline plugin can be used to visualize the temporal data. Timeline plugin uses linear time scale with the one-day granularity. There are day, week, month time scales.

The band is described by the time interval. Inside a band several subintervals can be emphasized. You can set color for a band itself or for an emphasizing.

Features

  • colored time band with the one day granularity
  • any amount colored subintervals
  • detection of the interval intersection, the OR'ed colors will be used for intersection
  • choose time scale from day, week, month
  • choose time markers for time scale
  • internal DokuWiki links from time band(no link from intersection)

Usage

<timeline interval=dd/mm/yyyy-dd/mm/yyyy [color=hexcolor] [[scale={w|m|y}] [mark]]>
highlight=dd/mm/yyyy-dd/mm/yyyy[:hex color][=internal wiki page link] ...
</timeline>

In a case if scale is used, it is possible to specify scale markers. Markers are put under following standards:

  • w – ISO-8601 week number of year, weeks starting on Monday;
  • m – numeric representation of a month, without leading zeros;
  • y – a two digits representation of a year.

Example

Code

^Bob  ^
<timeline interval=01/01/2009-31/12/2009 scale=m mark>
highlight=03/07/2009-16/07/2009=bob holiday july
highlight=14/07/2009-22/07/2009:557dcc=Bob sick-list 1
highlight=01/09/2009-14/09/2009
highlight=29/12/2009-30/12/2009
</timeline>

^Joe  ^
<timeline interval=01/05/2009-31/12/2009 scale=w mark>
highlight=19/06/2009-04/07/2009
highlight=14/09/2009-27/09/2009
</timeline>

Where:
  * holidays <timeline interval=01/01/2009-10/01/2009>highlight=01/01/2009-10/01/2009</timeline>
  * sickness <timeline interval=01/01/2009-10/01/2009>highlight=01/01/2009-10/01/2009:557dcc</timeline>

Result

here.

Suggestions

font-size

At the moment the marks are direktly in the table-cells (td). I put them into an extra span-Element. So with some css-code I can use a bigger font-size for the marks.

It ended up in some more code to also change the ruler to be shown over the time-band and the marks under the band. You can now stack bands. So here is the part of the syntax.php I changed:

  if( $this->scale ) {
    if( $this->mark ) $markline = "\n<tr class=\"timeline mark\">";
    $renderer->doc .= "\n<tr class=\"timeline ruler\">";
    foreach($this->ruler as $value) {
 
      $renderer->doc .= "\n<td border=\"0\">".
                          ($value?"<span>&nbsp</span>":"&nbsp;").
                        "</td>";
      if( $this->mark ) {
        $markline .= "\n<td border=\"0\">";
        if ($value) {$markline .="<span>".array_shift($this->marker)."</span>";}
        $markline .=  "</td>";
      }
                   }
    $renderer->doc .= "\n</tr>";
    if( $this->mark ) {
      $markline .= "\n</tr>";
      $renderer->doc .= $markline;
    }

An my extra-code in style.css:

div.timeline tr.mark span {
  position:absolute;
  border-left: 1px solid black;
}
div.timeline tr.ruler span {
  position:absolute;
  border-left: 1px solid black;
  height:9px;
  margin-top:-9px;
}
 
div.dokuwiki div.timeline table    {font-size: 0px;}
div.dokuwiki div.timeline table td {}
div.dokuwiki div.timeline tr.mark  {font-size: 11px;}
div.dokuwiki div.timeline tr.ruler {font-size: 0px;}

Comments

Thanks, this is great! In your next update, could you please add a function to highlight the current date? I'd also like to have multiple timelines represented on the same timeframe or time scale. E.g One page showing all my project timelines for the next 2-3 years, but each project will have a different start and end date, however the earliest project should be leftmost on the chart. Thanks. Andre.

Checked with Release 2010-11-07 “Anteater”: Works fine, but I had to add a slash in line 203 for adresssing the image ( “/lib…” instead of “lib…”), Thanks, NoSi

The Downloadlinks are dead!

Please fix the download links…

plugin/timeline.txt · Last modified: 2019-08-11 15:47 by Aleksandr

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki