Creating colored bars for poll results

Question

In my web app I'd like to display poll results with colored bars with length proportional to the percentage of votes. How can I achieve this with HTML/CSS?

Answer 1

There's a great article on A List Apart that shows you how to do this.

Answer 2

This site contains some nice examples:

http://apples-to-oranges.com/blog/post/css-for-bar-graphs/?id=55

And here is a collection of 16 different types of bar graphs:

http://speckyboy.com/2009/02/04/16-usable-css-graph-and-bar-chart-tutorials-and-techniques/

Answer 3

This is actually pretty simple to pull off. You want each bar to be represented by a single . Set the div to the width that you want (proportional to the results). For example if you want 200px to be "100%" of the vote, then if an option has 23% of the vote you want .23 * 200 to be the pixel width of the div.

Then set the background color and border to style the bar as you desire. You can also get fancy and use images (background-image css property) to get nicer looking bars.

I hope that points you in the right direction.

Answer 4

Here is some example code:

        <style>
  .GraphWrapper {
   width:300px;
   border:1px solid #DDDDDD;
  }

  .BlueBar {
   height:30px;
   margin:10px 0px 10px 0px;
   background-color:#FFCCCC;
  }

  .RedBar {
   height:30px;
   margin:10px 0px 10px 0px;
   background-color:#CCCCFF;
  }
 </style>

 <div class='GraphWrapper'>
  <div class='BlueBar' style='width:50%;'></div>
  <div class='RedBar' style='width:75%;'></div>
 </div>

You can then edit the width style of your graph bars to achieve the graph percentage.