Drawing a line by coordinates

[jay25]

I am trying to create a little browser based program to evaluate performance. I put asterisks inside divs and absolutely positioned them inside another div. That makes it look like a chart. What I would like to do is connect those asterisks with lines for it to be more clear. Can it be done?

<div id=&quot;graphics&quot; style=&quot;position:relative;width:800;height:500;&quot;>
<script language=&quot;JavaScript&quot;>
var xpos = 40;
var code = '<div style=&quot;position:absolute;left:0;top:500;color:green;&quot;>0</div><div style=&quot;position:absolute;left:0;top:400;color:green;&quot;>100</div><div style=&quot;position:absolute;left:0;top:300;color:green;&quot;>200</div><div style=&quot;position:absolute;left:0;top:200;color:green;&quot;>300</div><div style=&quot;position:absolute;left:0;top:100;color:green;&quot;>400</div><div style=&quot;position:absolute;left:0;top:0;color:green;&quot;>500</div>';
function graph()	{
for (i=0;i<weeks;i++)	{
if (document.f1[i].value != 0)	{
var ypos = 500 - document.f1[i].value;
code += '<div style=&quot;position:absolute;left:' + xpos + ';top:' + ypos + ';color:red;font-size:20px;font-style:bold;&quot;>*</div>';
xpos += 20;
}
}
graphics.innerHTML = code;
}
</script>
</div>

 

[SashiRaveendran]

you could use a 1px * 1px black gif to act as a stretchable line. You can absolutely position the gif and set its width to 1px and its height (the 'Height' style property) to the 'y pos of axis - y postion of the asterisk'. The x postion (or the 'Left' style property) would be the same as the asterisk left position.