Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Graphics, Flash and Multimedia _ Help with building a dynamic timeline system

Posted by: 0nRust Feb 27 2019, 05:10 PM

Hello there! I’m currently working on a project and I think I’ve bitten off more than I can chew. I need someone to point me in the right direction so I can tackle it.

Simply put, the project involves making a modular and customizable timeline tool on my website. A user can either choose from pre-set options listed at the bottom of the page, or enter their own information to display a result.

This image is a rough mockup of what I want the finished product to look like: (sorry for huge images)
IPB Image

This is what I must figure out, and I’m not sure where to begin:

I need to build a function that draws (maybe graphs is a better term) a bar which corresponds to chronological data entered into a box. There will be 2 boxes for entering data, one for a start year (A) and one for an end year (Z) and a button next to these boxes that, when pressed, will display a bar on a horizontal “sub-timeline” (beneath the main timeline). The vertical positions of these sub-timelines are naturally dynamic, but their horizontal positions and values must remain fixed so they always align with the timeline’s accompanying year marks.

2) I need to figure out how to make the positions of the years as they appear on the timeline to match up to specific pre-set coordinates on the webpage. So for example, if I want a chronological era to begin at 1700 (where my timeline begins) I’ll need to ensure it lands at the area coordinates (5, y*) (*this value depends on the vertical position of the sub-timeline itself). This is compounded by the fact that the positions of these sub-timelines (one on top of the other) are subject to change at the user’s discretion

3) Finally, I need to figure out how to make a database that holds pre-set information which a user can choose to display or not. Example: one of the listed options might be, say WW2 or the Cold War. So, when a user clicks on the listed option to display this period, the program must access this already known information in the database, and from that automatically plot an accompanying bar.

IPB Image

Here is an image of my proof of concept. The graphics displayed are images and not HTML. I do not want to use HTML to generate the background graphics, because that would make things way more complex than I want them to be. For now I think I can get away with just using .png files to be the background graph template. In essence, the backgrounds are static; hence the only “moving” parts are the generated bars and to an extent the modular sub-timelines which should be able to move up or down.

So if anyone can give me some direction, I’d greatly appreciate it. I’m a clever enough guy, but this seems daunting enough to discourage me. I’ll provide more information if needed.

Thank you.

Posted by: Christian J Feb 27 2019, 07:03 PM

Not sure I understood everything, but one way to create the horizontal bars might be with solid color images or HTML elements that are stretched with CSS. If the dimensions of the background graph paper image is known, you can calculate the number of pixels required for each year. The actual calculations might be done with javascript, communications with the database might be done with Ajax.