How to Create Bar Graphs With CSS

Sometimes it is important to present data in the graph form so that it will be easy for visitors to analyze the progress with a single look. The web designers and developer who have good grip on CSS basics can understand rather easily.

With the help of CSS we can create bar graphs that are used to present data in a nutshell. You have seen these graphs on many sports and traffic reports websites. In this tutorial we are presenting three kind of bar graphs basic, complex and vertical bar graphs. You can make amendments as your design require.

Basic Bar Graph

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<style>
.graph {
position: relative; /* IE is dumb */
width: 200px;
border: 1px solid #B1D632;
padding: 2px;
}
.graph .bar {
display: block;
position: relative;
background: #B1D632;
text-align: center;
color: #333;
height: 2em;
line-height: 2em;
}
.graph .bar span { position: absolute; left: 1em; }
</style>
<div>
<strong style="width: 24%;">24%</strong>
</div>

Complex Bar Graph

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<style>
dl {
margin: 0;
padding: 0;
}
dt {
position: relative; /* IE is dumb */
clear: both;
display: block;
float: left;
width: 104px;
height: 20px;
line-height: 20px;
margin-right: 17px;
font-size: .75em;
text-align: right;
}
dd {
position: relative; /* IE is dumb */
display: block;
float: left;
width: 197px;
height: 20px;
margin: 0 0 15px;
background: url("g_colorbar.jpg");
}
* html dd { float: none; }
/* IE is dumb; Quick IE hack, apply favorite filter methods for
wider browser compatibility */

dd div {
position: relative;
background: url("g_colorbar2.jpg");
height: 20px;
width: 75%;
text-align:right;
}
dd div strong {
position: absolute;
right: -5px;
top: -2px;
display: block;
background: url("g_marker.gif");
height: 24px;
width: 9px;
text-align: left;
text-indent: -9999px;
overflow: hidden;
}
</style>
<dl>
<dt>Love Life</dt>
<dd>
<div style="width:25%;"><strong>25%</strong></div>
</dd>
<dt>Education</dt>
<dd>
<div style="width:55%;"><strong>55%</strong></div>
</dd>
<dt>War Craft 3 Rank</dt>
<dd>
<div style="width:75%;"><strong>75%</strong></div>
</dd>
</dl>

Vertical Bar Graph

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<style>
#vertgraph {
width: 378px;
height: 207px;
position: relative;
background: url("g_backbar.gif") no-repeat;
}
#vertgraph ul {
width: 378px;
height: 207px;
margin: 0;
padding: 0;
}
#vertgraph ul li {
position: absolute;
width: 28px;
height: 160px;
bottom: 34px;
padding: 0 !important;
margin: 0 !important;
background: url("g_colorbar3.jpg") no-repeat !important;
text-align: center;
font-weight: bold;
color: white;
line-height: 2.5em;
}

#vertgraph li.critical { left: 24px; background-position: 0px bottom !important; }
#vertgraph li.high { left: 101px; background-position: -28px bottom !important; }
#vertgraph li.medium { left: 176px; background-position: -56px bottom !important; }
#vertgraph li.low { left: 251px; background-position: -84px bottom !important; }
#vertgraph li.info { left: 327px; background-position: -112px bottom !important; }
</style>
<div id="vertgraph">
<ul>
<li class="critical" style="height: 150px;">22</li>
<li class="high" style="height: 80px;">7</li>
<li class="medium" style="height: 50px;">3</li>
<li class="low" style="height: 90px;">8</li>
<li class="info" style="height: 40px;">2</li>
</ul>
</div>
<style>
    #vertgraph {
        width: 378px;
        height: 207px;
        position: relative;
        background: url("g_backbar.gif") no-repeat;
    }
    #vertgraph ul {
        width: 378px;
        height: 207px;
        margin: 0;
        padding: 0;
    }
    #vertgraph ul li {
        position: absolute;
        width: 28px;
        height: 160px;
        bottom: 34px;
        padding: 0 !important;
        margin: 0 !important;
        background: url("g_colorbar3.jpg") no-repeat !important;
        text-align: center;
        font-weight: bold;
        color: white;
        line-height: 2.5em;
    }

    #vertgraph li.critical { left: 24px; background-position: 0px bottom !important; }
    #vertgraph li.high { left: 101px; background-position: -28px bottom !important; }
    #vertgraph li.medium { left: 176px; background-position: -56px bottom !important; }
    #vertgraph li.low { left: 251px; background-position: -84px bottom !important; }
    #vertgraph li.info { left: 327px; background-position: -112px bottom !important; }
</style>
<div id="vertgraph">
    <ul>
        <li class="critical" style="height: 150px;">22</li>
        <li class="high" style="height: 80px;">7</li>
        <li class="medium" style="height: 50px;">3</li>
        <li class="low" style="height: 90px;">8</li>
        <li class="info" style="height: 40px;">2</li>
    </ul>
</div>


Related posts

No Response

Post your response

Copyright © 2010 - 2014 Handy CSS Designed By Anotix, Powered By WordPress, all right reserved.