1

I'd like to create a timeline of sorts. The following attached picture: enter image description here

Shows what I am trying to visualize. I'd like a timeline that takes as input events with start and stop times. If the event is of one type, the line is colored one color, another if it is another specific event.

For example:

starttime  |  event
-----------------------
8AM        |   cold
11AM       |   hot
12:30PM    |   cold
1PM        |   hot
1:45PM     |   cold
4PM        |   hot

What is the exact name if this visualization technique? And where can I find/create one dynamically on a webpage? I looked briefly at d3 but I did not see anything initially that allowed for such a visualization outside of a hybrid bar-graph. I also thought about gnu plot but unsure how to turn the bars on their side and repeat patterns as event come up.

WildBill
  • 9,143
  • 15
  • 63
  • 87

2 Answers2

1

Well, you could always use SVG or canvas if you don't care about IE8. These come with a pretty steep learning curve, but the results are hard to argue with.

Coincidentally, you can accomplish this with the web trinity of HTML, JavaScript, and CSS. Just have one div per segment of data, specify either a fixed with or percentage on each, and manage with JavaScript. Once again, you'll have to get your hands "nerdy" here, but it can be done. The implementation is a bit beyond the scope of a quick stack overflow answer however.

I've also used a few jQuery graphing plugins, but I'm not sure any of them fit your specific use case.

Joe Mills
  • 1,619
  • 11
  • 12
  • 1
    Use raphael.js if you *do* care about Internet Explorer. It creates SVG, or, old IE's own equivalent as needed, works in IE6+. Handy for controlling your SVG elements too. Also has a graphing plugin, gRaphael, which can give you horizontal stacked bars like this almost out of the box. D3.js (another SVG controller) has *loads* of awesome visualisation features if you don't care about IE. – user56reinstatemonica8 Dec 15 '12 at 22:06
1

One pre-HTML5 solution is a bunch of divs put side by side, with a gradient or image (with repeat-x) background. Your vertical lines can be divs as well. Simple, cross-browser, can be on the server but requires some manual implementation.

e.g., http://alignedleft.com/tutorials/d3/drawing-divs/

Or maybe something like this:

http://trickyscripter.com/examples/after/jsgraphics_e.htm

full.stack.ex
  • 1,747
  • 2
  • 11
  • 13
  • Both of these were great answers. SVG was just a touch easier. Thanks for the links and the help! :) – WildBill Dec 12 '12 at 01:07
  • Thanks. SVG/canvas are obviously more flexible. Beware of some platform limitations, though, e.g., http://stackoverflow.com/a/3890330/1665128 – full.stack.ex Dec 12 '12 at 09:33