JavaScript Diagram Builder - Dynamic example

x-min: x-max: y-min: y-max:
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
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">;
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");

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);
    { 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);
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.

« Static Example Iframe Example »