Papermashup

Subscribe


Tweets


"@piccadillyline currently at Wood Green. drivers one of the best in keeping us updated, the lines slow but we are moving."

@ashleyford 2 weeks ago

"Thumbs up to the driver of the @piccadillyline train I'm currently on at Bounds Green keeping us all updated about the signal failure 👍🏼 😃"

@ashleyford 2 weeks ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Papermashup

Using PHP and CSS to make a simple graph

A simple PHP and CSS percentage chart showing how to calculate percentages

AshleyAshley

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 '
The average rating of '.$pluspercent.'% is based on '.$totalVotes.' votes
'.$pluspercent.'%
';

demo

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 22
  • shree
    Posted on

    shree shree

    Reply Author

    very nice script, thanks


  • ancajasjp
    Posted on

    ancajasjp ancajasjp

    Reply Author

    finally found it! thanks for this code really appreciate it :))


  • boris
    Posted on

    boris boris

    Reply Author

    thanks dude, i know the post is old but this piece of code is exactly what i was looking for! such simplicity and such a perfect result!


  • Brandon Goodin
    Posted on

    Brandon Goodin Brandon Goodin

    Reply Author

    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!


  • Paul Bremer
    Posted on

    Paul Bremer Paul Bremer

    Reply Author

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


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @paul thanks for letting me know you used it in your project! looking good, glad you found it useful :)


  • AzeriFire
    Posted on

    AzeriFire AzeriFire

    Reply Author

    Bookmarked! Thank you!