HTML and CSS Reference
In-Depth Information
Create An Animated Bar Graph With HTML, CSS
And jQuery
BY DEREK MACK
❧
People in boardrooms across the world love a good graph. They go nuts for PowerPoint, bullet
points and phrases like “run it up the flagpole,” “blue-sky thinking” and “low-hanging fruit,” and
everything is always “moving forward.” Backwards is not an option for people who
facilitate
paradigm shifts in the zeitgeist
.
Graphs of financial projections, quarterly sales figures and
1
market saturation are a middle-manager's dream.
How can we as Web designers get in on all of this hot graph action? There are actually quite a
few ways to display graphs on the Web. We could simply create an image and nail it to a Web
page. But that's not very accessible or interesting. We could use Flash, which is quite good for
displaying graphs—but again, not very accessible. Besides, designers, developers and
deities
are falling out of love with Flash. Technologies such as HTML5 can do many of the
2
same things without the need for a plug-in. The new HTML5
<canvas>
element could even be
adapted to the task. Plenty of charting tools are online that we might use. But what if we
wanted something a little more tailored?
There are pros and cons to the wide range of resources available to us, but this tutorial will not
explore them all. Instead, we'll create our graph using a
progressively enhanced
sprinkling of
3
CSS3 and jQuery. Because we can.
