line_object.html
Delivered as text/html
[ hide source ] | [ make this the default ]
File Contents
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JavaScript Diagram Builder - The Line object</title>
<link rel=stylesheet type="text/css" href="diagram.css" />
<SCRIPT Language="JavaScript">if ((document.layers)&&(history.length==1)) location.href=location.href+"#";</SCRIPT>
<SCRIPT Language="JavaScript" src="diagram.js"></SCRIPT>
</head>
<body>
<DIV STYLE="position:absolute; top:0px"></DIV>
<TABLE NOBORDER CELLPADDING=2 CELLSPACING=2 WIDTH=720><TR><TD>
<H3>JavaScript Diagram Builder - The Line object</H3>
</TD></TR><TR><TD>
The Line object is used to display a line on the screen, especially to draw it in a diagram area. It is
possible to hide, move and delete a line after it has been drawn. Unlike in older versions, the images
o_rrggbb.gif are no longer required to draw Line objects.
</TD></TR></TABLE>
<SCRIPT Language="JavaScript">
function Fahrenheit(vv){ return("<nobr>"+Math.round(vv*18+320)/10+"° F</nobr>"); }
document.open();
var D=new Diagram();
D.SetFrame(80, 160, 520, 360);
D.SetBorder(6, 18, 20, 30);
D.SetText("","", "temperature measured during the day");
D.XScale=" h";
D.YScale="° C";
D.SetGridColor("#cccccc");
D.Draw("#FFEECC", "#663300", false);
var t, T0, T1;
D.GetYGrid();
_BFont="font-family:Verdana;font-size:10pt;line-height:13pt;";
for (t=D.YGrid[0]; t<=D.YGrid[2]; t+=D.YGrid[1])
new Bar(D.right+6, D.ScreenY(t)-8, D.right+6, D.ScreenY(t)+8, "", Fahrenheit(t), "#663300");
T1=22;
for (t=6; t<18; t++)
{ T0=T1;
T1=23-4*Math.cos(t/4)+Math.random();
new Line(D.ScreenX(t), D.ScreenY(T0), D.ScreenX(t+1), D.ScreenY(T1), "#cc9966", 2, "temperature");
}
document.close();
</SCRIPT>
<DIV STYLE="position:absolute; top:390px">
<B>This diagram was generated by</B><BR /><BR />
<SCRIPT Language="JavaScript"><BR />
function Fahrenheit(vv){ return("<nobr>"+Math.round(vv*18+320)/10+"° F</nobr>"); }<BR />
document.open();<BR />
var D=new Diagram();<BR />
D.SetFrame(80, 160, 520, 360);<BR />
D.SetBorder(6, 18, 20, 30);<BR />
D.SetText("","", "temperature measured during the day");<BR />
D.XScale=" h";<BR />
D.YScale="° C";<BR />
D.SetGridColor("#cccccc");<BR />
D.Draw("#FFEECC", "#663300", false);<BR />
var t, T0, T1;<BR />
D.GetYGrid();<BR />
_BFont="font-family:Verdana;font-size:10pt;line-height:13pt;";<BR />
for (t=D.YGrid[0]; t<=D.YGrid[2]; t+=D.YGrid[1])<BR />
new Bar(D.right+6, D.ScreenY(t)-8, D.right+6, D.ScreenY(t)+8, "", Fahrenheit(t), "#663300");<BR />
T1=22;<BR />
for (t=6; t<18; t++)<BR />
{ T0=T1;<BR />
T1=23-4*Math.cos(t/4)+Math.random();<BR />
new Line(D.ScreenX(t), D.ScreenY(T0), D.ScreenX(t+1), D.ScreenY(T1), "#cc9966", 2, "temperature");<BR />
}<BR />
document.close();<BR />
</SCRIPT>
<BR /><BR />
<B>You can use the following methods:</B>
<UL>
<LI><B>var L = new Line(theX0, theY0, theX1, theY1, theColor[, theSize[, theTooltipText[,<BR />
theOnClickAction [, theOnMouseoverAction[, theOnMouseoutAction]]]]])</B>
//Constructor and Display</LI>
<LI><B>L.SetColor(theColor)</B> //Color</LI>
<LI><B>L.SetVisibility(isVisible)</B> //Show or Hide</LI>
<LI><B>L.SetTitle(theTitle)</B> //TooltipText</LI>
<LI><B>L.MoveTo(theLeft, theTop)</B> //Move</LI>
<LI><B>L.ResizeTo(theX0, theY0, theX1, theY1)</B> //Resize</LI>
<LI><B>L.Delete()</B> //Delete DIV object of L from the document</LI>
<LI><B>delete L</B> //Destructor</LI>
</UL><BR />
<BR />
<TABLE NOBORDER CELLPADDING=2 CELLSPACING=2 WIDTH=720><TR>
<TD ALIGN=LEFT><A HREF="pixel_object.html">« The Pixel object</A></TD>
<TD ALIGN=RIGHT><A HREF="area_object.html">The Area object »</A></TD>
</TR></TABLE>
</DIV>
</body>
</html>
