Integrate Timeline using Javascript
Most of our users are happy to use the markup created in our simple authoring tool to publish their timeline. However, if you want to substantially customize the visual presentation of your timeline, or integrate it with other parts of your page, you will need to understand some more technical details.
There are three key things you need to include on your page to embed a timeline:
- A
link
tag loading the Timeline CSS. - A
script
tag loading the Timeline javascript. - A second
script
tag which creates a Timeline.
- a
link
tag for custom fonts. - a
link
tag to override some of TimelineJS's CSS. - Javascript code to read configuration data from a Google Spreadsheet.
<!-- 1 --> <link title="timeline-styles" rel="stylesheet" href="https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css"> <!-- 2 --> <script src="https://cdn.knightlab.com/libs/timeline3/latest/js/timeline.js"></script> <div id='timeline-embed' style="width: 100%; height: 600px"></div> <!-- 3 --> <script type="text/javascript"> // The TL.Timeline constructor takes at least two arguments: // the id of the Timeline container (no '#'), and // the URL to your JSON data file or Google spreadsheet. // the id must refer to an element "above" this code, // and the element must have CSS styling to give it width and height // optionally, a third argument with configuration options can be passed. // See below for more about options. timeline = new TL.Timeline('timeline-embed', 'https://docs.google.com/spreadsheets/d/1cWqQBZCkX9GpzFtxCWHoqFXCHg-ylTVUWlnrdYMzKUI/pubhtml'); </script>
Creating your own JSON
If you are retrieving JSON from a URL, you can simply use that URL as the second argument, just as if you are loading data from a Google spreadsheet. If instead you have something in your page which will put the data together, you can also pass a JSON object as the second argument.
Create the JSON according to our specifications and then change step 3 to look like this.
<!-- 3 --> <script type="text/javascript"> var timeline_json = make_the_json(); // you write this part // two arguments: the id of the Timeline container (no '#') // and the JSON object or an instance of TL.TimelineConfig created from // a suitable JSON object window.timeline = new TL.Timeline('timeline-embed', timeline_json); </script>
Configuring TimelineJS options
TL.Timeline
offers an optional third parameter which you may use to pass in additional TimelineJS options. See our list of available options and configure like the example below.
<script type="text/javascript"> var additionalOptions = { start_at_end: true, default_bg_color: {r:0, g:0, b:0}, timenav_height: 250 } timeline = new TL.Timeline('timeline-embed', 'https://docs.google.com/spreadsheets/d/1cWqQBZCkX9GpzFtxCWHoqFXCHg-ylTVUWlnrdYMzKUI/pubhtml', additionalOptions); </script>
Using custom fonts
Timeline offers several pre-selected font sets. When you use our simple tool, the fonts get included for you, but if you're using the methods on this page, you'll have to load them yourself.
To include them, use markup like this, a variation on step 1 above.
<!-- 1 --> <link title="timeline-styles" rel="stylesheet" href="https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css"> <link title="timeline-styles" rel="stylesheet" href="https://cdn.knightlab.com/libs/timeline3/latest/css/fonts/font.abril-droidsans.css">
Of course, you'll change font.abril-droidsans.css
according to which fonts you choose. Here are all the values which you might use there:
- font.abril-droidsans.css
- font.amatic-andika.css
- font.bevan-pontanosans.css
- font.bitter-raleway.css
- font.clicker-garamond.css
- font.dancing-ledger.css
- font.default.css
- font.fjalla-average.css
- font.georgia-helvetica.css
- font.knightlab.css
- font.lustria-lato.css
- font.medula-lato.css
- font.oldstandard.css
- font.opensans-gentiumbook.css
- font.playfair-faunaone.css
- font.playfair.css
- font.pt.css
- font.roboto-megrim.css
- font.rufina-sintony.css
- font.ubuntu.css
- font.unicaone-vollkorn.css
You can download a model copy of a typical font CSS file from our CDN. You may want to put it through a CSS formatter before you start to edit it. If you are familiar with LESS, you may prefer to work from our LESS files on GitHub.