Using PHP and CSS to make a simple graph

Sharing is caring!

Here’s a simple route to showcase a straightforward rate chart utilizing Php to function out the rates and do the maths and Css to showcase the information on our page.

To start with you have to duplicate the Css beneath into the head of your page, you can style this to suit your requirements once we have the Php set up to render our diagram.

.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
}

Download