CSS Vertical Bar Graphs
12
Categories:
Price:free
#q-graph { position: relative; width: 600px; height:
300px; margin: 1.1em 0 3.5em; padding: 0; background: #DDD url(fade-light.png) repeat-x; border: 2px solid gray; list-style: none; font: 9px Helvetica, Geneva, sans-serif;} #q-graph ul {margin: 0; padding: 0; list-style: none;} #q-graph li {position: absolute; bottom: 0; width: 150px; z-index: 2; margin: 0; padding: 0; text-align: center; list-style: none;} #q-graph li.qtr {height: 298px; padding-top: 2px; border-right: 1px dotted #C4C4C4; color: #AAA;} #q-graph li.bar {width: 60px; border: 1px solid; border-bottom: none; color: #000;} #q-graph li.bar p {margin: 5px 0 0; padding: 0;} #q-graph li.sent {left: 13px; background: #DCA url(fade-dark.png) repeat-x; border-color: #EDC #BA9 #000 #EDC;} #q-graph li.paid {left: 77px; background: #9D9 url(fade-dark.png) repeat-x; border-color: #CDC #9B9 #000 #BFB;} #q-graph #q1 {left: 0;} #q-graph #q2 {left: 150px;} #q-graph #q3 {left: 300px;} #q-graph #q4 {left: 450px; border-right: none;} #q-graph #ticks {width: 600px; height: 300px; z-index: 1;} #q-graph #ticks .tick {position: relative; border-bottom: 1px solid #BBB; width: 600px;} #q-graph #ticks .tick p {position: absolute; left: 100%; top: -0.67em; margin: 0 0 0 0.5em;}
* Q1
&n bsp; o
&n bsp; $18,450.00
&n bsp; o
&n bsp; $16,500.00
* Q2
&n bsp; o
&n bsp; $34,340.72
&n bsp; o
&n bsp; $32,340.72
* Q3
&n bsp; o
&n bsp; $43,145.52
&n bsp; o
&n bsp; $32,225.52
* Q4
&n bsp; o
&n bsp; $18,415.96
&n bsp; o
&n bsp; $32,425.00
*
$50,000
$40,000
$30,000
$20,000
$10,000
Comments
PlaPsaKBJtMh
ukwqzrsnVu
Post new comment