pmbennett.net

Step 1: The Markup

I started with a simple ordered list, which contained the text values which would represent the height of each bar on the chart. there are wrapped in a span which we will require in order to style this correctly in the CSS.

<div id="chart">
<ol>
	<li id="green_bar">450</li>
	<li id="yellow_bar">600</li>
	<li id="red_bar">300</li>
</ol>
</div>

Step 2: The CSS

I then used some background images to create the graph and the 3D bars. The CSS specifies how high each bar should be and adds the background images. (This can be quite tricky as it requires a little bit of arithmetic to ensure that the bar is the correct height and the scales are consistent).

#chart {
	background: #FFF url('../images/chart_bg.png') no-repeat 0 0;
	width: 636px;
	height: 420px;
}
#chart ol {
	margin: 0;
	padding: 0;
	list-style-type: none;
	position: relative;
	height: 420px;
	width: 636px;
	overflow: hidden;
}
#chart ol li {
	text-indent: -9999em;
	width: 140px;
	position: absolute;
	bottom: 0;
	background-repeat: no-repeat;
	background-position: -140px 0;
	background-color: transparent;
	padding: 38px 0 0 0;
}
#green_bar {
	height: 150px;
	background-image: url('../images/green_bar_top.png');
	left: 80px;
}
#green_bar span {
	background: transparent url('../images/green_bar.png') no-repeat left bottom;
	display: block;
	height: 150px;
}
#yellow_bar {
	height: 200px;
	background-image: url('../images/yellow_bar_top.png');
	left: 260px;
}
#yellow_bar span {
	background: transparent url('../images/yellow_bar.png') no-repeat left bottom;
	display: block;
	height: 200px;
}
#red_bar {
	height: 100px;
	background-image: url('../images/red_bar_top.png');
	left: 440px;
}
#red_bar span {
	background: transparent url('../images/red_bar.png') no-repeat left bottom;
	display: block;
	height: 100px;
}

Step 3: Adding some jQuery animation

At this point we have a fairly nice looking three dimensional graph using only CSS and some markup: now to add the animation! All we need to do is position the bars below the x-axis using jQuery, and then add the animation that will slide them in. It’s pretty simple, but looks pretty nice. It does have it’s drawbacks, as the height of the highest bar needs to be known so that the chart background image can be created. Any dynamic graphs that are created on-the-fly will be difficult to create, but for one-off static graphs, this is a neat little effect.

$(function() {
  // hide the bars to begin with
	$('#chart ol li').each(function() {
		$(this).css({'bottom': '-' + $(this).height() + 'px'});
		$(this).css({'background-position': '0 0'});
	});
  // animate the bars position to show on the graph
	$('<p>Show_results</p>').click(function() {
		$('#chart ol li').each(function() {
			$(this)
			.css({'background-position': '-140px 0'})
			.animate({
				bottom: '0px'
			}, 500);
		});
		return false;
	}).appendTo('body');
});

Tagged as

1. CSS
2. jQuery
3. XHTML

Subscribe to the RSS feed