All we need is a simple 1x15 image to start things off:
<IMG src="graph.gif" width="1" height="15">
<script> document.write('<img src="poll.gif" width="50" height="15">') </script>
<table border="0" cellpadding="0"> <script> var graphtext=new Array("Jill", "Bob", "Tony") //Graph items var graphvalue=new Array("60", "45", "95") //Graph values (in percentage, so 70=70%) var barlength=200 for (i=0;i<graphtext.length;i++) document.write ('<tr><td>'+graphtext[i]+' </td><td><img src="graph.gif" width="'+graphvalue[i]/100*barlength+'" height="15"></td></tr>')</script> </table>
The secret here is the code:
This makes the width of the graph dynamic and based on the data supplied by the user. Basically each width is derived by dividing the input value by 100 to get its percentage equivalent, then multiplied by the baseline bar image length.