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>
';
[...] PHP and CSS- A Simple Graph [...]
[...] Using PHP and CSS to make a simple graph | Ashley Ford – PaperMashup.com [...]
[...] PHP and CSS- A Simple Graph [...]
[...] PHP and CSS- A Simple Graph [...]
Bookmarked! Thank you!
[...] PHP and CSS- A Simple Graph [...]
[...] PHP and CSS- A Simple Graph [...]
[...] PHP and CSS- A Simple Graph [...]
I used this method in my school project, you can see it @ http://bit.ly/11Aa8s
@paul thanks for letting me know you used it in your project! looking good, glad you found it useful
[...] is an example of creating a semi-dynamic pie chart without the use of server-side imaging libraries.Simple PHP and CSS Bar Graphs Simple PHP and CSS Bar [...]
[...] PHP and CSS- A Simple Graph [...]
[...] PHP and CSS- A Simple Graph [...]
[...] PHP and CSS- A Simple Graph [...]
I’ve been looking for something like this for the past couple of weeks. Here at work, we’re installing a 42″ tv to display current production reports. This code was exactly what I was looking for. Thank you for sharing!
Leave a comment...
Connect
Latest Poll
Recent Posts