Skip to main content

Using a Quarter Interval with the Simile Timeline

·1 min

The Simile Timeline allows you to make beautiful, interactive timelines for web pages using only JavaScript. It is fairly flexible and allows you to create timelines with intervals of Seconds, Hours and Days right up to Centuries and Millenniums.

However, it does not support Quarters, which is what I needed. So I have submitted a patch to the project, and have also been using the following code so I can use Quarters now without needing to patch my local install.

The code is not the most elegant, as it duplicates a lot of the code from the library, but until my patch gets incorporated it is the only way to have Quarters.

To use it, download the js file and include it in your web page after the timeline files. You can then use a Quarter in the same way as you would any interval, as shown below:

Timeline.createBandInfo({
    ...
    intervalUnit:   Timeline.DateTime.QUARTER,
    ...
});

You can find the code on GitHub.