If you just want to dive in, you can probably copy from one of our examples (like the one about Whitney Houston). Otherwise, complete documentation is below.
After you have worked out how to create JSON data for a Timeline, you'll also need to put it on the page.
The TimelineJS JSON format consists of a single JSON object with the following properties:
cosmological. If no scale is specified, the default is
cosmologicalscale is required to handle dates in the very distant past or future. (Before Tuesday, April 20th, 271,821 BCE after Saturday, September 13 275,760 CE) For the
cosmologicalscale, only the year is considered, but it's OK to have a
cosmologicaltimeline with years between 271,821 BCE and 275,760 CE.
Slide objects are JSON objects with the following properties:
groupto be in the same row or adjacent rows, separate from events in other groups. The common value for the group will be shown as a label at the left edge of the navigation.
url: the fully-qualified URL pointing to an image which will be used as the background
color: a CSS color, in hexadecimal (e.g.
#0f9bd1) or a valid CSS color keyword.
false). Defaults to
true, which means that Timeline will scan text fields and automatically add
<a>tags so that links and email addresses are "clickable." If set to false, you may still manually apply the tags in the appropriate fields when you want links. Autolinking applies to the
textfield in a
textobject and the
creditfields in a
hash_bookmarkoption is used, and can also be used with the
timeline.goToId()method to programmatically move the timeline to a specific slide.
Era objects are JSON objects which are used to label a span of time on the timeline navigation component. In structure, they are essentially very restricted "slide" objects.
Date objects are JSON objects with the following properties:
Text objects are JSON objects with the following properties. For each slide, text objects are optional.
Media objects are JSON objects with the following properties. For each slide, media objects are optional.
titleslides, because they do not have a marker.