create horizontal bar chart - php

Question

I want to make a horizontal bar chart in a web-page using php,mysql,javascript,css,html and 'wamp server',editor: 'Macromedia Dreamweaver',browser: 'Mozilla Firefox';
i want to read data(semister results) from table,and display data through bar chart like,
Database name exam
Table name 'sem_result' contain following columns>> regno[Primary key], uid, reg_date, exam_date, sem, result;
php code is::
<?php
// Connect to server
$cn=mysql_connect("localhost", "root", "");
//Connect to Database
mysql_select_db("exam") or die(mysql_error());
//sql query
$sql="SELECT result FROM sem_result WHERE uid=11111";
//collect results
$result=mysql_query($sql,$cn);
//read data if found
$counter=0;
while($rd=mysql_fetch_array($result))
{
$sem_result[$counter]=$rd[0]; //save sem results into array
$counter=$counter+1;
}
//display
echo "<table>
<tr>
<td>sem1</td>
<td width='100px'>
<img src='img/menu_back.png' width='".$sem_result[0]."%' height='15px'/>
</td>
<td>".$sem_result[0]."%</td>
</tr>
<tr>
<td>sem2</td>
<td width='100px'>
<img src='img/menu_back.png' width='".$sem_result[1]."%' height='15px'/>
</td>
<td>".$sem_result[1]."</td>
</tr>
</table>";
//close database
mysql_close($cn);
?>
if results are 78.95%,78.10% ,bar chart shows both result are equal, i.e 78%; image width become 78%,not 78.95% please help to fix this problem.

Answer 1

change table name and column name and progress.png image.
after that use it.
`
<?php $s="select count(*) as tnum from leakage";
$r=mysql_query($s) or die (mysql_error());
while($rw=mysql_fetch_array($r))
{
echo $tno=$rw['tnum'];
}
?>
<table class="table table-hover">
<thead>
<tr>
<th>DEPARTMENT</th>
<th>No.Of Leakage</th>
</tr>
</thead>
<?php
$sql1="select dept,count(dept) as total from leakage where dept='winding'";
$result1=mysql_query($sql1) or die(mysql_error());
while($row=mysql_fetch_array($result1))
{
$dept=$row['dept'];
$tot=$row['total'];
}
?>
<tr>
<td><?php echo $dept; ?></td>
<td width="100%"><img src="assets/images/progress.png" width="<?php echo (($tot/$tno)*100);?>" height="20px"><?php echo $tot;?>%</td>
</tr>
<?php
$sql2="select dept,count(dept) as total from leakage where dept='spining'";
$result2=mysql_query($sql2) or die(mysql_error());
while($row=mysql_fetch_array($result2))
{
$dept=$row['dept'];
$tot=$row['total'];
}
?>
<tr>
<td><?php echo $dept; ?></td>
<td width="100%"><img src="assets/images/progress.png" width="<?php echo (($tot/$tno)*100);?>" height="20px"><?php echo $tot;?>%</td>
</tr>
<?php
$sql5="select count(dept) as total from leakage";
$result5=mysql_query($sql5) or die(mysql_error());
while($row=mysql_fetch_array($result5))
{
$tot=$row['total'];
}
?>
<tr>
<td>Total</td>
<td width="100%"><img src="assets/images/progress.png" width="<?php echo $tot;?>" height="20px"><?php echo $tot; ?></td>
</tr>
</table>
`

Answer 2

As #hakre already pointed out, you can't get any more precise than a single pixel or percentage, ie you can't have 78.5px or 78.5%... however, you still have some options without javascript. First, I'm not sure why you are using an image for the green bar, why not just pure html/css? Either way, here's my suggestion:
Get the total width of the bar graph, from 0 - 100, in pixels. Just by eyeballing the image you posted, I'm gonna call it 325px:
$total_width = '325';
Then, set each bar's width as such:
$bar_width = round($total_width * ($sem_result[0] / 100));
This way, a stored value of 78.10% will end up as 254px, and 78.95% will be 257px. It is still not the exact percentage, but it is closer. The longer the total width of your graph, the more precise you calculation will be.