16 Usable CSS Graph and Bar Chart Tutorials and Techniques

February 4, 2009 - 45 Comments
CSS, Frameworks

16 Usable CSS Graph and Bar Chart Tutorials and Techniques

Have you ever even tried to create your own CSS graph? If you have, you will know how hard it is. Using Flash is one way to go, but you just can’t beat a beautifully crafted CSS Graph. Have a look at these tutorials and techniques.

PHP and CSS- A Simple Graph

Usable CSS Graph Tutorials and Techniques Link : PHP and CSS- A Simple Graph.
Tagline : Here’s an easy way to display a simple percentage graph using PHP to work out the percentages and do the maths and CSS to display the data on our page.
Demo : View the demo.

Vertical Bar Graphs using CSS and PHP

Usable CSS Graph Tutorials and Techniques

Link : Vertical Bar Graphs using CSS and PHP.
Tagline : Who wants to use Excel to make a new graph each week? Using CSS and PHP you can create attractive bar graphs that are always up to date.
Demo : View the demo.

CSS For Bar Graphs

Usable CSS Graph Tutorials and Techniques Link : CSS For Bar Graphs.
Tagline : The concept is simple, utilize the percentage width abilities of CSS to accurately portray a percentage bar graph.
Demo : View the demo.

Real World Bar Graphs (with some CSS)

Usable CSS Graph Tutorials and Techniques Link : Real World Bar Graphs (with some CSS).
Tagline : We could’ve just gone with an “easy way” out and used existing component to produce the full graph images backend and just append to the page. However, this was opposing our goal of doing it neat and lightweight.
Demo : View the demo.

SAC – Simple accessible Charts

Usable CSS Graph Tutorials and Techniques Link : SAC – Simple accessible Charts.
Tagline : Easy, fast and accessible way to display simple Data and beautify them with CSS. It needed some time and a little bit wired thinking, but It works.
Demo : View the demo.

An accessible bar chart

Usable CSS Graph Tutorials and Techniques Link : An accessible bar chart.
Tagline : A bar is created using an image which is stretched to the appropriate size,bar widths are calculated relative to the largest value, value cells have a repeated background image which shows the vertical lines.
Demo : View the demo.

The Standards Way to Do Dynamic Data

Usable CSS Graph Tutorials and Techniques Link : The Standards Way to Do Dynamic Data.
Tagline : By using a standardized set of web technologies, it is possible to produce interesting data visualizations that degrade gracefully in the face of browser inferiority. Through careful semantic crafting of our XHTML containers, clever use of CSS, and a splash JavaScript, we can build data visualizations that enhance our message and communicate better to our users.
Demo : View the demo.

Pure CSS Data Chart

Usable CSS Graph Tutorials and Techniques Link : Pure CSS Data Chart.
Tagline : We could say that a chart is a two dimensional object. So, the best structural and semantical choice is definition list. Why? Well, for starter, it is a list of items. Although the list is linear, we could interpret definition titles (dt elements) as items on x axis and definition descriptions (dd elements) as values on y axis.
Demo : View the demo.

Line Graph

Usable CSS Graph Tutorials and Techniques Link : Line Graph.
Tagline : This is a purely DHTML/ CSS based Line Graph script. It loads fast and blends in with the rest of the page. You can even use a transparent background for it.
Demo : View the demo.

Pure CSS/HTML Bullet Graph

Usable CSS Graph Tutorials and Techniques Link : Pure CSS/HTML Bullet Graph.
Demo : View the demo.

Simple CSS Bar Graph

Usable CSS Graph Tutorials and Techniques Link : Simple CSS Bar Graph.
Tagline : Here is a nice and simple way to create a basic horizontal bar graph utilizing very basic CSS: Perfect for illustrating statistics, donations, or anything else you can think of.
Demo : View the demo.

Creating a graph using percentage background

Usable CSS Graph Tutorials and Techniques Link : Creating a graph using percentage background.
Demo : View the demo.

CSS Stacked Bar Graphs

Usable CSS Graph Tutorials and Techniques Link : CSS Stacked Bar Graphs.
Demo : View the demo.

CSS Vertical Bar Graphs

Usable CSS Graph Tutorials and Techniques Link : CSS Vertical Bar Graphs.
Tagline : Here is a fairly typical vertical bar graph showing a hypothetical set of quarterly data for, say, invoice and collection totals. The difference here is that the whole thing is a simple table and a few divs. Really.
Demo : View the demo.

Super simple CSS bars

Usable CSS Graph Tutorials and Techniques Link : Super simple CSS bars.
Demo : View the demo.

CSS absolute positioning scatter plot

Usable CSS Graph Tutorials and Techniques Link : CSS absolute positioning scatter plot.
Tagline : This graph is going to use CSS absolute positioning to draw the scatter plot on the page with no external graphics at all. Not only is the chart better (it iss clickable, has popups, it can be scaled), its also smaller and prettier.
Demo : View the demo.

You might also like…

7 Free CSS Editors, Which Is the Best? You Choose »
20 Very Useful CSS3 Tutorials »

Subscribe via RSS or Follow us on Twitter

Share This Post

There are 12 Comments › Leave your comment

Timothy
4 Feb, 2009

Nice list. Should come in handy. thanks

Reply
cssProdigy
4 Feb, 2009

CSS is awesome!

Reply
Designer
4 Feb, 2009

wow.. very useful stuff

Reply
Clay McIlrath
4 Feb, 2009

Wow, i wish more people would use these web development techniques rather than oversized javascript or flash for a simple graph!

Reply
Tiger
4 Feb, 2009

nice…

what about google chart?

http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250×100&chl=Hello|World

Reply
Pepa
4 Feb, 2009

If you want to see sliding bar graph, fed by Ajax (real time ping data), please visit http://swatelier.info/at/articles/ajaxPing.asp
There are some other bar graphs useful for intranet: production plan, process down time, silo filling etc.

Reply
letouregg
16 Feb, 2009

very cool stuff, but lemme give my 10 cents. hard to change peoples’ mindsets. they used to excel etc and they wanna stick to it. maybe something more eye-catching could do, like add audio to the graphs, make them mobile -slowly, of course. now that would catch peoples’ attention. but hey, a good concept all the same. great works no doubt.

Reply
VideoStripPokerSupreme
27 Feb, 2009

thanks a lot!

Reply
Jamp Mark
4 Mar, 2009

nice css graphs. going to replace image based graphs with one of these. wish me luck.

Reply
cssbakery.com
28 Sep, 2009

Nice site and post.

I have tinkered with CSS based graphs myself. My goal was to keep them as flexible as possible by allowing the user to determine the size of the graph along with other aspects of the graph.

For vertical CSS bar graphs, check out this article that describes both the method and results.

For a horizontal CSS graph tutorial, please see.

Thanks!

Reply
Mehedi Hasan
23 Oct, 2009

WOW!!!! Great Collection…. Thanks for sharing :)

Reply
Eric Di Bari
29 Jan, 2010

Great list. I was initially going ot use the gd library in php to draw the graphs. CSS is much easier, thanks.

Reply