FANDOM


Timeline is an alternative to EasyTimeline created in Lua.

Installation

Create a module (for example Module:Timeline) on your wiki and paste this code in:

return require('Dev:Timeline')

Usage

Create a configuration module (for example Module:Timeline/Data):

return {
    from = 'dd/mm/yyyy',
    till = 'dd/mm/yyyy',
    dataset = {
        {
            name = 'Label 1',
            bars = {
                { from = 'dd/mm/yyyy', till = 'dd/mm/yyyy', bar_type = 'my_bar_type' }
            }
        }
    },
    bar_types = {
        my_bar_type = {
            legend = 'My Bar Type',
            color = 'red'
        }
    }
}

Make sure to replace dd/mm/yyyy with actual dates.

Then use it on a page:

{{#invoke:(module name)|create|(config name)}}

For example:

{{#invoke:Timeline|create|Timeline/Data}}

Examples


Label 1
Label 1
  • Red Bar:
    30/06/2015 – 26/01/2017
Label 2
Label 2
  • Red Bar:
    11/01/2016 – 21/08/2017
  • Gradient Bar:
    21/08/2017 – 16/03/2018
Label 3
Label 3
  • Gradient Bar:
    30/06/2015 – 30/06/2016
  • Gradient Bar:
    01/01/2017 – 17/06/2018
2016
2017
2018
Gradient Bar
Red Bar


return {
    from = '30/06/2015',
    till = '17/06/2018',
    dataset = {
        {
            name = 'Label 1',
            bars = {
                { from = 'start', till = '26/01/2017', bar_type = 'red' }
            }
        },
        {
            name = 'Label 2',
            bars = {
                { from = '11/01/2016', till = '21/08/2017', bar_type = 'red' },
                { from = '21/08/2017', till = '16/03/2018', bar_type = 'blue' }
            }
        },
        {
            name = 'Label 3',
            bars = {
                { from = 'start', till = '30/06/2016', bar_type = 'blue' },
                { from = '01/01/2017', till = 'end', bar_type = 'blue' }
            }
        }
    },
    bar_types = {
        red = {
            legend = 'Red Bar',
            color = 'red'
        },
        blue = {
            legend = 'Gradient Bar',
            color = 'linear-gradient(to right, blue, aqua, blue)'
        }
    },
    style = {
        legend_columns = 2
    }
}

External examples

Configuration

Root object

Property Type Description Required
from string – dd/mm/yyyy format timestamp or now Start date for timeline YES
till string – dd/mm/yyyy format timestamp or now End date for timeline YES
dataset table of Labels Labels for the timeline YES
bar_types key-value table of BarTypes List of bar types YES
style Style Optional styling for the table NO
hidden Hidden Hide timeline elements NO

Label

Property Type Description Required
name string Display name YES
bars table of Bars List of bars YES

Bar

Property Type Description Required
from string – dd/mm/yyyy format timestamp, now, start or end Start date for the bar YES
till string – dd/mm/yyyy format timestamp, now, start or end End date for the bar YES
bar_type string - name (key) of a BarType Bar type YES

BarType

Property Type Description Required
legend string Display name of the bar NO
color CSS background value Color of the bar YES
order number Display order NO

NOTE: Any background value is permitted (RGB, HEX, linear-gradient etc.).

Style

NOTE: All of those values are optional.

Property Type Description Default
background_color CSS background-color value Background of the chart Inverse of wiki's text color
text_color CSS color value Text color of the chart Wiki's text color
timeline_padding number Padding around the timeline 4
labels_width number Width taken by labels 120
bar_height number Height of a bar (some font sizes are also dependent on it) 16
bar_margin number Margin between bars 8
chart_margin number Margin between chart and labels 10
chart_major CSS color value Color of timeline years indicator Wiki's text color
chart_minor CSS color value Color of timeline months indicator Wiki's text color with 50% alpha
bar_background CSS background-color value Background behind bars Timeline's background color
bar_alpha number Opacity of background behind bars 50
legend_columns number Columns of text in the legend 3
label_format string Formatting for each label, where $name is replaced by label name None

Hidden

Property Type Description Default
timeline bool Hides year numbers under the chart false
legend bool Hides the legend false
background bool Hides background behind the chart false
Community content is available under CC-BY-SA unless otherwise noted.