Pure CSS line graphs
2009-03-24 00:34:36
Opened: 2783 times
Once I've seen a blog post about CSS line graphs, which suggested to build such drawings from tons of HTML, some CSS and a special background image that contained line segments of every possible gradients, and should be cleverly positioned to connect those segments to each other, and then hide the glitches at the joins using flecks of the same color. As it's using an image for the hardest part, I wouldn't consider it a pure CSS line graph. But is there a way to achieve the same effect without images? Definitely yes!
As you may know, there's no way to draw a nice oblique line with using only CSS2. You can create horizontal or vertical lines using divs and borders (and then use the to build oblique lines with Bresenham's algorithm), but a much more simple solution exists, which utilizes less HTML elements and gives a cleaner result: overlapped div borders.
There's a trick to draw polygons in CSS (and therefore in JavaScript) without images or canvas, which is based on how browsers handle thick borders when they're joint with transparent borders at corners of an element. Mostly it was used in JavaScript 3D rendering attempts before <canvas> has been introduced.
So we can draw triangles in CSS, and there's always an oblique line at every edge of a triangle, so the only thing we have to do to create lines is hiding the unnecessary parts of our triangles. The following code snippet shows how to style the borders of a div which we'll use as the base of our lines:
div.line
{
height: 0px;
width: 0px;
border-right-style: solid;
border-right-color: #b00000;
border-bottom-style: solid;
border-bottom-color: transparent;
border-top-style: solid;
border-top-color: transparent;
}Likewise we will have to style the divs to hide the unnecessary parts, e.g. using the graph's background color as border color, and position those divs over the line-divs, something like this:
Of course the gray triangles have to be in the color of the background.
The size of the triangles and the gradients of the line segments can be controlled by setting the proper width ratio between right and top (or bottom) borders, according to the data that the graph is going to represent.
Glitches at the joins of line segments should be covered with flecks in the same color as the line, like in this demonstration, shouldn't they? I think, no.
Although, it's a smart way to do something with pure CSS which is not intended to be done with CSS (nor with HTML), I don't think that this way of graph-drawing would be easier or more accessible, nor more search-engine friendly than simply putting a well-known <table> into the HTML code and placing a static image of the graph (e.g. drawn with using PHPlot) next to it. (Or replacing the table by the image from JS. Or hiding the table from CSS with negative left margin value, and showing only the image itself, perhaps as a background, or whatever clever solution comes to your mind, when you want to show just the visualized data on the screen, not the data itself.) So, it was an interesting problem to play with, but I stopped working on it when I realized that there's no point to use such trickery in a real life situation, especially because we like line graphs for they help us compare different values, and drawing multiple lines on the same graph is very hard with both mine, and the above linked solution. And finally, using CSS border-based polygons is much more funny when in 3D rendering than simple 2D data visualization. :-)
Tags: css html line graphs
2009-03-28 06:23:11
example bár a túróért angol, leizzadtam mire végignyálaztam :D