JavaScript Diagram Builder - Relative Position

By including the diagram code between <div style='position:relative; top:0px; height:220px'> and </div> you can put a diagram to a relative position in a web page also without using of iframes (for instance after text 1 and before text 2). The values for the vertical positions of the diagram objects are with regard to the covering div. Instead of height:220px you should use the height, which is required by the diagram. In this way diagrams can be inserted directly between text blocks of a web page. Test it by altering the width of your window and see how the diagram moves and does not overlap with the text. This method does not work with the old browser Netscape 4.7, which however is almost no more used.

This diagram was generated by
<div style='position:relative; top:0px; height:220px'>
<SCRIPT Language="JavaScript">
var D=new Diagram();
D.SetFrame(70, 30, 380, 200);
D.SetBorder(10, 50, 0, 4);
for (var i=15; i<50; i+=5)
  new Bar(D.ScreenX(i)-10, D.ScreenY(i%3+1), D.ScreenX(i)+10, D.ScreenY(0), "#00cccc");

« Dynamic Example Logarithmic Scale Example »