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. Click on an article to see it's style, hoverStyle and activeStyle objects in the box below the timeline.

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 on individual articles.

An article's hoverStyle and activeStyle always inherit options from the normal style. However, some options will need to be set in more than one style in order to override the system defaultHoverStyle and defaultActiveStyle (shown in the Timeline options).

Note: An option to clear the system default styles on startup is coming soon, but for now you can achieve this after initialisation with, for example: 

// clear system defaultActiveStyle
myTimeline.options.article.defaultActiveStyle = {}

// set new defaultActiveStyle
myTimeline.setOption("article.defaultActiveStyle", myActiveStyle)

 

style

Select an article in the timeline to see its style here

hoverStyle

Select an article in the timeline to see its style here

activeStyle

Select an article in the timeline to see its style here

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:
					
				

			

			

		


		

	

	

		

			

				

					

						
HistropediaJS

						
					

					

						
Histropedia Main Site

						
					

					

						
ShowCase Timelines

						
					

				

				

				
			

		

	

	

		
© 2020 Histropedia Ltd.