The diagram displays the function which you type into the input field in the specified
x and y interval.
You can use the standard operators
+ - * / ( )
the constants of the JavaScript Math object
E LN2 LN10 LOG2E LOG10E PI SQRT1_2 SQRT2
and the functions of the Math object
abs acos asin atan ceil cos exp floor log max min pow random round
sin sqrt tan
to define a function.
When the page is loaded, first a new diagram object and new pixel objects are created:
<SCRIPT Language="JavaScript">
document.open();
var D=new Diagram();
D.SetFrame(60, 175, 635, 500);
D.SetBorder(-1, 1, -1, 1);
D.SetText("x","y", "y=f(x)");
D.SetGridColor("#808080", "#CCCCCC");
D.Draw("#DDDDDD", "#000000", true, "");
var i, j, x, y;
j= D.ScreenY(0);
P=new Array(636);
for (i=60; i<=635; i++)
P[i]=new Pixel(i, j, "#0000FF");
document.close();
</SCRIPT>
After you click the "Draw" button, the properties of the already existing objects are changed,
to display the new function:
<SCRIPT Language="JavaScript">
function Draw()
{ // ... some code was cutted here
D.SetBorder(xmin, xmax, ymin, ymax);
D.SetText("x", "y", "y="+document.inputform.fx.value);
D.SetGridColor("#808080", "#CCCCCC");
D.Draw("#DDDDDD", "#000000", true, "y="+document.inputform.fx.value);
var isEvalSafe=(window.EvalSafe)&&(EvalSafe("1+1")==2);
for (i=60; i<=635; i++)
{ x = D.RealX(i);
if (isEvalSafe)
{ y=EvalSafe(document.inputform.fx.value);
if (isNaN(parseInt(y)))
{ alert(document.inputform.fx.value+" can not be evaluated for x="+x);
return;
}
}
else
{ with (Math) y=eval(document.inputform.fx.value);
}
if ((ymin<=y)&&(y<=ymax)) P[i].MoveTo(i, D.ScreenY(y));
else P[i].SetVisibility(false);
}
}
</SCRIPT>
The above example will only work correctly with IE 5.x or Netscape 6.x. However, instead of dynamically changing
the properties of the objects you can use two frames - the first for the input and the second for the diagram.
After clicking the "Draw" button the first frame writes the parameters to variables in the parent window and reloads
the second frame (use location.href=url, not history.go(0)!), which reads the variables from the parent window and
draws the diagram and function corresponding to the parameters.
This will work with all browsers.