Web Timeline Graphics

queeg has asked for the wisdom of the Perl Monks concerning the following question:

I have a need to generate graphic timelines on a web page.

Each time line will cover one month and have from one to 12 events, each event ranging from about 8 hours up to 12 days (no overlaps.) Each event will be represented by a bar that spans from the start time to the stop time. Clicking on an event's bar will pop up a window with details about that event.

I've been poking around cpan and haven't found a module that does the whole package. Right now the idea in my head is to use GD to create the bars and CSS to position them.

I have looked at Graph::Timeline::GD, but I suspect that turning one large graphic into a lot of clickable targets may be harder than what I'm thinking of so far.

I'd love to hear any suggestions you have for modules/approaches that may make the process easier.

Thanks,

Queeg

Comment on Web Timeline Graphics

Replies are listed 'Best First'.
Re: Web Timeline Graphics by clinton (Priest) on Mar 28, 2006 at 08:24 UTC
For clickable bar graphs, it may be easier to do it all in CSS and javascript. To spend your server time generating graphs (which I'm assuming the user might be able to change, which would require REgenerating the graph) seems a waste when you can offload the generation to the user's browser. On top of that, you would have to figure out the image map to apply to the graph so that it becomes clickable. No - HTML/CSS/javascript is the way to go here. If you are developing for a closed user group and you know that they will be using Firefox/Mozilla/Opera/Safari, you could use the CANVAS tag which is designed specifically for this purpose. clint	[reply]
Re: Web Timeline Graphics by jhourcle (Prior) on Mar 28, 2006 at 08:50 UTC
When I've done similar things, as the whole thing was HTML, rather than generating the bars on the fly, I just had a few bars of each color, and then placed them on the page, giving them a specific width, and an appropriate alt tag (so you'd get a text graph if you looked in lynx ... this was quite some time ago). Working this way, you just have to iterate through the events, with the following: `printf( '<img src='img/empty.gif' width='%i' height='10' alt='%s'><a h +ref='%s'><img src='img/%s.gif' width='%i' height='10' alt='%s'></a>', $delay_to_next_event / $image_scaling_factor, ' ' x ( $delay_to_next_event / $text_scaling_factor ), $url_to_event_details, $filename_possibly_based_on_event_type, $duration_of_event / $image_scaling_factor, '*' x ( $duration_of_event / $text_scaling_factor ), );` [download] It's rather crude, but it works ... and it worked with what's now 10 year old technology. Oh -- and generating imagemaps dynamically isn't too hard -- you just generate a client size image map -- loop through the events, and define a rectangle ... of course, you need to get their position relative to the edge, which takes a little bit of extra math, but no more difficult than keeping track of the time between events	[reply] [d/l]