Papermashup

Subscribe


Tweets


"@KBedders @elerichardson I'm Free!!!!!! Call / Whatsapp me!!!"

@ashleyford 2 weeks ago

"@KBedders moomin!"

@ashleyford 3 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

Using PHP and CSS to make a simple graph

AshleyAshley

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

demodemo

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!