Create color bars for survey results

Question

In my web application, I would like to display the survey results with colored bars proportional to the percentage of votes. How can I achieve this using HTML / CSS?

Answer 1

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 histograms:

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

Answer 2

Here is a sample 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 graphic bars to get the percentage of the graph.

Answer 3

. , . div ( ). , , 200px "100%" , 23% , .23 * 200 - div.

, . (background-image css property), .

, .

Answer 4

, , . , ...

In HTML5, you can use the canvas element to actually draw your graphic. Using the canvas element can be very complicated, so I won’t describe here in detail how to use it for your specific scenario.

However, here is a simple example (copied from diveintohtml5.info ):

HTML

<canvas id="graph" width="300" height="225"></canvas>

Javascript

var canvas = document.getElementById("graph");
var context = canvas.getContext("2d");
context.fillRect(50, 24, 150, 100);