Apples to Oranges has info on making bar graphs and charts with CSS, a technique I experimented with ages ago in my popular series of CSS Experiments in the experiments with creating Backgrounds, Bar Charts, and Graphs with CSS techniques.
The technique isn’t very difficult. The background of a container is set to repeat for the width or length of that container. For example, to create a stripe effect using this graphic of two colors next to each other , we would just set the background to that graphic:
<div style="background:URL(2tone.gif) repeat"></div>
Depending upon the height and the width of the container, the graphic would then repeat and fill the space creating a stripe effect as shown below.
<div style="background:URL(2tone.gif) repeat; height: 10px; width: 100px"></div>
Unfortunately, it doesn’t work so easily that way. Since the container is empty, we need to “fill” it with a non-visual space or nothing will appear since there is nothing to “stretch” the container. Unfortunately, if we used an HTML character entity as the filler like the ampersand ( ^amp;), the container for the background image takes on the characteristics of what the space would normally look like in a sentence, reflecting the font-size, leading and kerning. We need to find another space filler instead of a character code in order to specifically control the size of the container.
To represent the filler space of the empty container, you can use HTML comments in place of the “space” such as
<div style="background: URL(something.gif) repeat"><!--comment --></div>
This eliminates the leading and kerning restrictions and the container would then reflect only the sizes set by the height and width such as
<div style=" height: 50px; width: 10px; background: URL(something.gif) repeat"><!--comment --></div>.
Floating more than one container with the repeating patterns inside next to one another creates the chart effect. It can create not only interesting bar charts and graphs but also fun backgrounds with stripes and patterns. You can use solid colors or graphics which repeat. This creates novel backgrounds with alternating colors or you can use the effect to create an interesting graphic that moves the content around in a stair step look.
To create space around several different sized repeating background graphics or colors, you need to add margins and/or padding to make each element appear in its own column or row.
<div style=" height: 50px; width: 10px; padding: 5px; background: URL(something.gif) repeat"><!--comment --></div>.
The space between the repeating graphic elements is controlled by the space around the graphic within the graphic image. For example, I used repeating graphics of a blue globe-like balls to create a chart representative of travel statistics. The single graphic image used has ample white space around the globe to give the illusion of spacing between the visual representation of the histogram numbers. The same technique can work for boats, cats, dogs, fish, or whatever small graphic you would like to use to represent the subjects of the chart.
Another example I created used a long thin graphic of a green color that fades off to white, which creates a faded gradient. Repeated horizontally or vertically to create a box, it looks like the color is fading into nothing against a white background. You can also use one color fading in a gradient to another color, not just white.
This technique is really effective for backgrounds in boxes, sidebars, columns, and overall backgrounds. The actual size of the background image is tiny. In the example of the green fading background shown, the graphic is only 809 bytes compared to a static graphic as the fixed background image which might be 25,000 bytes. Using the repeating background graphic, I can have the content or the width (or height) vary and the background will continue to fill in, no matter what the size of the container, creating a versatile background pattern that stretches with the layout.
You can find more similar designs and experiments from my CSS Experiments like these experiments with CSS Backgrounds, Bar Charts, and Graphs. and also more explanations and examples from Web Page Design for Designers: Drawing with CSS. Experiment with these yourself and see what fun designs and charts you can create.