创建水平条形图

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

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.