This project is to add a nice graphical way to represent relevant data in a timeline. The first iteration was added to Tiki in Tiki7 using tracker data and the no-longer-maintained Timeline Simile widget. This method has been working but seems to currently have issues. See a (currently broken) example at TikiFest Timeline and docs at PluginTrackerTimeline . New in Tiki 17, the H5P library includes a horizontal timeline feature; vertical timeline solutions still need to be found. Tiki native solutions are also described below.
Some Previous Research
Added since the earlier 2011 research, here are more ideas and possible libraries. But it seems that H5P for elaborate timelines and Tiki native solutions for simple ones may be the way to go, for horizontal timelines anyway.
Desired features:
Click/touch and drag parallax-movement time scales (year, month, day, etc.) like Simile's.
Horizontal timelines:
jQuery.timeline - https://github.com/ka215/jquery.timeline "You can easily create the horizontal timeline with two types by using this jQuery plugin". The two types are bar type (events are independent) and point type (events are points connected by lines to show relationship). MIT license.
Timeline - http://timeline.knightlab.comGit page "TimelineJS is an open-source tool that enables anyone to build visually rich, interactive timelines. TimelineJS 3 is a rewrite of the popular Timeline JS software." (Maybe disqualified by Mozilla Public License (MPL), version 2.0.)
It looks to me like the only real choice is the SIMILE Widgets one, the only other one that i've found from random searching and the links below, is the Google one which uses Flash and doesn't seem to offer as much.
My main reservation about the SIMILE one is that it seems to have jQuery 1.2.6 embedded in it (seemingly in the middle of what looks like a required file) and also has it's own, fairly bulky, AJAX library - which is surely duplication of the one in jQuery. Maybe this is optional - more research needed.
It says in one of the source files: "this JS code was written before some recent JS support libraries became widely used or available" and it all doesn't seem to have been worked on for several years. Having said that, the code does look like it's written to a very high standard, as you'd expect from MIT 😉
However, as this does seem to be the only option, let's see how far we get...
Timeline layouts
Horizontal Timelines
H5P
H5P is integrated in Tiki since v. 17 an the timeline is added in 5 minutes maximum.
After the first import you can create arbitrary timelines and include everywhere in Tiki via a tiny WikiPlugin {h5p fileID="XYZ"} see also: (doc:(H5P)) (including a quick HowTo and (doc:(PluginH5P)).
There is no interaction with Trackers to fetch data implemented yet, but coders have said this would be likely to coming midterm.
H5P timeline implements Timeline.js (link listed below).
Midterm this will be the future solution when comes to a Tracker based timeline, once we make it able to handle tracker records, etc.. Easy to setup and to use right away already from first versions of Tiki 17 +.
Plugin List
It is possible to use the plugin List to create a timeline using some CSS but no additional JavaScript.
A demo of and documentation for a https://doc.tiki.org/Simple-vertical-timeline was added that uses some new CSS and a tracker along with default Bootstrap and Tiki CSS, etc. No JavaScript is used for this simple timeline (so no eye candy such as animations).
Minimal CSS (function only, no styling)
It's best if it isn't necessary to override a library's CSS, to reinstate a theme's styling.
Can be both vertical and horizontal
This is probably too much to hope for, but it'd be cool if the same code could be used for horizontal and vertical timelines, maybe with just a switch or class difference.
Amenable to use with tracker wiki templates and list templates
Of course the timeline needs to be able to display data from trackers via the list plugin or pretty tracker type of method, as well as with "static" wiki syntax if desired.
Time-period headings inserted automatically
I think what makes something a timeline and not just a list of paragraphs or panels containing info is prominent time information. This might be year headings, or months or whatever is appropriate. A smart script would be able to check the creation time of the information and add appropriate time-period headings. I'm not sure if this exists or not. If not, then a way to have headings is provided via the plugin or docs. (Maybe use the plugin once per time period, following a heading.)
Some timelines use alternating classes on panels that display to the left and right of the timeline axis. To work (easily) with dynamic data, we'd need to use an n+1 pseudo element to apply the alternating properties, or some such arrangement.
One example
"Tik Tok is a simple, mobile-friendly, vertical timeline tool. With just a few lines of JavaScript and some interesting, timely data, Tik Tok creates simple, elegant timelines that can pull data from various spreadsheets and data sources, can include embedded media from sources like YouTube and SoundCloud, and can change styles to fit your design needs. Tik Tok is perfect if you have small, chronological narrative pieces and are working with a design that lends itself to vertical content, which is often the case for existing news sites."
See also ((TimeMap))
! What
{DIV(class="lead")} This project is to add a nice graphical way to represent relevant data in a timeline. The first iteration was added to Tiki in ((Tiki7)) using tracker data and the no-longer-maintained [http://www.simile-widgets.org/timeline/|Timeline Simile widget]. This method has been working but seems to currently have issues. See a (currently broken) example at [https://tiki.org/TikiFest+Timeline|TikiFest Timeline] and docs at [https://doc.tiki.org/PluginTrackerTimeline|PluginTrackerTimeline] . New in Tiki 17, the H5P library includes a horizontal timeline feature; vertical timeline solutions still need to be found. Tiki native solutions are also described below. {DIV}
! Some Previous Research
Added since the earlier 2011 research, here are more ideas and possible libraries. But it seems that H5P for elaborate timelines and Tiki native solutions for simple ones may be the way to go, for horizontal timelines anyway. {sign user="chibaguy" datetime="2017-07-04T06:25:33+00:00"}
Desired features:
* Click/touch and drag parallax-movement time scales (year, month, day, etc.) like Simile's.
Horizontal timelines:
* jQuery.timeline - [https://github.com/ka215/jquery.timeline]
+"You can easily create the horizontal timeline with two types by using this jQuery plugin". The two types are bar type (events are independent) and point type (events are points connected by lines to show relationship). MIT license.
* https://github.com/ilkeryilmaz/timelinejs
+ Has vertical option. MIT license.
* Timeline - [http://timeline.knightlab.com] [https://github.com/NUKnightLab/TimelineJS3|Git page]
+"TimelineJS is an open-source tool that enables anyone to build visually rich, interactive timelines. TimelineJS 3 is a rewrite of the popular Timeline JS software." (Maybe disqualified by Mozilla Public License (MPL), version 2.0.)
Vertical timelines:
* Timeliner [https://github.com/technotarek/timeliner]
Supports both horizontal and vertical
* jQuery-Timelinr [http://www.csslab.cl/2011/08/18/jquery-timelinr/] MIT license.
* Albe timeline [https://github.com/Albejr/jquery-albe-timeline] Unlicense license.
! Some Initial Research ''(jb feb 2011)''
It looks to me like the only real choice is the SIMILE Widgets one, the only other one that i've found from random searching and the links below, is [http://code.google.com/apis/visualization/documentation/gallery/annotatedtimeline.html|the Google one] which uses Flash and doesn't seem to offer as much.
My main reservation about the SIMILE one is that it seems to have jQuery 1.2.6 embedded in it (seemingly in the middle of what looks like a required file) and also has it's own, fairly bulky, AJAX library - which is surely duplication of the one in jQuery. Maybe this is optional - more research needed.
It says in one of the source files: ''"this JS code was written before some recent JS support libraries became widely used or available"'' and it all doesn't seem to have been worked on for several years. Having said that, the code does look like it's written to a very high standard, as you'd expect from MIT (:wink:)
However, as this does seem to be the only option, let's see how far we get...
! Timeline layouts
!! Horizontal Timelines
!!! H5P
[https://h5p.org/timeline|H5P] is integrated in Tiki since v. 17 an the timeline is added in 5 minutes maximum.
After the first import you can create arbitrary timelines and include everywhere in Tiki via a tiny WikiPlugin ~np~{h5p fileID="XYZ"} ~/np~ see also: (doc:(H5P)) (including a quick HowTo and (doc:(PluginH5P)).
There is no interaction with Trackers to fetch data implemented yet, but coders have said this would be likely to coming midterm.
H5P timeline implements Timeline.js (link listed below).
Midterm this will be the future solution when comes to a Tracker based timeline, once we make it able to handle tracker records, etc.. Easy to setup and to use right away already from first versions of Tiki 17 +.
!!! Plugin List
It is possible to use the plugin List to create a timeline using some CSS but no additional JavaScript.
!!!! Horizontal Timeline demo
{include page="Horizontal timeLine using plugin List demo"}
(For technical details, see the source of ((Horizontal timeLine using plugin List demo)) and ((timeline_list_inner_tpl)).)
!! Vertical Timelines
!!! New: Simple vertical timeline
A demo of and documentation for a [https://doc.tiki.org/Simple-vertical-timeline] was added that uses some new CSS and a tracker along with default Bootstrap and Tiki CSS, etc. No JavaScript is used for this simple timeline (so no eye candy such as animations).
(This information was formerly at ((Vertical Timelines)) but is now consolidated here because of similar content.)
May be something like : https://webdesign.tutsplus.com/tutorials/building-a-vertical-timeline-with-css-and-a-touch-of-javascript--cms-26528
!!! Ideal case
* Minimal CSS (function only, no styling)
+ It's best if it isn't necessary to override a library's CSS, to reinstate a theme's styling.
* Can be both vertical and horizontal
+ This is probably too much to hope for, but it'd be cool if the same code could be used for horizontal and vertical timelines, maybe with just a switch or class difference.
* Amenable to use with tracker wiki templates and list templates
+ Of course the timeline needs to be able to display data from trackers via the list plugin or pretty tracker type of method, as well as with "static" wiki syntax if desired.
* Time-period headings inserted automatically
+ I think what makes something a timeline and not just a list of paragraphs or panels containing info is prominent time information. This might be year headings, or months or whatever is appropriate. A smart script would be able to check the creation time of the information and add appropriate time-period headings. I'm not sure if this exists or not. If not, then a way to have headings is provided via the plugin or docs. (Maybe use the plugin once per time period, following a heading.)
* Responsive, etc.
* Compatible license of course
!!! Types
* "Bootstrap" timelines (no additional libs needed)
** https://bootsnipp.com/snippets/featured/timeline-21-with-images-and-responsive
** https://bootsnipp.com/snippets/xGGpM
** https://codepen.io/bsngr/pen/Ifvbi/
* CSS only
* CSS and JavaScript
** http://www.jqueryscript.net/other/Responsive-Timeline-Plugin-With-jQuery-Bootstrap-eeyellow-Timeline.html (This one is a good prospect.)
** http://ryanfitzgerald.github.io/vertical-timeline/index.html (Basic; time info in entries but not as headings.)
** https://webdesign.tutsplus.com/tutorials/building-a-vertical-timeline-with-css-and-a-touch-of-javascript--cms-26528 (Has fancy fade-in motion.)
!!! Other details
Some timelines use alternating classes on panels that display to the left and right of the timeline axis. To work (easily) with dynamic data, we'd need to use an n+1 pseudo element to apply the alternating properties, or some such arrangement.
!!! One example
"Tik Tok is a simple, mobile-friendly, vertical timeline tool. With just a few lines of JavaScript and some interesting, timely data, Tik Tok creates simple, elegant timelines that can pull data from various spreadsheets and data sources, can include embedded media from sources like YouTube and SoundCloud, and can change styles to fit your design needs. Tik Tok is perfect if you have small, chronological narrative pieces and are working with a design that lends itself to vertical content, which is often the case for existing news sites."
From https://source.opennews.org/articles/beautiful-timelines-easy-way-tik-tok
http://datanews.github.io/tik-tok/examples/example-csv.html
!!! Vertical timeline demo using List plugin and no additional JavaScript
''Work under way''
!! Related links
* https://www.egloo.ca/products/netify/roadmap
* https://codyhouse.co/demo/vertical-timeline/index.html
* http://www.jqueryrain.com/demo/jquery-timeline-plugin
* https://h5p.org/timeline (Recently added to Tiki 17 - is there a vertical possibility?)
* http://wiki.misgav.org.il/tiki-index.php (horizontal timeline - can it be adapted to vertical?)
* https://www.noupe.com/inspiration/showcases/15-code-snippets-for-timelines-91734.html
https://webdesign.tutsplus.com/tutorials/building-a-vertical-timeline-with-css-and-a-touch-of-javascript--cms-26528
http://freefrontend.com/css-timelines/
* http://okfnlabs.org/blog/2012/12/04/javascript-timeline-libaries-a-review.html
** https://github.com/okfn/timeliner
* http://www.simile-widgets.org/ which has other goodies
* http://drupal.org/project/timeline
* http://www.computus.org/journal/?p=36
* {wish id=2216} entry on wishlist
* ((Project Management))
* [http://doc.tiki.org/PluginTrackerTimeline]
* http://timeline.verite.co/
* [http://timeline.knightlab.com/|TimelineJS]
The following is a list of keywords that should serve as hubs for navigation within the Tiki development and should correspond to documentation keywords.
Each feature in Tiki has a wiki page which regroups all the bugs, requests for enhancements, etc. It is somewhat a form of wiki-based project management. You can also express your interest in a feature by adding it to your profile. You can also try out the Dynamic filter.