# What would you use for making an Interactive Timeline?

**URL:** https://forum.kirupa.com/t/what-would-you-use-for-making-an-interactive-timeline/653124
**Category:** programming
**Created:** [August 19, 2022, 4:39pm UTC](https://forum.kirupa.com/t/what-would-you-use-for-making-an-interactive-timeline/653124 "2022-08-19T16:39:50Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![VaiFanatic](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/vaifanatic/32/7159_2.png) [@VaiFanatic](https://forum.kirupa.com/u/VaiFanatic)
#### Post date: [August 19, 2022, 4:39pm UTC](https://forum.kirupa.com/t/what-would-you-use-for-making-an-interactive-timeline/653124/1 "2022-08-19T16:39:50Z")

</div>

Say a timeline of events in a legal case for a defense firm; something that’s a “one-pager” where you can get a macro level view of the timeline, but is also easy enough for anyone without any knowledge to operate.  
Embedding of documents and images would be a critical component as well.  
I can imagine whatever solution I come up with being used going forward, so an actual application might be the ultimate goal where you can start off with a baseline.

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [August 19, 2022, 5:07pm UTC](https://forum.kirupa.com/t/what-would-you-use-for-making-an-interactive-timeline/653124/2 "2022-08-19T17:07:24Z")

</div>

This is an interesting one 🙂

How many items do you anticipate appearing at any point on a particular day in the timeline? My guess is that there will be moments when certain days will have LOTs of content that will need to be individually viewed.

---

<div class="post-metadata">

### Author: ![VaiFanatic](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/vaifanatic/32/7159_2.png) [@VaiFanatic](https://forum.kirupa.com/u/VaiFanatic)
#### Post date: [August 19, 2022, 5:12pm UTC](https://forum.kirupa.com/t/what-would-you-use-for-making-an-interactive-timeline/653124/3 "2022-08-19T17:12:44Z")

</div>

Based on the timeline I have so far (photo of a the whiteboard), it’s one item per day, but I can imagine things could get more complex down the road, with about 10 attachments scattered throughout an approximately 1-year time frame.

I’ve used TimelineJS in the past, but I’m not the biggest fan of it (images and documents have to be embedded via URL) and that just further makes things cumbersome. I need to come up with a solution that can be packaged into a single file, ideally. PowerPoint is off the table, as I suggested that and was shot down, hahaha. And for obvious privacy reasons, I don’t want to just host this online and provide a URL.

This is so that way a physical whiteboard doesn’t have to be lugged around to the courthouse.

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [August 19, 2022, 6:50pm UTC](https://forum.kirupa.com/t/what-would-you-use-for-making-an-interactive-timeline/653124/4 "2022-08-19T18:50:37Z")

</div>

If there are 10 items on average over a year, is a timeline actually necessary then? Would a calendar where you filter by year, month, day be adequate?

I was imagining initially something like this before scaling back to something simpler:

 ![](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/5/d/5de29642f01bf1981014b19647b1ff0a13f6c955.png)

---

<div class="post-metadata">

### Author: ![VaiFanatic](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/vaifanatic/32/7159_2.png) [@VaiFanatic](https://forum.kirupa.com/u/VaiFanatic)
#### Post date: [August 19, 2022, 7:31pm UTC](https://forum.kirupa.com/t/what-would-you-use-for-making-an-interactive-timeline/653124/5 "2022-08-19T19:31:49Z")

</div>

Based on the feedback I got from the above example, that’s not quite what they’re looking for ☹

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [August 19, 2022, 7:41pm UTC](https://forum.kirupa.com/t/what-would-you-use-for-making-an-interactive-timeline/653124/6 "2022-08-19T19:41:38Z")

</div>

In this case, can you just ask them to sketch out what they are looking for? This may be one of those situations where they know what they want are looking to you to read their mind haha.

---

<div class="post-metadata">

### Author: ![VaiFanatic](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/vaifanatic/32/7159_2.png) [@VaiFanatic](https://forum.kirupa.com/u/VaiFanatic)
#### Post date: [August 19, 2022, 9:26pm UTC](https://forum.kirupa.com/t/what-would-you-use-for-making-an-interactive-timeline/653124/7 "2022-08-19T21:26:20Z")

</div>

I wish, but getting someone to sit down with me and do just that is impossible! Here’s a close example of an existing tool: [https://timeline.app/](https://timeline.app/)

But now imagine a “preview” section or something similar above to view photographs/documents, and then those documents open in a modal/prompt of some sort. I’d have no problem programming an app specific for this, if I had more time! This is due Monday, on top of everything else pertaining to this case that I’m working.

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [August 19, 2022, 10:58pm UTC](https://forum.kirupa.com/t/what-would-you-use-for-making-an-interactive-timeline/653124/8 "2022-08-19T22:58:00Z")

</div>

A proper timeline tool would probably do virtualization and other perf optimizations to ensure it works properly. For your case, I would just create a really basic one that looks approximately like that with just text elements and a really wide `div`. This `div` can be inside a parent element with a fixed with and the CSS `overflow` property set to show scrollbars.

For the contents, you can have the thumbnails be absolutely positioned in the right place on the timeline. Because they are HTML elements, you can have a click on them launch a modal or do anything else that you think would be needed.

Thoughts on that?

---

<div class="post-metadata">

### Author: ![VaiFanatic](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/vaifanatic/32/7159_2.png) [@VaiFanatic](https://forum.kirupa.com/u/VaiFanatic)
#### Post date: [August 20, 2022, 12:02am UTC](https://forum.kirupa.com/t/what-would-you-use-for-making-an-interactive-timeline/653124/9 "2022-08-20T00:02:18Z")

</div>

I think that would work as a proof of concept, for sure! Then turning it into an application that can be worked on by someone other than me for future cases.
