Using PHP and CSS to make a simple graph

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>
';

This entry was posted in CSS, Downloads, PHP, Tutorials and tagged CSS, Graph, PHP, Voting. Bookmark the permalink.