I guess I can't leave well enough alone, but once i saw the css graphs on this page http://apples-to-oranges.com/goodies/css-for-bar-graphs/, I had to figure out a way to use them. Have a look by clicking the graph icon, then mouse over the bars and labels. Then, starting loading in different colors and watch the graph grow. (removal is shown in help guide).
The thing to realize is that this is by no means a static graph. It is always accurate to the states and numbers of items in the select box (even if you add or remove items).
Granted, it took some time even beyond that demo to get the css to work. I had to deal with max-height, and list-style-type, and it took some time to wire the logic into this chart, but the results are enjoyable. The demo here is relatively positioned, but you can tell this graph and even the dropdown (or a mix) to be absolute, and it will coast over the text instead of pushing it aside. I have it relative for the demo.
The way I have this written, and with the options I added, you can use any labels and build up to 5 states, which hopefully is plenty. You can use any colors too, but the css demo uses background-position for the colors, so you will need to update a very small image. I will be building a skinning set so you can simply choose your color theme and away you go -that is not there yet.
The graphs are the default css colors and image from the site, but they are configurable, and the labels are no longer built into the image.
The Rich (Typefaces) Get Richer
1 week ago