JavaScript Diagram Builder - The Pixel object

The Pixel object is used to display a pixel on the screen, especially to draw it in a diagram area. In order to find the appropriate screen position of a pixel, the diagram functions ScreenX, ScreenY, RealX and RealY can be used. It is also possible, to move, hide and delete a pixel after it has been drawn. Take care not to draw too many pixels, because this will slow down your webpage.
This diagram was generated by

<SCRIPT Language="JavaScript">
function MyXScale(xx)
{ var vv=Math.round(xx*4/Math.PI);
  if (vv==0) return(0);
  if (vv==4) return("<img src=\"pi.gif\">");
  if (vv==8) return("2 <img src=\"pi.gif\">");
  if (vv%2==0) return(eval(vv/2)+"/2 <img src=\"pi.gif\">");
  return(vv+"/4 <img src=\"pi.gif\">");
}
document.open();
var D=new Diagram();
D.SetFrame(80, 160, 540, 460);
D.SetBorder(0, eval(2*Math.PI), -1, 1);
D.SetText("", "", "<B>some functions</B>");
D.XGridDelta=Math.PI/4;
D.XScale="function MyXScale";
D.YGridDelta=0.2;
D.YSubGrids=2;
D.SetGridColor("#FFFFFF", "#EEEEEE");
D.Draw("#DDDDDD", "#000000", false);
var i, j, x;
for (i=80; i<=540; i++)
{ x = D.RealX(i);
  j= D.ScreenY(Math.sin(x));
  new Pixel(i, j, "#FF0000");
  j= D.ScreenY(Math.cos(x));
  new Pixel(i, j, "#0000FF");
}
new Bar(560, 200, 680, 220, "#0000FF", "f(x)=cos(x)", "#FFFFFF");
new Bar(560, 260, 680, 280, "#FF0000", "f(x)=sin(x)", "#000000");
document.close();
</SCRIPT>

You can use the following methods:

« The Dot object The Line object »