Examples

The examples below demonstrate some of the built in features and options. More examples coming soon covering other parts of the system, but don't hesitate to contact us if you would like anything specific added.


Article Styling Example

The timeline below shows a gallery of custom article styles. You can click on an article to see it's style and activeStyle objects in the boxes below.

HistropediaJS Article Style Objects can be used in the Timeline Options to create a default style for all articles on a timeline, and/or in the Article Options for setting styles for individual articles.

An article's activeStyle always inherits options set in the normal style. However, you may need to set some options in both styles in order to override the system defaultActiveStyle (shown in the Timeline options).

Note: An option to clear the system defaultActiveStyle on startup is coming soon, but for now you can acheive this after initialisation with:
myTimeline.options.article.defaultActiveStyle = { } //clear defaultActiveStyle
myTimeline.setOption( "article.defaultActiveStyle", { my active style options } ) //set new defaultActiveStyle

 

style:


      

activeStyle:


      

Events and Handlers Example

Interact with the timeline to see events firing in the boxes below. Each event shows the method used to attach a handler function, and an example output using the data. The event data is also logged in the console.

The events currently built in to the options are shown below. It's very easy to set up custom events for any other part of the system as required (e.g. on drag, zoom, article star etc). Don't hesitate to get in touch if you need any help with this.

 

Article events

Add handler in Timeline Options using this option:

onArticleDoubleClick: function(article) { ... }

Example output below uses article.data.title and article.data.from.year :


      

Zoom change event

Add handler after intialising a timeline by calling the this method from its variable name :

.timescaleManager.addZoomChangedHandler( function() { ... } )

You can access the current zoom and date range data in the timescaleManager object ('this' inside the zoomChanged handler). The example output below uses this.zoom to print the current zoom level:


      

Save event

Add handler in Timeline Options using this option:

onSave: function(state) { code ... }

Output of current timeline state at the instant of the last change, including start date, zoom level and currently loaded article ids with screen positions. The example output below shows JSON.stringify(state):


    

Performance Example

Enter the desired number of events, choose whether to include images, then click the "Load timeline" button to create a test timeline.

The dropdown menus above the timeline allow you to experiment with the Timeline Options which have the largest impact on performance.

For best performance, use the following settings:

Number of Events: Include images? 
Event density:
Stacking range:
Move animation:
Fade animation: