JavaScript Diagram Builder - The Diagram object
|
The Diagram object provides the possibility, to draw a diagram at a defined position with a defined size on the
window document. The appropriate scale will be drawn automatically, corresponding to the specified xmin, xmax, ymin
and ymax values. The diagram provides - also when not drawn - some useful functions which can be used to transform
screen positions into real world positions and vice versa.
|
This diagram was generated by
<SCRIPT Language="JavaScript">
document.open();
var D=new Diagram();
D.SetFrame(80, 160, 420, 360);
D.SetBorder(10, 50, 0, 4);
D.SetText("X-Label","Y-Label", "Title");
D.Draw("#80FF80", "#0000FF", true, "Click on me !", "DiagramClick()");
document.close();
function DiagramClick()
{ alert("Use your own function here.");
}
</SCRIPT>
You can use the following methods:
- var D = new Diagram() //Constructor
- D.SetFrame(theLeft, theTop, theRight, theBottom) //Screen
- D.SetBorder(theLeftX, theRightX, theBottomY, theTopY) //World
- D.SetText(theScaleX, theScaleY, theTitle) //Labels
- D.ScreenX(theRealX) //Coordinate transformation world->screen
- D.ScreenY(theRealY) //Coordinate transformation world->screen
- D.RealX(theScreenX) //Coordinate transformation screen->world
- D.RealY(theScreenY) //Coordinate transformation screen->world
- D.Draw(theDrawColor, theTextColor, isScaleText[, theTooltipText[, theAction]]) //Display
- D.SetVisibility(isVisible) //Show or Hide
- D.SetTitle(theTitle) //TooltipText
- D.Delete() //Delete DIV object of D from the document
- delete D //Destructor
Before drawing, you can set the following properties:
- D.XScale // 0 = no scale; 1 = numeric (default); 2, 3, ... = date/time
- D.YScale // 0 = no scale; 1 = numeric (default); 2, 3, ... = date/time