To design the stats feature of Backbone, our Ruby on Rails CMS, we needed to show a stacked bar graph of page views vs unique visitors. I looked around for a sample of how others did stacked bar graphs and came up empty handed. There are plenty of CSS bar graph interpretations, but none of them did stacked bar graphs.
The first thing I do anytime I start HTML/CSS work is code the HTML. It’s a personal preference to make sure it’s all going to look good for screen readers and be as semantic as possible, and since it’s my article we’re going to do the HTML first.
Like Alen Grakalic’s implementation, I used a definition list. I found it to be the most semantic way of presenting data like this. To explain, each day of the week is in a
The first thing we do is reset all the margins and padding to make it look the same on all browsers. Then we define the width and height of our chart in dl#csschart. We’re using a background image to help with the tick marks on the axes and for some background gridlines. One important thing to note is the padding-left. This moves the first bar over past the tick marks on the left of the background image.
Next, we hide the dt tags. There is really no good way to make them do what we want. Position the dd tags to float left and use margins to push them to the correct place in our background image. Now, just to be clear, the dd tags are not our bars, they are simply containers for our bars. They are all 100% of the height of our graph. We use the span tags inside the dd tags to fill in our bars. Since they’re positioned absolute inside our positioned dd tags we can use bottom:0; to place them on the x-axis and have them grow in height from there. We use the b tag to display the actual data value inside the bar.
At the bottom we define the background image for the bars in dl#csschart span (you can easily just make it a background color instead), then we position our .sub bars overtop by giving them a margin-left of -33px (the exact width of the bars).
Finally, we make our 101 classes for each percentage point from 0% to 100% to give our bars their height.
I’ve made a diagram to explain what each tag is doing.
Add the Axes.
Ok now you’ll notice we don’t have labels on our axes. So we use some simple unordered lists. One before the cssChart
and one after the cssChart:
Styling the Axes.
Styling the axes is really just floating the the y-axis left and using some margins to push it in place. Then you can use some margins to push the li tags to line up with the tick marks of your background image.
- Great Highcharts with jQuery
- Cool HTML5 and jQuery Animated pie Chart
- Nice Pure CSS3 experimental charts
- Rare Accessible charts using jQuery and HTML5
- Very Beautiful CSS3 And JQuery progress bar
- Line Graph Effect With Css Only
- Pure CSS3 Pie Charts effect
- MooTools Color Picker
- Multiple jQuery color picker plugin
- jQuery Color Picker
Recommended Web Hosting For Bloggers and Designers
I recoomended Webhostings for Bloggers and Designers because I am freelancer, working with thousand clients in the worlds. Most of them will use those hosts.
- Fast, Reliable, Affordable
- 100% Satisfaction Guarantee
- And More...