Graph and intervals

The essence of the task. Given the n-th number of time intervals. For example: 13.20-13.50, 13.10-14.00, etc. The intervals may overlap. It is necessary to display these intervals in the chart with the display of intersections.
My problem is if only 2 intersections then I can represent it. And if more than 2, then I can’t imagine a graph of how it should look like.
If you know how it should look like, then unsubscribe or give a link. I can’t imagine a schedule. Somehow with code.
thanks for the replies.


Answer 1, authority 100%

Each interval is represented by a rectangle in the diagram. Non-overlapping intervals can have the same height and color. If several intervals intersect, then each of them must have its own color and height, so that each of them is distinguishable from the others. Intersections are rendered by selecting the desired color mixing mode (blending mode) and setting the transparency component (alpha). You can roughly imagine how it will look like on the example of the following illustration:

Intersecting Circles

As you can see, there are many circles on the screen and many of them intersect repeatedly, but, nevertheless, the boundaries of each are quite easily distinguishable.

It’s hard to do this in a browser, especially cross-browser. You can try the Raphaeljslibrary, which renders graphics through SVG on those browsers that support it, and through VML in IE, and allows you to set the “opacity” property for geometric objects. In general, complex graphs and charts are usually built on the server, the client is given the finished result in the form of PNG, JPEG, etc. images. There are no restrictions inherent in the browser environment on the server; you can use developed libraries for working with images. For example, ImageMagickwhich has a bunch of bindingsto a wide variety of languages, including PHP.


Answer 2

if we discard the mixing of colors when crossing shapes, then the FLOT library can handle this task – http://code.google.com/p/flot/
there is a well-implemented representation of the x-axis in time format.