JavaScript Diagram Builder - Dynamic example

x-min: x-max: y-min: y-max:
y=
This 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:

document.open();
var D=new Diagram();
D.SetFrame(60, 175, 635, 500);
D.SetBorder(0, 1, 0, 1);
D.SetText("x","y", "y=f(x)");
D.Draw("#DDDDDD", "#000000", true, "");
var i, j, x;
P=new Array(636);
for (i=60; i<=635; i++)
{ x = D.RealX(i);
  j= D.ScreenY(0);
  P[i]=new Pixel(i, j, "#0000FF");
}
document.close();

After you click the "Draw" button, the properties of the already existing objects are changed, to display the new function:

function Draw()
{ // ... some code was cutted here
  D.SetBorder(xmin, xmax, ymin, ymax);
  D.Draw("#DDDDDD", "#000000", true, "y="+document.input.fx.value);
  for (i=60; i<=635; i++)
  { x = D.RealX(i);
    try
    { with (Math) j=eval(document.input.fx.value);
    }
    catch(error)
    { alert(document.input.fx.value+" can not be evaluated for x="+x);
      return;
    }
    if ((ymin<=j)&&(j<=ymax)) P[i].MoveTo(i, D.ScreenY(j));
    else P[i].SetVisibility(false);
  }
}

« Static Example Download