JavaScript Diagram Builder - Relative Positionierung

Indem man den Diagramm-Code zwischen <div style='position:relative; top:0px; height:220px'> und </div> einschließt, kann man dem Diagramm auch ohne Verwendung von Iframes eine relative Position innerhalb einer Webseite zuweisen (z. B. nach Text 1 und vor Text 2). Die vertikalen Positionsangaben der Diagramm-Objekte beziehen sich auf das umschließende div. Anstelle von height:220px ist die Höhe anzugeben, welche das Diagramm beansprucht. Diagramme können somit auch im Fließtext dargestellt werden. Testen Sie das, indem Sie die Fensterbreite (und damit die Höhe des Textblocks) verändern und sehen Sie dabei, wie sich das Diagramm mitbewegt und nicht mit dem Text überlappt. Diese Methode funktioniert jedoch nicht mit dem alten Browser Netscape 4.7, welcher jedoch kaum noch verwendet wird.

Dieses Diagramm wurde erzeugt durch:
<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);
D.Draw("#80FF80","#0000FF",false);
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");
</SCRIPT>
</div>

« Iframe Beispiel Logarithmische Skale »