Use your left/right keys to browse tutorials
Using PHP and CSS to make a simple graph

Using PHP and CSS to make a simple graph

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on January 28, 2009

phpgraph

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. Here’s the demo.

First you need to copy the CSS below into the head of your page, you can style this to suit your needs once we have the PHP in place to render our graph.

.clear{
clear:both;}

.graphcont {
padding-top:10px;
color:#000;
font-weight:700;
float:left
}

.graph {
float:left;
margin-top:10px;
background-color:#cecece;
position:relative;
width:280px;
padding:0
}

.graph .bar {
display:block;
position:relative;
background-image:url(images/bargraph.gif);
background-position:right center;
background-repeat:repeat-x;
border-right:#538e02 1px solid;
text-align:center;
color:#fff;
height:25px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:1.9em
}

.graph .bar span {
position:absolute;
left:1em
}

I used this graph on a project that required users to rate a video. They could give the video a plus or a minus rating, the values are then converted into percentages, the plus percentage is then put into the CSS width of the div, creating the bar graph, in my previous project I had two graphs to represent how many plus votes and how many minus votes were cast, this is just a simple example of how to create a dynamic graph with PHP.


$plus = 138;
$minus = 59;

$totalnumber = $plus + $minus;

$pluspercent = round(($plus / $totalnumber) * 100);
$minuspercent = round(($minus / $totalnumber) * 100);

$total = round($plus + $minus);
$totalVotes += $total;



     echo '<div class="rating"><div class="graphcont">The average rating of '.$pluspercent.'% is based on '.$totalVotes.' votes<div class="graph"><strong class="bar" style="width:'.$pluspercent.'%;">'.$pluspercent.'%</strong></div></div>



  </div>

<div class="clear"></div>
';

demodemo



More tutorials from Papermashup
Comments
22 discussions around Using PHP and CSS to make a simple graph
Newer Comments
  1. Pingback: Are you want to create CSS Bar Graphs and Star Rater?

  2. Paul Bremer says:

    I used this method in my school project, you can see it @ http://bit.ly/11Aa8s

  3. Pingback: tripwire magazine | tripwire magazine

  4. Pingback: 50+ Essential Techniques and Tools for Visualizing your Data | tripwire magazine

  5. Pingback: 16 Usable CSS Graph and Bar Chart Tutorials and Techniques - Code Index

  6. AzeriFire says:

    Bookmarked! Thank you!

  7. Pingback: 16 Usable CSS Graph and Bar Chart Tutorials and Techniques « All things beautiful

  8. Pingback: 16 Usable CSS Graph and Bar Chart Tutorials and Techniques | guidesigner.com

  9. Pingback: CSSでさくっと作れるグラフいろいろ - IDEA*IDEA ~ 百式管理人のライフハックブログ ~

  10. Pingback: 126 Usable CSS Graph and Bar Chart Tutorials and Techniques : Speckyboy - Web Design, Web Development and Graphic Design Resources

Newer Comments




Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.
Subscribe
OR

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.
Subscribe

Get in contact

Please use the form below to get in contact. If your question is related to a free script download, please use the comments on the article page as community members are more likely to respond quicker than I can personally.

About Me

I'm Ashley Ford, Co-founder and Technical Director at Harkable.com London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.



What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on Papermashup.com please get in touch via the contact link below for advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.