Introduction Diagram v0.2b
+by Nima Mazloumi, and with help of Lutz Tautenhahn +This package extends the templating system of OpenACS by providing another +builder next to the list and form builder. The diagram builder is very similar +to the list builder. Two differences are important though: The multirow to be +used must me defined bofore template::diagram::create is called since the +column names are retrieved dynamically. +
++The diagram builder was developed in a way that it can be extended to use +different engines for the rendering of the diagrams. Currently it is based on +the "Javascript Diagram Builder", v3.3 Lutz Tautenhahn. But other engines +could be integrated in future like GNUPlot. +
+Extending the Diagram Builder
+The rendering is taking place in
+the templates defined under resources/diagram/..
. Currently we support
+the following types: pie, curve and cockpit. You can customize the way they
+render the diagrams by editing the corresponding templates or adding new
+ones. Once a template is created you simply pass its name with the -template
+switch of template::diagram::create.
+
Examples
+You need to run the diagram-create.sql to view the examples
+below. It will create a table with dummy data. You can remove the table again
+using diagram-drop.sql.
A detailed example is given in the API Browser. This page also contains +examples for the three diagram types "pie", "curve" and "cockpit". As you can +see the diagrams are beautifully inserted inside the page flow. Also +CSV-Export is possible. +
+CSVLimitations
+In order to make this builder easier to be extended the Javascript specific +parts have to be removed: +
-
+
- Affected are the procs:
template::diagram::prepare_value, +template::diagram::update_bordersand +template::diagram::set_borderswhich nead a clean up. Maybe +moving these information into the templates would be best. + - Date and Timestamp based values from the database have to be formatted in
+a special way. You must use
to_char(mydate, 'YYYY,MM,DD[,HH24][,MI][,SS]')in +your sql query to return a meaningful value. As you can see some elements are +optional. For details please view theDateandUTC+objects documentation for JavaScript. +
Future Work
+Not everything available in the Javascript Diagram Builder was fully +integrated. There are many other things that could be done in future as well. Here some ideas: +
-
+
- Give support for GNUPlot - a very powerful engine that has support for all +diagram types including world maps... +
- Allow the definition of scales. Currently a developer would need to touch +the Javascript Library to add new scales types +
- Add another package depeding on diagrams and portals and allows the definition of a +repository of monitors and associate them with a role. Thus a given user could +select from a extensible list of diagrams and define a user-specific report +page. This would extend OpenACS towards real business intelligence toolkit for +companies, universities and research labs. It would be important though to +extend diagram to use from a pool of data sources like: databases, tcl +scripts, remove web services... +
- Provide an XoTCL version in order to support different classes of diagrams +and to improve reusablity. +
+JavaScript Diagram Builder - The Area object+ |
| +The Area object is used to display an area chart into the diagram. You can also hide, move and delete it +after it has been drawn. In order to draw the area object you need the images o_rrggbb.gif, d_rrggbb.gif, +p_rrggbb.gif, q_rrggbb.gif and b_rrggbb.gif, which must be in the same directory. Red, blue and black +images are already available. If you want to use other colors, you must first generate the required images. + |
+This diagram was generated by
+<SCRIPT Language="JavaScript">
+document.open();
+var D=new Diagram();
+D.SetFrame(80, 160, 520, 360);
+D.SetBorder(Date.UTC(2000,11,15,0,0,0), Date.UTC(2001,11,15,0,0,0), -300, 1100);
+D.SetText("","", "profit/loss per day during the last year");
+D.XScale=4;
+D.YScale=" $";
+D.Draw("#FFFFCC", "#000000", false);
+var i, t0, t1, P0, P1, base=D.ScreenY(0);
+t1=D.ScreenX(Date.UTC(2000,11,15,0,0,0));
+P1=0;
+for (i=0; i<12; i++)
+{ t0=t1; P0=P1;
+ t1=D.ScreenX(Date.UTC(2001,i,15,0,0,0));
+ P1+=(i/5-Math.random())*100;
+ new Area(t0, D.ScreenY(P0), t1, D.ScreenY(P1), "ff0000", base, "profit/loss per day");
+}
+document.close();
+</SCRIPT> +
+You can use the following methods: +
+
+
+
+
+
\ No newline at end of file
Index: openacs-4/packages/diagram/www/resources/diagram/arrow_object.html
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/diagram/www/resources/diagram/arrow_object.html,v
diff -u -N
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ openacs-4/packages/diagram/www/resources/diagram/arrow_object.html 10 Jan 2006 07:34:16 -0000 1.1
@@ -0,0 +1,71 @@
+
+
+
++<SCRIPT Language="JavaScript">
+document.open();
+var D=new Diagram();
+D.SetFrame(80, 160, 520, 360);
+D.SetBorder(Date.UTC(2000,11,15,0,0,0), Date.UTC(2001,11,15,0,0,0), -300, 1100);
+D.SetText("","", "profit/loss per day during the last year");
+D.XScale=4;
+D.YScale=" $";
+D.Draw("#FFFFCC", "#000000", false);
+var i, t0, t1, P0, P1, base=D.ScreenY(0);
+t1=D.ScreenX(Date.UTC(2000,11,15,0,0,0));
+P1=0;
+for (i=0; i<12; i++)
+{ t0=t1; P0=P1;
+ t1=D.ScreenX(Date.UTC(2001,i,15,0,0,0));
+ P1+=(i/5-Math.random())*100;
+ new Area(t0, D.ScreenY(P0), t1, D.ScreenY(P1), "ff0000", base, "profit/loss per day");
+}
+document.close();
+</SCRIPT> +
+You can use the following methods: +
-
+
- var A = new Area(theX0, theY0, theX1, theY1, theColor, theBase[, theTooltipText[,
+theOnClickAction[, theOnMouseoverAction[, theOnMouseoutAction]]]])
+//Constructor and Display, requires images o_*, d_*, p_* q_* and b_* (*=theColor+".gif")
+ - A.SetColor(theColor) //Color +
- A.SetVisibility(isVisible) //Show or Hide +
- A.SetTitle(theTitle) //TooltipText +
- A.MoveTo(theLeft, theTop) //Move +
- A.ResizeTo(theX0, theY0, theX1, theY1) //Resize +
- A.Delete() //Delete DIV object of A from the document +
- delete A //Destructor +
+
+
| « The Line object | +The Arrow object » | +
+JavaScript Diagram Builder - The Arrow object+ |
| +The Arrow object is used to display an arrow on the screen, especially to draw it in a diagram area. It is +possible to hide, move and delete an arrow after it has been drawn. The Arrow object has a quite large +invisible border, so that it can interfere with the TooltipText and onClick event of neighbouring objects. +Because of that you should always draw the Arrow objects first, before drawing any neighbouring Bar or Box objects. + |
+This arrows were generated by
+<SCRIPT Language="JavaScript">
+document.open();
+var D=new Diagram();
+D.SetFrame(60, 140, 300, 380);
+D.SetBorder(-1, 1, -1, 1);
+var i, x, y;
+for (i=0; i<11; i++)
+{ x=Math.sin((i+0.5)*2*Math.PI/11);
+ y=Math.cos((i+0.5)*2*Math.PI/11);
+ new Arrow(D.ScreenX(x/3), D.ScreenY(y/3), D.ScreenX(x), D.ScreenY(y), "#0000ff", i%5+1);
+}
+document.close();
+</SCRIPT> +
++<SCRIPT Language="JavaScript">
+document.open();
+var D=new Diagram();
+D.SetFrame(60, 140, 300, 380);
+D.SetBorder(-1, 1, -1, 1);
+var i, x, y;
+for (i=0; i<11; i++)
+{ x=Math.sin((i+0.5)*2*Math.PI/11);
+ y=Math.cos((i+0.5)*2*Math.PI/11);
+ new Arrow(D.ScreenX(x/3), D.ScreenY(y/3), D.ScreenX(x), D.ScreenY(y), "#0000ff", i%5+1);
+}
+document.close();
+</SCRIPT> +
+
+You can use the following methods: +
+
+
+
+
+
\ No newline at end of file
Index: openacs-4/packages/diagram/www/resources/diagram/b_000000.gif
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/diagram/www/resources/diagram/b_000000.gif,v
diff -u -N
Binary files differ
Index: openacs-4/packages/diagram/www/resources/diagram/b_0000ff.gif
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/diagram/www/resources/diagram/b_0000ff.gif,v
diff -u -N
Binary files differ
Index: openacs-4/packages/diagram/www/resources/diagram/b_ff0000.gif
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/diagram/www/resources/diagram/b_ff0000.gif,v
diff -u -N
Binary files differ
Index: openacs-4/packages/diagram/www/resources/diagram/bar_object.html
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/diagram/www/resources/diagram/bar_object.html,v
diff -u -N
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ openacs-4/packages/diagram/www/resources/diagram/bar_object.html 10 Jan 2006 07:34:16 -0000 1.1
@@ -0,0 +1,87 @@
+
+
+
++You can use the following methods: +
-
+
- var A = new Arrow(theX0, theY0, theX1, theY1, theColor[, theSize[, theTooltipText[,
+theOnClickAction[, theOnMouseoverAction[, theOnMouseoutAction]]]]]) +//Constructor and Display
+ - A.SetColor(theColor) //Color +
- A.SetVisibility(isVisible) //Show or Hide +
- A.SetTitle(theTitle) //TooltipText +
- A.MoveTo(theLeft, theTop) //Move +
- A.ResizeTo(theX0, theY0, theX1, theY1) //Resize +
- A.Delete() //Delete DIV object of A from the document +
- delete A //Destructor +
+
+
| « The Area object | +The Pie object » | +
+JavaScript Diagram Builder - The Bar object+ |
| +The Bar object is used to display a bar on the screen, especially to draw it in a diagram area. In order to +find the appropriate screen position and size of the bar, the diagram functions ScreenX, ScreenY, RealX and +RealY can be used. It is also possible, to move, resize, hide and delete a bar after it has been drawn. + |
+This diagram was generated by
+<SCRIPT Language="JavaScript">
+document.open();
+var D=new Diagram();
+D.SetFrame(80, 160, 520, 360);
+D.SetBorder(-1, 13, 0, 1000);
+D.SetText("","", "Website Hits 2001");
+D.XScale=0;
+D.Draw("#FFFF80", "#004080", false);
+var i, j, y;
+Month=new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
+for (i=0; i<12; i++)
+{ y=500+Math.random()*400;
+ j=D.ScreenX(i+0.5);
+ if (i%2==0) new Bar(j-15, D.ScreenY(y), j+15, D.ScreenY(0), "#0000FF", Month[i], "#FFFFFF", "Hits per month");
+ else new Bar(j-15, D.ScreenY(y), j+15, D.ScreenY(0), "#FF0000", Month[i], "#000000", "Hits per month");
+}
+document.close();
+</SCRIPT> +
+You can use the following methods: +
+_BFont=theFont;
+_BFont is a global variable, which is valid for all Bar and Box objects. +The default setting is
+_BFont="font-family:Verdana;font-weight:bold;font-size:10pt;line-height:13pt;". +
+
+
+
+
+
\ No newline at end of file
Index: openacs-4/packages/diagram/www/resources/diagram/blank.html
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/diagram/www/resources/diagram/blank.html,v
diff -u -N
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ openacs-4/packages/diagram/www/resources/diagram/blank.html 10 Jan 2006 07:34:16 -0000 1.1
@@ -0,0 +1,6 @@
+
+
+
+
+
+
\ No newline at end of file
Index: openacs-4/packages/diagram/www/resources/diagram/box_object.html
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/diagram/www/resources/diagram/box_object.html,v
diff -u -N
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ openacs-4/packages/diagram/www/resources/diagram/box_object.html 10 Jan 2006 07:34:16 -0000 1.1
@@ -0,0 +1,85 @@
+
+
+
++<SCRIPT Language="JavaScript">
+document.open();
+var D=new Diagram();
+D.SetFrame(80, 160, 520, 360);
+D.SetBorder(-1, 13, 0, 1000);
+D.SetText("","", "Website Hits 2001");
+D.XScale=0;
+D.Draw("#FFFF80", "#004080", false);
+var i, j, y;
+Month=new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
+for (i=0; i<12; i++)
+{ y=500+Math.random()*400;
+ j=D.ScreenX(i+0.5);
+ if (i%2==0) new Bar(j-15, D.ScreenY(y), j+15, D.ScreenY(0), "#0000FF", Month[i], "#FFFFFF", "Hits per month");
+ else new Bar(j-15, D.ScreenY(y), j+15, D.ScreenY(0), "#FF0000", Month[i], "#000000", "Hits per month");
+}
+document.close();
+</SCRIPT> +
+You can use the following methods: +
-
+
- var B = new Bar(theLeft, theTop, theRight, theBottom, theDrawColor, theText, theTextColor
+[, theTooltipText[, theOnClickAction[, theOnMouseoverAction[, theOnMouseoutAction]]]])
+//Constructor and Display, if theText="" then min_height=1 else min_height=12
+//if you want to use B.SetText() later, then you must initialize with a Text<>""
+ - B.SetColor(theColor) //Color +
- B.SetVisibility(isVisible) //Show or Hide +
- B.SetText(theText) //Text or Image +
- B.SetTitle(theTitle) //TooltipText +
- B.MoveTo(theLeft, theTop) //Move +
- B.ResizeTo(theLeft, theTop, theWidth, theHeight) //Resize +
- B.Delete() //Delete DIV object of B from the document +
- delete B //Destructor +
+_BFont=theFont;
+_BFont is a global variable, which is valid for all Bar and Box objects. +The default setting is
+_BFont="font-family:Verdana;font-weight:bold;font-size:10pt;line-height:13pt;". +
+
+
| « The Diagram object | +The Box object » | +
+JavaScript Diagram Builder - The Box object+ |
| +The Box object is similar to the bar object. It has 2 additional properties: BorderWidth and BorderColor. +Bar and box objects can also be used with an image-tag instead of the text. In this way you can display +the objects also in 3D look. For transparent objects (this diagram) use the background color "". + |
+This diagram was generated by
+<SCRIPT Language="JavaScript">
+document.open();
+var D=new Diagram();
+D.SetFrame(80, 160, 520, 360);
+D.SetBorder(Date.UTC(2000,11,15,0,0,0), Date.UTC(2001,11,15,0,0,0), 0, 1000);
+D.SetText("","", "Website Hits 2001");
+D.XScale=4;
+D.Draw("", "#004080", false);
+var i, j, y, y0=D.ScreenY(0);
+for (i=0; i<12; i++)
+{ y=D.ScreenY(500+Math.random()*400);
+ j=D.ScreenX(Date.UTC(2001,i,1,0,0,0));
+ if (i%2==0) new Box(j-12, y, j+12, y0, "#0000FF", "v_blue.gif", "#FFFFFF", 1, "#000000");
+ else new Box(j-12, y, j+12, y0, "#FF0000", "v_red.gif", "#000000", 1, "#000000");
+}
+document.close();
+</SCRIPT> +
+You can use the following methods: +
+_BFont=theFont;
+_BFont is a global variable, which is valid for all Bar and Box objects. +The default setting is
+_BFont="font-family:Verdana;font-weight:bold;font-size:10pt;line-height:13pt;". +
+
+
+
+
+
\ No newline at end of file
Index: openacs-4/packages/diagram/www/resources/diagram/browser_support.html
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/diagram/www/resources/diagram/browser_support.html,v
diff -u -N
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ openacs-4/packages/diagram/www/resources/diagram/browser_support.html 10 Jan 2006 07:34:16 -0000 1.1
@@ -0,0 +1,233 @@
+
+
+
+
+
+
++<SCRIPT Language="JavaScript">
+document.open();
+var D=new Diagram();
+D.SetFrame(80, 160, 520, 360);
+D.SetBorder(Date.UTC(2000,11,15,0,0,0), Date.UTC(2001,11,15,0,0,0), 0, 1000);
+D.SetText("","", "Website Hits 2001");
+D.XScale=4;
+D.Draw("", "#004080", false);
+var i, j, y, y0=D.ScreenY(0);
+for (i=0; i<12; i++)
+{ y=D.ScreenY(500+Math.random()*400);
+ j=D.ScreenX(Date.UTC(2001,i,1,0,0,0));
+ if (i%2==0) new Box(j-12, y, j+12, y0, "#0000FF", "v_blue.gif", "#FFFFFF", 1, "#000000");
+ else new Box(j-12, y, j+12, y0, "#FF0000", "v_red.gif", "#000000", 1, "#000000");
+}
+document.close();
+</SCRIPT> +
+You can use the following methods: +
-
+
- var B = new Box(theLeft, theTop, theRight, theBottom, theDrawColor, theText, theTextColor
+[, theBorderWidth[, theBorderColor[, theTooltipText[, theOnClickAction[,
theOnMouseoverAction[, theOnMouseoutAction]]]]]])
+//Constructor and Display, if theText="" then min_height=1 else min_height=12
+//if you want to use B.SetText() later, then you must initialize with a Text<>""
+ - B.SetColor(theColor) //Color +
- B.SetVisibility(isVisible) //Show or Hide +
- B.SetText(theText) //Text or Image +
- B.SetTitle(theTitle) //TooltipText +
- B.MoveTo(theLeft, theTop) //Move +
- B.ResizeTo(theLeft, theTop, theWidth, theHeight) //Resize +
- B.Delete() //Delete DIV object of B from the document +
- delete B //Destructor +
+_BFont=theFont;
+_BFont is a global variable, which is valid for all Bar and Box objects. +The default setting is
+_BFont="font-family:Verdana;font-weight:bold;font-size:10pt;line-height:13pt;". +
+
+
| « The Bar object | +The Dot object » | +
+JavaScript Diagram Builder - Browser support+ |
| +The JavaScript Diagram Builder works with Microsoft Internet Explorer 4.x, Netscape 4.x, Netscape 6.x and Opera 5.x +under Windows and with Netscape 6.x, Opera 5.x and Konqueror 3.x under Linux. Most of the methods, which dynamically change +the properties of the objects, will only work correctly with IE 5, Netscape 6, Opera 7 and Konqueror 3 or higher. +Here you can test the methods for the single objects. + |
+
+
+
+
+
+
+
+
\ No newline at end of file
Index: openacs-4/packages/diagram/www/resources/diagram/cockpit.png
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/diagram/www/resources/diagram/cockpit.png,v
diff -u -N
Binary files differ
Index: openacs-4/packages/diagram/www/resources/diagram/d_000000.gif
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/diagram/www/resources/diagram/d_000000.gif,v
diff -u -N
Binary files differ
Index: openacs-4/packages/diagram/www/resources/diagram/d_0000ff.gif
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/diagram/www/resources/diagram/d_0000ff.gif,v
diff -u -N
Binary files differ
Index: openacs-4/packages/diagram/www/resources/diagram/d_ff0000.gif
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/diagram/www/resources/diagram/d_ff0000.gif,v
diff -u -N
Binary files differ
Index: openacs-4/packages/diagram/www/resources/diagram/diagram.js
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/diagram/www/resources/diagram/diagram.js,v
diff -u -N
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ openacs-4/packages/diagram/www/resources/diagram/diagram.js 10 Jan 2006 07:34:16 -0000 1.1
@@ -0,0 +1,389 @@
+// JavaScript Diagram Builder 3.31
+// Copyright (c) 2001-2005 Lutz Tautenhahn, all rights reserved.
+//
+// The Author grants you a non-exclusive, royalty free, license to use,
+// modify and redistribute this software, provided that this copyright notice
+// and license appear on all copies of the software.
+// This software is provided "as is", without a warranty of any kind.
+
+var _N_Dia=0, _N_Bar=0, _N_Box=0, _N_Dot=0, _N_Pix=0, _N_Line=0, _N_Area=0, _N_Arrow=0, _N_Pie=0, _zIndex=0;
+var _dSize = (navigator.appName == "Microsoft Internet Explorer") ? 1 : -1;
+if (navigator.userAgent.search("Opera")>=0) _dSize=-1;
+var _IE=0;
+if (_dSize==1)
+{ _IE=1;
+ if (window.document.documentElement.clientHeight) _dSize=-1; //IE in standards-compliant mode
+}
+var _nav4 = (document.layers) ? 1 : 0;
+var _DiagramTarget=window;
+var _BFont="font-family:Verdana;font-weight:bold;font-size:10pt;line-height:13pt;"
+var _PathToScript="/resources/diagram/diagram/";
+if (document.layers) document.write("");
+else document.write("");
+
+function Diagram()
+{ this.xtext="";
+ this.ytext="";
+ this.title="";
+ this.XScale=1;
+ this.YScale=1;
+ this.XScalePosition="bottom";
+ this.YScalePosition="left";
+ this.Font="font-family:Verdana;font-weight:normal;font-size:10pt;line-height:13pt;";
+ this.ID="Dia"+_N_Dia; _N_Dia++; _zIndex++;
+ this.zIndex=_zIndex;
+ this.logsub=new Array(0.301, 0.477, 0.602, 0.699, 0.778, 0.845, 0.903, 0.954);
+ this.SetFrame=_SetFrame;
+ this.SetBorder=_SetBorder;
+ this.SetText=_SetText;
+ this.SetGridColor=_SetGridColor;
+ this.SetXGridColor=_SetXGridColor;
+ this.SetYGridColor=_SetYGridColor;
+ this.ScreenX=_ScreenX;
+ this.ScreenY=_ScreenY;
+ this.RealX=_RealX;
+ this.RealY=_RealY;
+ this.XGrid=new Array(3);
+ this.GetXGrid=_GetXGrid;
+ this.YGrid=new Array(3);
+ this.GetYGrid=_GetYGrid;
+ this.XGridDelta=0;
+ this.YGridDelta=0;
+ this.XSubGrids=0;
+ this.YSubGrids=0;
+ this.SubGrids=0;
+ this.XGridColor="";
+ this.YGridColor="";
+ this.XSubGridColor="";
+ this.YSubGridColor="";
+ this.MaxGrids=0;
+ this.DateInterval=_DateInterval;
+ this.Draw=_Draw;
+ this.SetVisibility=_SetVisibility;
+ this.SetTitle=_SetTitle;
+ this.Delete=_Delete;
+ return(this);
+}
+function _SetFrame(theLeft, theTop, theRight, theBottom)
+{ this.left = theLeft;
+ this.right = theRight;
+ this.top = theTop;
+ this.bottom = theBottom;
+}
+function _SetBorder(theLeftX, theRightX, theBottomY, theTopY)
+{ this.xmin = theLeftX;
+ this.xmax = theRightX;
+ this.ymin = theBottomY;
+ this.ymax = theTopY;
+}
+function _SetText(theScaleX, theScaleY, theTitle)
+{ this.xtext=theScaleX;
+ this.ytext=theScaleY;
+ this.title=theTitle;
+}
+function _SetGridColor(theGridColor, theSubGridColor)
+{ this.XGridColor=theGridColor;
+ this.YGridColor=theGridColor;
+ if ((theSubGridColor)||(theSubGridColor==""))
+ { this.XSubGridColor=theSubGridColor;
+ this.YSubGridColor=theSubGridColor;
+ }
+}
+function _SetXGridColor(theGridColor, theSubGridColor)
+{ this.XGridColor=theGridColor;
+ if ((theSubGridColor)||(theSubGridColor==""))
+ this.XSubGridColor=theSubGridColor;
+}
+function _SetYGridColor(theGridColor, theSubGridColor)
+{ this.YGridColor=theGridColor;
+ if ((theSubGridColor)||(theSubGridColor==""))
+ this.YSubGridColor=theSubGridColor;
+}
+function _ScreenX(theRealX)
+{ return(Math.round((theRealX-this.xmin)/(this.xmax-this.xmin)*(this.right-this.left)+this.left));
+}
+function _ScreenY(theRealY)
+{ return(Math.round((this.ymax-theRealY)/(this.ymax-this.ymin)*(this.bottom-this.top)+this.top));
+}
+function _RealX(theScreenX)
+{ return(this.xmin+(this.xmax-this.xmin)*(theScreenX-this.left)/(this.right-this.left));
+}
+function _RealY(theScreenY)
+{ return(this.ymax-(this.ymax-this.ymin)*(theScreenY-this.top)/(this.bottom-this.top));
+}
+function _sign(rr)
+{ if (rr<0) return(-1); else return(1);
+}
+function _DateInterval(vv)
+{ var bb=140*24*60*60*1000; //140 days
+ this.SubGrids=4;
+ if (vv>=bb) //140 days < 5 months
+ { bb=8766*60*60*1000;//1 year
+ if (vv+
|
+Because of a bug in Netscape 4.x (N4) you should add the following code in the web page +before using the diagram objects: +<DIV STYLE="position:absolute; top:0px"></DIV> +Also for N4 the file transparent.gif must be in the directory of the web page. +Furthermore, N4 has trouble when opening a page with a diagram in a new window, because the extern script will not be +included. In order to work around this bug, you must reload the page, it also can be done automatically with +<SCRIPT Language="JavaScript">if ((document.layers)&&(history.length==1)) location.href=location.href+"#";</SCRIPT> +which must be written in the head before including the extern script. +Tooltiptext will not work at all with N4. Click on a Bar or Box works only with N4, if you click on the text. + +In order to print all objects correctly, you must specify in your browser settings to print also the background. +For instance in Internet Explorer, use the menu View->Internet Options->Advanced and enable "Print backgrounds colors and images". + +Since version 2.8 the formerly script file diagram.js is splitted into the 3 files diagram.js (13 kB - browser independent code), +diagram_nav.js (98 kb - code for Netscape 4) and diagram_dom.js (89 kB - code for browsers which are DOM conform). +In this way the total file size for the download decreases, because the new file diagram.js automatically loads - depending on the detected browser +- only one of the files diagram_nav.js or diagram_dom.js. This makes also the execution of the script a bit faster, because +browser dependent overhead within the methods of the objects is no longer required. +If you do not use Line, Area, Arrow or Pie objects, then you can significantly reduce the file size by deleting the appropriate code from the script file. +If the script files diagram*.js are not in the same directory as the html page which uses the script, then you must edit +the file diagram.js and set the correct relative or absolute path in the variable _PathToScript. + +The last remark is about names of variables, functions and IDs: The Diagram Builder uses some global variables and functions, +all of them start with the letter "_" (for instance "_Draw()"). In order to prevent bugs caused by duplicate names of +variables or functions, you should not use names which begin with the letter "_" in your script. Additionally, there are +IDs for the objects, which start with "Dia", "Bar", "Box", "Dot", "Pix", "Line", "Area", "Arrow" or "Pie". Don't use ID's in your HTML page, +which start with this letters (for instance don't use <div id='Dia1'>...</div>). + |
+
| « Logarithmic Scale Example | +PHP & ASP » | +
"+l+"
";
+ divtext+="";
+ }
+ else
+ { if ((x0+sshift>=this.left)&&(x0+sshift<=this.right))
+ divtext+=""+l+"
";
+ divtext+="";
+ }
+ if ((this.XGridColor)&&(x0>this.left)&&(x0"+l+"
";
+ divtext+="";
+ }
+ else
+ { if ((x0+sshift>=this.left)&&(x0+sshift<=this.right))
+ divtext+=""+l+"
";
+ divtext+="";
+ }
+ if ((this.XGridColor)&&(x0>this.left)&&(x0"+l+"
";
+ divtext+=""+nbsp+"
";
+ }
+ else
+ { if ((y0+sshift>=this.top)&&(y0+sshift<=this.bottom))
+ divtext+=""+l+"
";
+ divtext+=""+nbsp+"
";
+ }
+ if ((this.YGridColor)&&(y0>this.top)&&(y0"+l+"
";
+ divtext+=""+nbsp+"
";
+ }
+ else
+ { if ((y0+sshift>=this.top)&&(y0+sshift<=this.bottom))
+ divtext+=""+l+"
";
+ divtext+=""+nbsp+"
";
+ }
+ if ((this.YGridColor)&&(y0>this.top)&&(y0"+this.title+"
";
+ else
+ divtext+=""+this.title+"
";
+ if (lay<-1)
+ selObj.innerHTML=divtext;
+ else
+ _DiagramTarget.document.writeln(divtext+"");
+}
+
+function Bar(theLeft, theTop, theRight, theBottom, theDrawColor, theText, theTextColor, theTooltipText, theOnClickAction, theOnMouseoverAction, theOnMouseoutAction)
+{ this.ID="Bar"+_N_Bar; _N_Bar++; _zIndex++;
+ this.left=theLeft;
+ this.top=theTop;
+ this.width=theRight-theLeft;
+ this.height=theBottom-theTop;
+ this.DrawColor=theDrawColor;
+ this.Text=String(theText);
+ this.TextColor=theTextColor;
+ this.BorderWidth="";
+ this.BorderColor="";
+ this.Cursor=_cursor(theOnClickAction);
+ this.SetVisibility=_SetVisibility;
+ this.SetColor=_SetBarColor;
+ this.SetText=_SetBarText;
+ this.SetTitle=_SetTitle;
+ this.MoveTo=_MoveTo;
+ this.ResizeTo=_ResizeTo;
+ this.Delete=_Delete;
+ var EventActions="";
+ if (_nvl(theOnClickAction,"")!="") EventActions+="onClick='"+_nvl(theOnClickAction,"")+"' ";
+ if (_nvl(theOnMouseoverAction,"")!="") EventActions+="onMouseover='"+_nvl(theOnMouseoverAction,"")+"' ";
+ if (_nvl(theOnMouseoutAction,"")!="") EventActions+="onMouseout='"+_nvl(theOnMouseoutAction,"")+"' ";
+ if (_nvl(theText,"")!="")
+ { var tt=theText;
+ if (_IsImage(theText)) tt=""+tt+"
");
+ }
+ else
+ { var vv=(this.height>0) ? "" : ";visibility:hidden";
+ _DiagramTarget.document.writeln(""+tt+"
");
+ }
+ else
+ { var vv=(this.height>=2*ww) ? "" : ";visibility:hidden";
+ _DiagramTarget.document.writeln("");
+ if (isNaN(theType))
+ { _DiagramTarget.document.write("
");
+ return(this);
+}
+function _SetDotColor(theColor)
+{ this.Color=theColor;
+ var tt="", selObj;
+ if (document.all) selObj=eval("_DiagramTarget.document.all."+this.ID);
+ else selObj=_DiagramTarget.document.getElementById(this.ID);
+ if (isNaN(this.Type))
+ { tt+="");
+ _DiagramTarget.document.write("![]("+theType+")
");
+ }
+ else
+ { if (theType%6==0)
+ { _DiagramTarget.document.write("");
+ _DiagramTarget.document.write("");
+ }
+ if (theType%6==1)
+ { _DiagramTarget.document.write("");
+ _DiagramTarget.document.write("");
+ }
+ if (theType%6==2)
+ _DiagramTarget.document.write("");
+ if (theType%6==3)
+ { _DiagramTarget.document.write("");
+ _DiagramTarget.document.write("");
+ }
+ if (theType%6==4)
+ { _DiagramTarget.document.write("");
+ _DiagramTarget.document.write("");
+ }
+ if (theType%6==5)
+ { if (_dSize==1)
+ _DiagramTarget.document.write("");
+ else
+ _DiagramTarget.document.write("");
+ }
+ }
+ _DiagramTarget.document.writeln("";
+ tt+="
";
+ }
+ else
+ { if (this.Type%6==0)
+ { tt+="";
+ tt+="";
+ }
+ if (this.Type%6==1)
+ { tt+="";
+ tt+="";
+ }
+ if (this.Type%6==2)
+ tt+="";
+ if (this.Type%6==3)
+ { tt+="";
+ tt+="";
+ }
+ if (this.Type%6==4)
+ { tt+="";
+ tt+="";
+ }
+ if (this.Type%6==5)
+ { if (_dSize==1)
+ tt+="";
+ else
+ tt+="";
+ }
+ }
+ selObj.innerHTML=tt;
+}
+function _DotMoveTo(theX, theY)
+{ var id=this.ID, selObj;
+ if (!isNaN(parseInt(theX))) this.X=theX;
+ if (!isNaN(parseInt(theY))) this.Y=theY;
+ if (document.all) selObj=eval("_DiagramTarget.document.all."+id);
+ else selObj=_DiagramTarget.document.getElementById(id);
+ with (selObj.style)
+ { if (!isNaN(parseInt(theX))) left=eval(theX-this.dX)+"px";
+ if (!isNaN(parseInt(theY))) top=eval(theY-this.dY)+"px";
+ visibility="visible";
+ }
+}
+function Pixel(theX, theY, theColor)
+{ this.ID="Pix"+_N_Pix; _N_Pix++; _zIndex++;
+ this.left=theX;
+ this.top=theY;
+ this.dX=0;
+ this.dY=0;
+ this.Color=theColor;
+ this.SetVisibility=_SetVisibility;
+ this.SetColor=_SetPixelColor;
+ this.MoveTo=_DotMoveTo;
+ this.Delete=_Delete;
+ _DiagramTarget.document.writeln("");
+ return(this);
+}
+function _SetPixelColor(theColor)
+{ var id=this.ID, selObj;
+ this.Color=theColor;
+ if (document.all) selObj=eval("_DiagramTarget.document.all."+id);
+ else selObj=_DiagramTarget.document.getElementById(id);
+ selObj.style.backgroundColor=theColor;
+}
+function _SetVisibility(isVisible)
+{ var ll, id=this.ID, selObj;
+ if (document.all)
+ { selObj=eval("_DiagramTarget.document.all."+id);
+ if (isVisible) selObj.style.visibility="visible";
+ else selObj.style.visibility="hidden";
+ }
+ else
+ { selObj=_DiagramTarget.document.getElementById(id);
+ if (isVisible) selObj.style.visibility="visible";
+ else selObj.style.visibility="hidden";
+ if (id.substr(0,3)=='Dia')
+ { var ii=0;
+ selObj=_DiagramTarget.document.getElementById(id+'i'+eval(ii++));
+ while (selObj!=null)
+ { if (isVisible) selObj.style.visibility="visible";
+ else selObj.style.visibility="hidden";
+ selObj=_DiagramTarget.document.getElementById(id+'i'+eval(ii++));
+ }
+ }
+ }
+}
+function _SetTitle(theTitle)
+{ var id=this.ID, selObj;
+ if (document.all) selObj=eval("_DiagramTarget.document.all."+id);
+ else selObj=_DiagramTarget.document.getElementById(id);
+ selObj.title=theTitle;
+}
+function _MoveTo(theLeft, theTop)
+{ var id=this.ID, selObj, ww=0;
+ if (this.BorderWidth) ww=this.BorderWidth;
+ if (!isNaN(parseInt(theLeft))) this.left=theLeft;
+ if (!isNaN(parseInt(theTop))) this.top=theTop;
+ if (document.all) selObj=eval("_DiagramTarget.document.all."+id);
+ else selObj=_DiagramTarget.document.getElementById(id);
+ with (selObj.style)
+ { if (!isNaN(parseInt(theLeft))) left=theLeft+"px";
+ if (!isNaN(parseInt(theTop))) top=theTop+"px";
+ if (this.height<=2*ww) visibility="hidden";
+ else visibility="visible";
+ }
+}
+function _ResizeTo(theLeft, theTop, theWidth, theHeight)
+{ var id=this.ID, selObj, ww=0;
+ if (this.BorderWidth) ww=this.BorderWidth;
+ if (!isNaN(parseInt(theLeft))) this.left=theLeft;
+ if (!isNaN(parseInt(theTop))) this.top=theTop;
+ if (!isNaN(parseInt(theWidth))) this.width=theWidth;
+ if (!isNaN(parseInt(theHeight))) this.height=theHeight;
+ if (_IsImage(this.Text)) this.SetText(this.Text);
+ if (document.all) selObj=eval("_DiagramTarget.document.all."+id);
+ else selObj=_DiagramTarget.document.getElementById(id);
+ with (selObj.style)
+ { if (!isNaN(parseInt(theLeft))) left=theLeft+"px";
+ if (!isNaN(parseInt(theTop))) top=theTop+"px";
+ if (!isNaN(parseInt(theWidth))) width=eval(theWidth-ww+ww*_dSize)+"px";
+ if (!isNaN(parseInt(theHeight))) height=eval(theHeight-ww+ww*_dSize)+"px";
+ if (this.height<=2*ww) visibility="hidden";
+ else visibility="visible";
+ }
+}
+function _Delete()
+{ var id=this.ID, selObj;
+ if (document.all)
+ { selObj=eval("_DiagramTarget.document.all."+id);
+ selObj.outerHTML="";
+ }
+ else
+ { selObj=_DiagramTarget.document.getElementById(id);
+ selObj.parentNode.removeChild(selObj);
+ }
+}
+function _SetColor(theColor)
+{ this.Color=theColor;
+ if ((theColor!="")&&(theColor.length"+nbsp+"
");
+ else
+ { if (ww>hh)
+ { ccr=0;
+ cct=0;
+ while (ccr"+nbsp+"
");
+ cct++;
+ }
+ }
+ else
+ { ccb=0;
+ ccl=0;
+ while (ccb"+nbsp+"
");
+ ccl++;
+ }
+ }
+ }
+ _DiagramTarget.document.writeln("");
+ return(this);
+}
+function _LineResizeTo(theX0, theY0, theX1, theY1)
+{ var xx0, yy0, xx1, yy1, ll, rr, tt, bb, ww, hh, ccl, ccr, cct, ccb, id=this.ID,selObj="",divtext="";
+ var ss2=Math.floor(this.Size/2), nbsp="";//(_IE)? " " : "";
+ if (!isNaN(parseInt(theX0))) this.X0=theX0;
+ if (!isNaN(parseInt(theY0))) this.Y0=theY0;
+ if (!isNaN(parseInt(theX1))) this.X1=theX1;
+ if (!isNaN(parseInt(theY1))) this.Y1=theY1;
+ var ddir=(((this.Y1>this.Y0)&&(this.X1>this.X0))||((this.Y1"+nbsp+"
";
+ cct++;
+ }
+ }
+ else
+ { ccb=0;
+ ccl=0;
+ while (ccb"+nbsp+"
";
+ ccl++;
+ }
+ }
+ }
+ selObj.innerHTML=divtext;
+}
+function _LineMoveTo(theLeft, theTop)
+{ var id=this.ID, selObj;
+ var ss2=Math.floor(this.Size/2);
+ if (document.all) selObj=eval("_DiagramTarget.document.all."+id);
+ else selObj=_DiagramTarget.document.getElementById(id);
+ with (selObj.style)
+ { if (!isNaN(parseInt(theLeft))) left=eval(theLeft-ss2)+"px";
+ if (!isNaN(parseInt(theTop))) top=eval(theTop-ss2)+"px";
+ visibility="visible";
+ }
+}
+//You can delete the following 2 functions, if you do not use Area objects
+function Area(theX0, theY0, theX1, theY1, theColor, theBase, theTooltipText, theOnClickAction, theOnMouseoverAction, theOnMouseoutAction)
+{ this.ID="Area"+_N_Area; _N_Area++; _zIndex++;
+ this.X0=theX0;
+ this.Y0=theY0;
+ this.X1=theX1;
+ this.Y1=theY1;
+ this.Color=theColor;
+ this.Base=theBase;
+ this.Cursor=_cursor(theOnClickAction);
+ this.SetVisibility=_SetVisibility;
+ this.SetColor=_SetColor;
+ this.SetTitle=_SetTitle;
+ this.MoveTo=_MoveTo;
+ this.ResizeTo=_AreaResizeTo;
+ this.Delete=_Delete;
+ this.EventActions="";
+ if (_nvl(theOnClickAction,"")!="") this.EventActions+="onClick='"+_nvl(theOnClickAction,"")+"' ";
+ if (_nvl(theOnMouseoverAction,"")!="") this.EventActions+="onMouseover='"+_nvl(theOnMouseoverAction,"")+"' ";
+ if (_nvl(theOnMouseoutAction,"")!="") this.EventActions+="onMouseout='"+_nvl(theOnMouseoutAction,"")+"' ";
+ var dd, ll, rr, tt, bb, ww, hh;
+ if (theX0<=theX1) { ll=theX0; rr=theX1; }
+ else { ll=theX1; rr=theX0; }
+ if (theY0<=theY1) { tt=theY0; bb=theY1; }
+ else { tt=theY1; bb=theY0; }
+ ww=rr-ll; hh=bb-tt;
+ if (theBase<=tt)
+ _DiagramTarget.document.write("");
+ else
+ _DiagramTarget.document.write("0))
+ divtext+="![](o_"+this.Color+".gif)
";
+ if (((this.Y0this.Y1)&&(this.X0>this.X1)))
+ divtext+="![](q_"+this.Color+".gif)
";
+ if (((this.Y0>this.Y1)&&(this.X0this.X1)))
+ divtext+="![](p_"+this.Color+".gif)
";
+ }
+ if ((this.Base>tt)&&(this.Basethis.Y1)&&(this.X0>this.X1)))
+ { divtext+="![](b_"+this.Color+".gif)
";
+ divtext+="";
+ }
+ if (((this.Y0>this.Y1)&&(this.X0this.X1)))
+ { divtext+="";
+ divtext+="![](d_"+this.Color+".gif)
";
+ }
+ }
+ if (this.Base>=bb)
+ { if ((this.Base>bb)&&(ww>0))
+ divtext+="";
+ if (((this.Y0this.Y1)&&(this.X0>this.X1)))
+ divtext+="";
+ if (((this.Y0>this.Y1)&&(this.X0this.X1)))
+ divtext+="";
+ }
+ selObj.innerHTML=divtext;
+}
+//You can delete the following 3 functions, if you do not use Arrow objects
+function Arrow(theX0, theY0, theX1, theY1, theColor, theSize, theTooltipText, theOnClickAction, theOnMouseoverAction, theOnMouseoutAction)
+{ this.ID="Arrow"+_N_Arrow; _N_Arrow++; _zIndex++;
+ this.X0=theX0;
+ this.Y0=theY0;
+ this.X1=theX1;
+ this.Y1=theY1;
+ this.Color=theColor;
+ if ((theColor!="")&&(theColor.length==6)) this.Color="#"+theColor;
+ this.Size=Number(_nvl(theSize,1));
+ this.Cursor=_cursor(theOnClickAction);
+ this.Border=8*this.Size;
+ this.SetVisibility=_SetVisibility;
+ this.SetColor=_SetColor;
+ this.SetTitle=_SetTitle;
+ this.MoveTo=_ArrowMoveTo;
+ this.ResizeTo=_ArrowResizeTo;
+ this.Delete=_Delete;
+ this.EventActions="";
+ if (_nvl(theOnClickAction,"")!="") this.EventActions+="onClick='"+_nvl(theOnClickAction,"")+"' ";
+ if (_nvl(theOnMouseoverAction,"")!="") this.EventActions+="onMouseover='"+_nvl(theOnMouseoverAction,"")+"' ";
+ if (_nvl(theOnMouseoutAction,"")!="") this.EventActions+="onMouseout='"+_nvl(theOnMouseoutAction,"")+"' ";
+ var xx0, yy0, xx1, yy1, ll, rr, tt, bb, ww, hh, ccl, ccr, cct, ccb;
+ var ddir, ss2=Math.floor(this.Size/2), nbsp="";//(_IE)? " " : "";
+
+ ddir=(((this.Y1>this.Y0)&&(this.X1>this.X0))||((this.Y1");
+ if ((ww==0)||(hh==0))
+ _DiagramTarget.document.write(""+nbsp+"
");
+ else
+ _DiagramTarget.document.write("");
+ if (theBase<=tt)
+ { if ((theBase0))
+ _DiagramTarget.document.write("![](o_"+theColor+".gif)
");
+ if (((theY0theY1)&&(theX0>theX1)))
+ _DiagramTarget.document.write("![](q_"+theColor+".gif)
");
+ if (((theY0>theY1)&&(theX0theX1)))
+ _DiagramTarget.document.write("![](p_"+theColor+".gif)
");
+ }
+ if ((theBase>tt)&&(theBasetheY1)&&(theX0>theX1)))
+ { _DiagramTarget.document.write("![](b_"+theColor+".gif)
");
+ _DiagramTarget.document.write("");
+ }
+ if (((theY0>theY1)&&(theX0theX1)))
+ { _DiagramTarget.document.write("");
+ _DiagramTarget.document.write("![](d_"+theColor+".gif)
");
+ }
+ }
+ if (theBase>=bb)
+ { if ((theBase>bb)&&(ww>0))
+ _DiagramTarget.document.write("");
+ if (((theY0theY1)&&(theX0>theX1)))
+ _DiagramTarget.document.write("");
+ if (((theY0>theY1)&&(theX0theX1)))
+ _DiagramTarget.document.write("");
+ }
+ _DiagramTarget.document.writeln("
");
+}
+function _AreaResizeTo(theX0, theY0, theX1, theY1)
+{ var dd, ll, rr, tt, bb, ww, hh, id=this.ID,selObj="",divtext="";
+ if (!isNaN(parseInt(theX0))) this.X0=theX0;
+ if (!isNaN(parseInt(theY0))) this.Y0=theY0;
+ if (!isNaN(parseInt(theX1))) this.X1=theX1;
+ if (!isNaN(parseInt(theY1))) this.Y1=theY1;
+ if (this.X0<=this.X1) { ll=this.X0; rr=this.X1; }
+ else { ll=this.X1; rr=this.X0; }
+ if (this.Y0<=this.Y1) { tt=this.Y0; bb=this.Y1; }
+ else { tt=this.Y1; bb=this.Y0; }
+ ww=rr-ll; hh=bb-tt;
+ if (document.all) selObj=eval("_DiagramTarget.document.all."+id);
+ else selObj=_DiagramTarget.document.getElementById(id);
+ with (selObj.style)
+ { if (this.Base<=tt) { left=ll+"px"; top=this.Base+"px"; width=ww+"px"; height=hh+"px"; }
+ else { left=ll+"px"; top=tt+"px"; width=ww+"px"; height=Math.max(hh, this.Base-tt)+"px";}
+ }
+ if (this.Base<=tt)
+ { if ((this.Base"+nbsp+"
");
+ else
+ { if (ww>hh)
+ { ccr=0;
+ cct=0;
+ while (ccr"+nbsp+"
");
+ cct++;
+ }
+ }
+ else
+ { ccb=0;
+ ccl=0;
+ while (ccb"+nbsp+"
");
+ ccl++;
+ }
+ }
+ }
+ var LL=1, ll0=ll, tt0=tt;
+ var ccL=8*theSize+4, ccB=2*theSize+1;
+ var DDX=theX1-theX0, DDY=theY1-theY0;
+ if ((DDX!=0)||(DDY!=0)) LL=Math.sqrt((DDX*DDX)+(DDY*DDY));
+ this.X0=theX1-Math.round(1/LL*(ccL*DDX-ccB*DDY));
+ this.Y0=theY1-Math.round(1/LL*(ccL*DDY+ccB*DDX));
+ ddir=(((this.Y1>this.Y0)&&(this.X1>this.X0))||((this.Y1"+nbsp+"
");
+ cct++;
+ }
+ }
+ else
+ { ccb=0;
+ ccl=0;
+ while (ccb"+nbsp+"
");
+ ccl++;
+ }
+ }
+ }
+ this.X0=theX1-Math.round(1/LL*(ccL*DDX+ccB*DDY));
+ this.Y0=theY1-Math.round(1/LL*(ccL*DDY-ccB*DDX));
+ ddir=(((this.Y1>this.Y0)&&(this.X1>this.X0))||((this.Y1"+nbsp+"
");
+ cct++;
+ }
+ }
+ else
+ { ccb=0;
+ ccl=0;
+ while (ccb"+nbsp+"
");
+ ccl++;
+ }
+ }
+ }
+ _DiagramTarget.document.writeln("");
+ this.X0=theX0;
+ this.Y0=theY0;
+ return(this);
+}
+function _ArrowResizeTo(theX0, theY0, theX1, theY1)
+{ var xx0, yy0, xx1, yy1, ll, rr, tt, bb, ww, hh, ccl, ccr, cct, ccb, id=this.ID,selObj="",divtext="";
+ var ss2=Math.floor(this.Size/2), nbsp="";//(_IE)? " " : "";
+ if (!isNaN(parseInt(theX0))) this.X0=theX0;
+ if (!isNaN(parseInt(theY0))) this.Y0=theY0;
+ if (!isNaN(parseInt(theX1))) this.X1=theX1;
+ if (!isNaN(parseInt(theY1))) this.Y1=theY1;
+ var tmpX0=this.X0, tmpY0=this.Y0;
+ var ddir=(((this.Y1>this.Y0)&&(this.X1>this.X0))||((this.Y1"+nbsp+"
";
+ cct++;
+ }
+ }
+ else
+ { ccb=0;
+ ccl=0;
+ while (ccb"+nbsp+"
";
+ ccl++;
+ }
+ }
+ }
+ var LL=1, ll0=ll, tt0=tt;
+ var ccL=8*this.Size+4, ccB=2*this.Size+1;
+ var DDX=this.X1-tmpX0, DDY=this.Y1-tmpY0;
+ if ((DDX!=0)||(DDY!=0)) LL=Math.sqrt(0+(DDX*DDX)+(DDY*DDY));
+ this.X0=this.X1-Math.round(1/LL*(ccL*DDX-ccB*DDY));
+ this.Y0=this.Y1-Math.round(1/LL*(ccL*DDY+ccB*DDX));
+ ddir=(((this.Y1>this.Y0)&&(this.X1>this.X0))||((this.Y1"+nbsp+"
";
+ cct++;
+ }
+ }
+ else
+ { ccb=0;
+ ccl=0;
+ while (ccb"+nbsp+"
";
+ ccl++;
+ }
+ }
+ }
+ this.X0=this.X1-Math.round(1/LL*(ccL*DDX+ccB*DDY));
+ this.Y0=this.Y1-Math.round(1/LL*(ccL*DDY-ccB*DDX));
+ ddir=(((this.Y1>this.Y0)&&(this.X1>this.X0))||((this.Y1"+nbsp+"
";
+ cct++;
+ }
+ }
+ else
+ { ccb=0;
+ ccl=0;
+ while (ccb"+nbsp+"
";
+ ccl++;
+ }
+ }
+ }
+ selObj.innerHTML=divtext;
+ this.X0=tmpX0;
+ this.Y0=tmpY0;
+}
+function _ArrowMoveTo(theLeft, theTop)
+{ var id=this.ID, selObj;
+ var ss2=Math.floor(this.Size/2);
+ if (document.all) selObj=eval("_DiagramTarget.document.all."+id);
+ else selObj=_DiagramTarget.document.getElementById(id);
+ with (selObj.style)
+ { if (!isNaN(parseInt(theLeft))) left=eval(theLeft-ss2-this.Border)+"px";
+ if (!isNaN(parseInt(theTop))) top=eval(theTop-ss2-this.Border)+"px";
+ visibility="visible";
+ }
+}
+//You can delete the following 3 functions, if you do not use Pie objects
+function Pie(theXCenter, theYCenter, theOffset, theRadius, theAngle0, theAngle1, theColor, theTooltipText, theOnClickAction, theOnMouseoverAction, theOnMouseoutAction)
+{ this.ID="Pie"+_N_Pie; _N_Pie++; _zIndex++;
+ this.XCenter=theXCenter;
+ this.YCenter=theYCenter;
+ this.Offset=theOffset;
+ this.Radius=theRadius;
+ this.dX=theRadius;
+ this.dY=theRadius;
+ this.Angle0=theAngle0;
+ this.Angle1=theAngle1;
+ this.Color=theColor;
+ if ((theColor!="")&&(theColor.length==6)) this.Color="#"+theColor;
+ this.Cursor=_cursor(theOnClickAction);
+ this.SetVisibility=_SetVisibility;
+ this.SetColor=_SetColor;
+ this.SetTitle=_SetTitle;
+ this.MoveTo=_PieMoveTo;
+ this.ResizeTo=_PieResizeTo;
+ this.Delete=_Delete;
+ this.EventActions="";
+ if (_nvl(theOnClickAction,"")!="") this.EventActions+="onClick='"+_nvl(theOnClickAction,"")+"' ";
+ if (_nvl(theOnMouseoverAction,"")!="") this.EventActions+="onMouseover='"+_nvl(theOnMouseoverAction,"")+"' ";
+ if (_nvl(theOnMouseoutAction,"")!="") this.EventActions+="onMouseout='"+_nvl(theOnMouseoutAction,"")+"' ";
+ var aa0, aa1, xx, yy, tt, xxo=0, yyo=0, rr2=this.Radius*this.Radius, xx0, yy0, xx1, yy1, pid180=Math.PI/180, ss0, ss1;
+ var nbsp="";//(_IE)? " " : "";
+ aa0=this.Angle0;
+ aa1=this.Angle1;
+ while (aa0>=360) aa0-=360;
+ while (aa0<0) aa0+=360;
+ while (aa1>=360) aa1-=360;
+ while (aa1<0) aa1+=360;
+ if (aa0");
+ if (aa0==aa1)
+ { if (this.Angle0"+nbsp+"
");
+ }
+ }
+ }
+ else
+ { xx0=Math.sin(aa0*pid180)*this.Radius;
+ yy0=-Math.cos(aa0*pid180)*this.Radius;
+ xx1=Math.sin(aa1*pid180)*this.Radius;
+ yy1=-Math.cos(aa1*pid180)*this.Radius;
+ for (yy=-this.Radius; yy<0; yy++)
+ { xx=Math.round(Math.sqrt(rr2-(yy+0.5)*(yy+0.5)));
+ tt=yy+this.Radius;
+ if ((yy0>=0)&&(yy1>=0))
+ { if (xx0"+nbsp+"
");
+ }
+ else if ((yy>=yy0)&&(yy>=yy1))
+ { ss0=yy*xx0/yy0;
+ ss1=yy*xx1/yy1;
+ if (xx0"+nbsp+"
");
+ _DiagramTarget.document.write(""+nbsp+"
");
+ }
+ }
+ else if (yy>=yy0)
+ { ss0=yy*xx0/yy0;
+ _DiagramTarget.document.write(""+nbsp+"
");
+ }
+ else
+ { ss1=yy*xx1/yy1;
+ _DiagramTarget.document.write(""+nbsp+"
");
+ }
+ }
+ else if (yy0<0)
+ { if (yy>=yy0)
+ { ss0=yy*xx0/yy0;
+ _DiagramTarget.document.write(""+nbsp+"
");
+ }
+ else if (xx0<0)
+ _DiagramTarget.document.write(""+nbsp+"
");
+ }
+ else
+ { if (yy>=yy1)
+ { ss1=yy*xx1/yy1;
+ _DiagramTarget.document.write(""+nbsp+"
");
+ }
+ else if (xx1>0)
+ _DiagramTarget.document.write(""+nbsp+"
");
+ }
+ }
+ for (yy=0; yy"+nbsp+"
");
+ }
+ else if ((yy0>0)&&(yy1>0))
+ { if ((yy>yy0)&&(yy>yy1))
+ { if (((xx1<0)&&(xx0>0))||((xx1<0)&&(xx0<=xx1))||((xx0>0)&&(xx1>=xx0)))
+ _DiagramTarget.document.write(""+nbsp+"
");
+ }
+ else if ((yy<=yy0)&&(yy<=yy1))
+ { ss0=yy*xx0/yy0;
+ ss1=yy*xx1/yy1;
+ if (xx0>xx1)
+ _DiagramTarget.document.write(""+nbsp+"
");
+ else
+ { _DiagramTarget.document.write(""+nbsp+"
");
+ _DiagramTarget.document.write(""+nbsp+"
");
+ }
+ }
+ else if (yy<=yy0)
+ { ss0=yy*xx0/yy0;
+ _DiagramTarget.document.write(""+nbsp+"
");
+ }
+ else
+ { ss1=yy*xx1/yy1;
+ _DiagramTarget.document.write(""+nbsp+"
");
+ }
+ }
+ else if (yy0>0)
+ { if (yy<=yy0)
+ { ss0=yy*xx0/yy0;
+ _DiagramTarget.document.write(""+nbsp+"
");
+ }
+ else if (xx0>0)
+ _DiagramTarget.document.write(""+nbsp+"
");
+ }
+ else
+ { if (yy<=yy1)
+ { ss1=yy*xx1/yy1;
+ _DiagramTarget.document.write(""+nbsp+"
");
+ }
+ else if (xx1<0)
+ _DiagramTarget.document.write(""+nbsp+"
");
+ }
+ }
+ }
+ _DiagramTarget.document.writeln("");
+ return(this);
+}
+function _PieResizeTo(theXCenter, theYCenter, theOffset, theRadius, theAngle0, theAngle1)
+{ var id=this.ID,selObj="",divtext="";
+ if (!isNaN(parseInt(theXCenter))) this.XCenter=theXCenter;
+ if (!isNaN(parseInt(theYCenter))) this.YCenter=theYCenter;
+ if (!isNaN(parseInt(theOffset))) this.Offset=theOffset;
+ if (!isNaN(parseInt(theRadius))) this.Radius=theRadius;
+ if (!isNaN(parseInt(theAngle0))) this.Angle0=theAngle0;
+ if (!isNaN(parseInt(theAngle1))) this.Angle1=theAngle1;
+ var aa0, aa1, xx, yy, tt, xxo=0, yyo=0, rr2=this.Radius*this.Radius, xx0, yy0, xx1, yy1, pid180=Math.PI/180, ss0, ss1;
+ var nbsp="";//(_IE)? " " : "";
+ aa0=this.Angle0;
+ aa1=this.Angle1;
+ if (aa0"+nbsp+"
";
+ }
+ else if ((yy>=yy0)&&(yy>=yy1))
+ { ss0=yy*xx0/yy0;
+ ss1=yy*xx1/yy1;
+ if (xx0"+nbsp+"
";
+ divtext+=""+nbsp+"
";
+ }
+ }
+ else if (yy>=yy0)
+ { ss0=yy*xx0/yy0;
+ divtext+=""+nbsp+"
";
+ }
+ else
+ { ss1=yy*xx1/yy1;
+ divtext+=""+nbsp+"
";
+ }
+ }
+ else if (yy0<0)
+ { if (yy>=yy0)
+ { ss0=yy*xx0/yy0;
+ divtext+=""+nbsp+"
";
+ }
+ else if (xx0<0)
+ divtext+=""+nbsp+"
";
+ }
+ else
+ { if (yy>=yy1)
+ { ss1=yy*xx1/yy1;
+ divtext+=""+nbsp+"
";
+ }
+ else if (xx1>0)
+ divtext+=""+nbsp+"
";
+ }
+ }
+ for (yy=0; yy"+nbsp+"
";
+ }
+ else if ((yy0>0)&&(yy1>0))
+ { if ((yy>yy0)&&(yy>yy1))
+ { if (((xx1<0)&&(xx0>0))||((xx1<0)&&(xx0<=xx1))||((xx0>0)&&(xx1>=xx0)))
+ divtext+=""+nbsp+"
";
+ }
+ else if ((yy<=yy0)&&(yy<=yy1))
+ { ss0=yy*xx0/yy0;
+ ss1=yy*xx1/yy1;
+ if (xx0>xx1)
+ divtext+=""+nbsp+"
";
+ else
+ { divtext+=""+nbsp+"
";
+ divtext+=""+nbsp+"
";
+ }
+ }
+ else if (yy<=yy0)
+ { ss0=yy*xx0/yy0;
+ divtext+=""+nbsp+"
";
+ }
+ else
+ { ss1=yy*xx1/yy1;
+ divtext+=""+nbsp+"
";
+ }
+ }
+ else if (yy0>0)
+ { if (yy<=yy0)
+ { ss0=yy*xx0/yy0;
+ divtext+=""+nbsp+"
";
+ }
+ else if (xx0>0)
+ divtext+=""+nbsp+"
";
+ }
+ else
+ { if (yy<=yy1)
+ { ss1=yy*xx1/yy1;
+ divtext+=""+nbsp+"
";
+ }
+ else if (xx1<0)
+ divtext+=""+nbsp+"
";
+ }
+ }
+ }
+ selObj.innerHTML=divtext;
+}
+function _PieMoveTo(theXCenter, theYCenter, theOffset)
+{ var xxo=0, yyo=0, pid180=Math.PI/180, id=this.ID, selObj;
+ if (!isNaN(parseInt(theXCenter))) this.XCenter=theXCenter;
+ if (!isNaN(parseInt(theYCenter))) this.YCenter=theYCenter;
+ if (!isNaN(parseInt(theOffset))) this.Offset=theOffset;
+ if (this.Angle0 |
|
"+l+" |
|
"+l+" |
|
|
|
"+l+" |
|
"+l+" |
|
|
|
|
"+l+" |
|
"+l+" |
|
|
|
"+l+" |
|
"+l+" |
|
|
"+this.title+" |
"+this.title+" |
"+this.title+" |
"+this.title+" |
| "+tt+" |
| "+tt+" |
| "+tt+" |
| "+tt+" |
| "+tt+" |
| "+tt+" |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| "+tt+" |
| "+tt+" |
");
+ else
+ { if (ww>hh)
+ { ccr=0;
+ cct=0;
+ while (ccr");
+ else
+ { if (ww>hh)
+ { ccr=0;
+ cct=0;
+ while (ccr");
+ else
+ { if (ww>hh)
+ { ccr=0;
+ cct=0;
+ while (ccr");
+ else
+ { if (ww>hh)
+ { ccr=0;
+ cct=0;
+ while (ccr");
+ else
+ { if (ww>hh)
+ { ccr=0;
+ cct=0;
+ while (ccr");
+ }
+ else if ((yy0<0)&&(yy1<0))
+ { if ((yy");
+ else
+ { _DiagramTarget.document.writeln("");
+ }
+ }
+ }
+ else
+ { xx0=Math.sin(aa0*pid180)*this.Radius;
+ yy0=-Math.cos(aa0*pid180)*this.Radius;
+ xx1=Math.sin(aa1*pid180)*this.Radius;
+ yy1=-Math.cos(aa1*pid180)*this.Radius;
+ for (yy=-this.Radius; yy<0; yy++)
+ { xx=Math.round(Math.sqrt(rr2-(yy+0.5)*(yy+0.5)));
+ tt=yy+this.Radius+2;
+ if ((yy0>=0)&&(yy1>=0))
+ { if (xx0");
+ }
+ else if ((yy0<0)&&(yy1<0))
+ { if ((yy");
+ else
+ { document.writeln("
+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.SetGridColor("#44CC44");
+D.Draw("#80FF80","#0000FF",true,"Click on me !","DiagramClick()");
+document.close();
+function DiagramClick()
+{ alert("Use your own function here."); }
+</SCRIPT> +
++<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.SetGridColor("#44CC44");
+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:
+
+before using the diagram objects:
+<DIV STYLE="position:absolute; top:0px"></DIV>
+Also for Netscape 4.x the file transparent.gif must be in the directory of the web page.
+
+If you want to draw the diagram into another window, you can specify the target window:
+_DiagramTarget=theTargetWindow;
+_DiagramTarget is a global variable, which is valid within the entire document.
+The default _DiagramTarget is the window object of the current document. + + +The Diagram in the new window was generated by:
+<SCRIPT Language="JavaScript">
+function MyXScale(nn)
+{ var tt=new Array("left", "center", "right");
+ return("<b>"+tt[nn]+"</b>");
+}
+function NewWindow()
+{ _DiagramTarget=window.open("","",
+ "width=460,height=300,menubar=no,locationbar=no,resizable=yes,status=no,scrollbars=no");
+ with (_DiagramTarget.document)
+ { open();
+ writeln("<HTML><HEAD><TITLE>Diagram in a new window</TITLE></HEAD><BODY>");
+ var D2=new Diagram();
+ D2.SetFrame(60, 40, 400, 240);
+ D2.SetBorder(0, 3, 0, 4);
+ D2.XGridDelta=1;
+ D2.XScale="function MyXScale";
+ D2.XScalePosition="top-right";
+ D2.YSubGrids=1;
+ D2.Font="font-family:Verdana;font-weight:normal;font-size:8pt;line-height:13pt;";
+ D2.SetText("","", "Diagram with small font and function-scale");
+ D2.SetGridColor("#cccccc", "#eeddcc");
+ D2.Draw("#FFEECC", "#336699", false, "Click on me !", "opener.DiagramClick()");
+ writeln("</BODY></HTML>");
+ close();
+ }
+}
+</SCRIPT> +
+
+
+
+
\ No newline at end of file
Index: openacs-4/packages/diagram/www/resources/diagram/dot_object.html
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/diagram/www/resources/diagram/dot_object.html,v
diff -u -N
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ openacs-4/packages/diagram/www/resources/diagram/dot_object.html 10 Jan 2006 07:34:16 -0000 1.1
@@ -0,0 +1,76 @@
+
+
+
+-
+
- 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 (optional) +
- 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.GetXGrid() //returns array, which contains min, delta and max of the X grid +
- D.GetYGrid() //returns array, which contains min, delta and max of the Y grid +
- D.SetGridColor(theGridColor[, theSubGridColor]) //Colors of X and Y grid lines +
- D.SetXGridColor(theGridColor[, theSubGridColor]) //Colors of X grid lines +
- D.SetYGridColor(theGridColor[, theSubGridColor]) //Colors of Y grid lines +
- D.Draw(theDrawColor, theTextColor, isScaleText[, theTooltipText[, theOnClickAction +[, theOnMouseoverAction[, theOnMouseoutAction]]]]) //Display, +theDrawColor can be an image +
- D.SetVisibility(isVisible) //Show or Hide +
- D.SetTitle(theTitle) //TooltipText +
- D.Delete() //Delete DIV object of D from the document +
- delete D //Destructor +
-
+
- D.XScale // 0 = no scale; 1 = numeric (default); 2, 3, ... = date/time; string = numeric+unit
+
"function FunctionName" = FunctionName(ScaleValue)
+ - D.YScale // 0 = no scale; 1 = numeric (default); 2, 3, ... = date/time; string = numeric+unit
+
"function FunctionName" = FunctionName(ScaleValue)
+ - D.XScalePosition // "bottom" (default), "botom-left", "bottom-right", "top", "top-left", "top-right" +
- D.YScalePosition // "left" (default), "left-top", "left-bottom", "right", "right-top", "right-bottom" +
- D.XGridDelta //Grid interval in X-direction, if it is 0 (default) it will be detected automatically +
- D.YGridDelta //Grid interval in Y-direction, if it is 0 (default) it will be detected automatically +
- D.XSubGrids //Number of Sub-Grid intervals within one Grid interval in X-direction, if it is 0 (default) it will be detected automatically, if it is -1 then a logarithmic Sub-Grid will be drawn +
- D.YSubGrids //Number of Sub-Grid intervals within one Grid interval in Y-direction, if it is 0 (default) it will be detected automatically, if it is -1 then a logarithmic Sub-Grid will be drawn +
- D.Font //Text style, default = "font-family:Verdana;font-weight:normal;font-size:10pt;line-height:13pt;" +
-
+
- D.XGrid[0], D.XGrid[1] and D.XGrid[2] // min, delta and max of the X grid +
- D.YGrid[0], D.YGrid[1] and D.YGrid[2] // min, delta and max of the Y grid +
+before using the diagram objects:
+<DIV STYLE="position:absolute; top:0px"></DIV>
+Also for Netscape 4.x the file transparent.gif must be in the directory of the web page.
+
+If you want to draw the diagram into another window, you can specify the target window:
+_DiagramTarget=theTargetWindow;
+_DiagramTarget is a global variable, which is valid within the entire document.
+The default _DiagramTarget is the window object of the current document. + + +The Diagram in the new window was generated by:
+<SCRIPT Language="JavaScript">
+function MyXScale(nn)
+{ var tt=new Array("left", "center", "right");
+ return("<b>"+tt[nn]+"</b>");
+}
+function NewWindow()
+{ _DiagramTarget=window.open("","",
+ "width=460,height=300,menubar=no,locationbar=no,resizable=yes,status=no,scrollbars=no");
+ with (_DiagramTarget.document)
+ { open();
+ writeln("<HTML><HEAD><TITLE>Diagram in a new window</TITLE></HEAD><BODY>");
+ var D2=new Diagram();
+ D2.SetFrame(60, 40, 400, 240);
+ D2.SetBorder(0, 3, 0, 4);
+ D2.XGridDelta=1;
+ D2.XScale="function MyXScale";
+ D2.XScalePosition="top-right";
+ D2.YSubGrids=1;
+ D2.Font="font-family:Verdana;font-weight:normal;font-size:8pt;line-height:13pt;";
+ D2.SetText("","", "Diagram with small font and function-scale");
+ D2.SetGridColor("#cccccc", "#eeddcc");
+ D2.Draw("#FFEECC", "#336699", false, "Click on me !", "opener.DiagramClick()");
+ writeln("</BODY></HTML>");
+ close();
+ }
+}
+</SCRIPT> +
+
| « Introduction | +The Bar object » | +
+JavaScript Diagram Builder - The Dot object+ |
| +The Dot object is used to display a dot on the screen, especially to draw it in a diagram area. In order to +find the appropriate screen position of a dot, the diagram functions ScreenX, ScreenY, RealX and +RealY can be used. It is also possible, to move, hide and delete a dot after it has been drawn. + |
+This diagram was generated by
+<SCRIPT Language="JavaScript">
+document.open();
+var D=new Diagram();
+D.SetFrame(80, 160, 640, 460);
+D.SetBorder(6, 18, 0, 6);
+D.XGridDelta=1;
+D.SetGridColor("#808080");
+D.Draw("#FF80FF", "#000000", false);
+var Size, Type, x;
+Color=new Array("#000000","#FF0000","#0000FF","#000000","#FF0000","#0000FF");
+for (Size=6; Size<=18; Size++)
+{ x=D.ScreenX(Size);
+ new Dot(x, D.ScreenY(0), Size, 'smile.gif', "", "Type: smile.gif, Size:"+Size);
+ for (Type=1; Type<7; Type++)
+ new Dot(x, D.ScreenY(Type), Size, Type, Color[Type-1], "Type:"+Type+", Size:"+Size);
+}
+document.close();
+</SCRIPT> +
+You can use the following methods: +
+
+
+
+
+
\ No newline at end of file
Index: openacs-4/packages/diagram/www/resources/diagram/download.html
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/diagram/www/resources/diagram/download.html,v
diff -u -N
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ openacs-4/packages/diagram/www/resources/diagram/download.html 10 Jan 2006 07:34:16 -0000 1.1
@@ -0,0 +1,26 @@
+
+
+
++<SCRIPT Language="JavaScript">
+document.open();
+var D=new Diagram();
+D.SetFrame(80, 160, 640, 460);
+D.SetBorder(6, 18, 0, 6);
+D.XGridDelta=1;
+D.SetGridColor("#808080");
+D.Draw("#FF80FF", "#000000", false);
+var Size, Type, x;
+Color=new Array("#000000","#FF0000","#0000FF","#000000","#FF0000","#0000FF");
+for (Size=6; Size<=18; Size++)
+{ x=D.ScreenX(Size);
+ new Dot(x, D.ScreenY(0), Size, 'smile.gif', "", "Type: smile.gif, Size:"+Size);
+ for (Type=1; Type<7; Type++)
+ new Dot(x, D.ScreenY(Type), Size, Type, Color[Type-1], "Type:"+Type+", Size:"+Size);
+}
+document.close();
+</SCRIPT> +
+You can use the following methods: +
-
+
- var D = new Dot(theX, theY, theSize, theType, theColor[, theTooltipText
+[, theOnClickAction[, theOnMouseoverAction[, theOnMouseoutAction]]]])
//Constructor and Display, size should be 6..18, type should be 1..6 or an image
+ - D.SetColor(theColor) //Color +
- D.SetVisibility(isVisible) //Show or Hide +
- D.SetTitle(theTitle) //TooltipText +
- D.MoveTo(theX, theY) //Move +
- D.Delete() //Delete DIV object of D from the document +
- delete D //Destructor +
+
+
| « The Box object | +The Pixel object » | +
+LT Diagram Builder - Download+ |
+Download of v. 3.3
|
+
+
| « PHP & ASP | +Lutz Tautenhahn © 2001-2005 |
+
+JavaScript Diagram Builder - Dynamic example+ |
+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
+
+
+
+
+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. + +
+ +
+
+
+
\ No newline at end of file
Index: openacs-4/packages/diagram/www/resources/diagram/evalsafe.js
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/diagram/www/resources/diagram/evalsafe.js,v
diff -u -N
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ openacs-4/packages/diagram/www/resources/diagram/evalsafe.js 10 Jan 2006 07:34:16 -0000 1.1
@@ -0,0 +1,11 @@
+function EvalSafe(ss)
+{ var jj="";
+ if (ss.indexOf("^")>=0) return("");
+ try
+ { with (Math) jj=eval(ss);
+ }
+ catch(error)
+ { return("");
+ }
+ return(jj);
+}
Index: openacs-4/packages/diagram/www/resources/diagram/evalsave.js
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/diagram/www/resources/diagram/evalsave.js,v
diff -u -N
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ openacs-4/packages/diagram/www/resources/diagram/evalsave.js 10 Jan 2006 07:34:16 -0000 1.1
@@ -0,0 +1,10 @@
+function EvalSave(ss)
+{ var jj="";
+ try
+ { with (Math) jj=eval(ss);
+ }
+ catch(error)
+ { return("");
+ }
+ return(jj);
+}
Index: openacs-4/packages/diagram/www/resources/diagram/fx_display.html
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/diagram/www/resources/diagram/fx_display.html,v
diff -u -N
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ openacs-4/packages/diagram/www/resources/diagram/fx_display.html 10 Jan 2006 07:34:16 -0000 1.1
@@ -0,0 +1,41 @@
+
+
+
++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. + +
+ +
| « Static Example | +Iframe Example » | +
JavaScript Diagram Builder - Iframe Example
+By using an iframe as _DiagramTarget you can put a diagram to a relative position within a +webpage (for instance after text 1 and before text 2). With this there is no need anymore to use absolute positioned +divs to keep the text outside of the diagram area. Test it by altering the width of your window and see +how the diagram moves and does not overlap with the text. However take care: Although they belong to the +HTML 4.0 standard, iframes are by now not supported by all web browsers. ++ + +
+This diagram was generated by
+<iframe frameborder=0 scrolling="no" width=400 height=240 name="F1"></iframe>
+<SCRIPT Language="JavaScript">
+_DiagramTarget=window.frames["F1"];
+_DiagramTarget.document.open();
+_DiagramTarget.document.writeln("<html><head></head><body bgcolor='#eeeeee'>");
+var D=new Diagram();
+D.SetFrame(70, 30, 380, 200);
+D.SetBorder(10, 50, 0, 4);
+D.SetText("X-Label","Y-Label","Title");
+D.Draw("#80FF80","#0000FF",true,"Click on me !","parent.F1DiagramClick()");
+_DiagramTarget.document.writeln("</body></html>");
+_DiagramTarget.document.close();
+function F1DiagramClick(){ alert("Use your own function here."); }
+</SCRIPT>
+
+
| « Dynamic Example | +Relative Position » | +
+JavaScript Diagram Builder - Introduction+ |
|
+The JavaScript Diagram Builder v. 3.3 is a library of some objects and functions, which can help you to display
+a coordinate diagram (resp. a chart or graph) in your webpage in an easy way. The file 'diagram.js' contains all the necessary objects and functions.
+This file must be included in the header of your webpage: +<SCRIPT Language="JavaScript" src="diagram.js"></SCRIPT> +The script will best work with Microsoft Internet Explorer 5.x, Netscape 6.x, Opera 7.x or Konqueror 3.x under Windows and +Linux, but it will also work with Netscape 4.x and Opera 5.x under Windows and Linux with some restrictions. +The JavaScript Diagram Builder is especially useful, if you want to display a coordinate diagram (chart or graph) which depends +on the client's input parameter or from data of a database. + +The JavaScript Diagram Builder v. 3.3 is copyrighted freeware. It is provided "as is", without a warranty of any kind. +If you encounter any bugs, or if you have any suggestions for further versions, then send me an email. + +Here is the history of new features:
|
+
+
| Lutz Tautenhahn © 2001-2005 |
+The Diagram object » | +
+JavaScript Diagram Builder - The Line object+ |
| +The Line object is used to display a line on the screen, especially to draw it in a diagram area. It is +possible to hide, move and delete a line after it has been drawn. Unlike in older versions, the images +o_rrggbb.gif are no longer required to draw Line objects. + |
+This diagram was generated by
+<SCRIPT Language="JavaScript">
+function Fahrenheit(vv){ return("<nobr>"+Math.round(vv*18+320)/10+"� F</nobr>"); }
+document.open();
+var D=new Diagram();
+D.SetFrame(80, 160, 520, 360);
+D.SetBorder(6, 18, 20, 30);
+D.SetText("","", "temperature measured during the day");
+D.XScale=" h";
+D.YScale="� C";
+D.SetGridColor("#cccccc");
+D.Draw("#FFEECC", "#663300", false);
+var t, T0, T1;
+D.GetYGrid();
+_BFont="font-family:Verdana;font-size:10pt;line-height:13pt;";
+for (t=D.YGrid[0]; t<=D.YGrid[2]; t+=D.YGrid[1])
+ new Bar(D.right+6, D.ScreenY(t)-8, D.right+6, D.ScreenY(t)+8, "", Fahrenheit(t), "#663300");
+T1=22;
+for (t=6; t<18; t++)
+{ T0=T1;
+ T1=23-4*Math.cos(t/4)+Math.random();
+ new Line(D.ScreenX(t), D.ScreenY(T0), D.ScreenX(t+1), D.ScreenY(T1), "#cc9966", 2, "temperature");
+}
+document.close();
+</SCRIPT> +
+You can use the following methods: +
+
+
+
+
+
\ No newline at end of file
Index: openacs-4/packages/diagram/www/resources/diagram/linreg_display.html
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/diagram/www/resources/diagram/linreg_display.html,v
diff -u -N
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ openacs-4/packages/diagram/www/resources/diagram/linreg_display.html 10 Jan 2006 07:34:16 -0000 1.1
@@ -0,0 +1,75 @@
+
+
+
++<SCRIPT Language="JavaScript">
+function Fahrenheit(vv){ return("<nobr>"+Math.round(vv*18+320)/10+"� F</nobr>"); }
+document.open();
+var D=new Diagram();
+D.SetFrame(80, 160, 520, 360);
+D.SetBorder(6, 18, 20, 30);
+D.SetText("","", "temperature measured during the day");
+D.XScale=" h";
+D.YScale="� C";
+D.SetGridColor("#cccccc");
+D.Draw("#FFEECC", "#663300", false);
+var t, T0, T1;
+D.GetYGrid();
+_BFont="font-family:Verdana;font-size:10pt;line-height:13pt;";
+for (t=D.YGrid[0]; t<=D.YGrid[2]; t+=D.YGrid[1])
+ new Bar(D.right+6, D.ScreenY(t)-8, D.right+6, D.ScreenY(t)+8, "", Fahrenheit(t), "#663300");
+T1=22;
+for (t=6; t<18; t++)
+{ T0=T1;
+ T1=23-4*Math.cos(t/4)+Math.random();
+ new Line(D.ScreenX(t), D.ScreenY(T0), D.ScreenX(t+1), D.ScreenY(T1), "#cc9966", 2, "temperature");
+}
+document.close();
+</SCRIPT> +
+You can use the following methods: +
-
+
- var L = new Line(theX0, theY0, theX1, theY1, theColor[, theSize[, theTooltipText[,
+theOnClickAction [, theOnMouseoverAction[, theOnMouseoutAction]]]]]) +//Constructor and Display
+ - L.SetColor(theColor) //Color +
- L.SetVisibility(isVisible) //Show or Hide +
- L.SetTitle(theTitle) //TooltipText +
- L.MoveTo(theLeft, theTop) //Move +
- L.ResizeTo(theX0, theY0, theX1, theY1) //Resize +
- L.Delete() //Delete DIV object of L from the document +
- delete L //Destructor +
+
+
| « The Pixel object | +The Area object » | +
+JavaScript Diagram Builder - Logarithmic Scale Example+ |
| +To draw a coordinate diagram with a logarithmic scale, define a function-scale (like shown in the example below) +and use GridDelta=1 (increasing values) +or GridDelta=-1 (decreasing values) and use SubGrids=-1 to get a logatithmic sub-grid. Use the logarithmic values in the +functions SetBorder and ScreenX or ScreenY, as it is shown below. + |
+This diagram was generated by
+<SCRIPT Language="JavaScript">
+Hosts=new Array(28174, 80000, 290000, 500000, 727000, 1200000, 2217000, 4852000, 9472000,
+16146000, 29670000, 43230000, 72398092, 109574429, 147344723);
+function LogScale(vv)
+{ if ((vv>3)||(vv<-3)) return("10<sup>"+vv+"</sup>");
+ if (vv>=0) return(Math.round(Math.exp(vv*Math.LN10)));
+ else return(1/Math.round(Math.exp(-vv*Math.LN10)));
+}
+document.open();
+var D=new Diagram();
+D.SetFrame(100, 140, 580, 460);
+D.SetBorder(1988, 2002, Math.log(Hosts[0])/Math.LN10, Math.log(Hosts[14])/Math.LN10);
+D.SetText("Year", "Hosts", "<B>Internet growth</B>");
+D.XGridDelta=2;
+D.XSubGrids=2;
+D.YGridDelta=1;
+D.YSubGrids=-1;
+D.YScale="function LogScale";
+D.SetGridColor("#FFFFFF", "#EEEEEE");
+D.Draw("#DDDDDD", "#000000", true);
+for (var n=1; n<Hosts.length; n++)
+{ new Line(D.ScreenX(1987+n), D.ScreenY(Math.log(Hosts[n-1])/Math.LN10),
+ D.ScreenX(1988+n), D.ScreenY(Math.log(Hosts[n])/Math.LN10), "#0000ff", 2, "internet hosts");
+}
+for (n=0; n<Hosts.length; n++)
+{ new Dot(D.ScreenX(1988+n), D.ScreenY(Math.log(Hosts[n])/Math.LN10), 10, 1, "#ff0000",
+ eval(1988+n)+": "+Hosts[n]+" hosts");
+}
+document.close();
+</SCRIPT> +
+
+
+
+
+
\ No newline at end of file
Index: openacs-4/packages/diagram/www/resources/diagram/menu.html
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/diagram/www/resources/diagram/menu.html,v
diff -u -N
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ openacs-4/packages/diagram/www/resources/diagram/menu.html 10 Jan 2006 07:34:16 -0000 1.1
@@ -0,0 +1,38 @@
+
+
+
++<SCRIPT Language="JavaScript">
+Hosts=new Array(28174, 80000, 290000, 500000, 727000, 1200000, 2217000, 4852000, 9472000,
+16146000, 29670000, 43230000, 72398092, 109574429, 147344723);
+function LogScale(vv)
+{ if ((vv>3)||(vv<-3)) return("10<sup>"+vv+"</sup>");
+ if (vv>=0) return(Math.round(Math.exp(vv*Math.LN10)));
+ else return(1/Math.round(Math.exp(-vv*Math.LN10)));
+}
+document.open();
+var D=new Diagram();
+D.SetFrame(100, 140, 580, 460);
+D.SetBorder(1988, 2002, Math.log(Hosts[0])/Math.LN10, Math.log(Hosts[14])/Math.LN10);
+D.SetText("Year", "Hosts", "<B>Internet growth</B>");
+D.XGridDelta=2;
+D.XSubGrids=2;
+D.YGridDelta=1;
+D.YSubGrids=-1;
+D.YScale="function LogScale";
+D.SetGridColor("#FFFFFF", "#EEEEEE");
+D.Draw("#DDDDDD", "#000000", true);
+for (var n=1; n<Hosts.length; n++)
+{ new Line(D.ScreenX(1987+n), D.ScreenY(Math.log(Hosts[n-1])/Math.LN10),
+ D.ScreenX(1988+n), D.ScreenY(Math.log(Hosts[n])/Math.LN10), "#0000ff", 2, "internet hosts");
+}
+for (n=0; n<Hosts.length; n++)
+{ new Dot(D.ScreenX(1988+n), D.ScreenY(Math.log(Hosts[n])/Math.LN10), 10, 1, "#ff0000",
+ eval(1988+n)+": "+Hosts[n]+" hosts");
+}
+document.close();
+</SCRIPT> +
+
+
| « Relative Position | +Browser Support » | +
JavaScript Diagram Builder 3.3 |
| Introduction |
| The Diagram object |
| The Bar object |
| The Box object |
| The Dot object |
| The Pixel object |
| The Line object |
| The Area object |
| The Arrow object |
| The Pie object |
| Static example |
| Dynamic example |
| Iframe example |
| Relative position |
| Logarithmic scale |
| Browser support |
| PHP & ASP |
| Download |
| Lutz Tautenhahn © 2001-2005 |
| « Browser Support | ++ + | +Download » | +
+LT Diagram Builder - PHP & ASP versions+ | ||||||||||||||||||||||||||||||||||||||||
|
+Since version 3.0 you can generate images of coordinate diagrams (resp. charts or graphs) at serverside (using PHP or ASP)
+and save it as file or send it back as a stream. These 2 versions are independent from the clientside JavaScript version
+of the script. The method calls of the 2 scripts are very similar to the method calls of the JavaScript version.
+However, the methods for changing the properties of objects (MoveTo, ResizeTo, SetColor, etc.) are not available,
+because it is not possible to change these properties after the image has been created. Because of this, the bar, box, dot,
+pixel, line, area, arrow and pie objects in the JavaScript version, are methods of the diagram object in the PHP and ASP version.
+The usage of the script versions is shown in the following table: + + +
Differences between JavaScript version and +PHP/ASP version+In JavaScript you can use code like+ +D.Font="font-family:Verdana;font-weight:normal;font-size:10pt;line-height:13pt;"; +_BFont="font-family:Verdana;font-weight:bold;font-size:10pt;line-height:13pt;"; + +to set the font for the Diagram object or the Bar/Box object. +In PHP (ASP) you will use code like +$D->Font=4; D.Font=4 +$D->BFont=5; D.BFont=5 +to set the font(1..5) for the Diagram object or the Bar/Box object. +You can set the font of the bar and box object BFont to -1..-5 for vertical text. +For vertical text of the X-axis use a Font value from -1..-5. + +In JavaScript you can use the result of the predefined JavaScript function +Date.UTC(2001,0,1,0,0,0); //date/time: year, month(0..11), day, hour, min, sec +as argument for the SetBorder method of a diagram with date/time scale. +In PHP (ASP) you can use the function +UTC(2001,1,1,0,0,0); UTC(2001,1,1,0,0,0) //date/time: year, month(1..12), day, hour, min, sec +which is defined in the script file diagram.php diagram.asp. +Take care with the difference in the argument for the month! + + + PHP version+You can use the following methods: +
+ ASP version - VBScript language+You can use the following methods: +
+Array(theOnClickAction, theOnMouseoverAction, theOnMouseoutAction) + | ||||||||||||||||||||||||||||||||||||||||
+JavaScript Diagram Builder - The Pie object+ |
| +The Pie object is used to display an filled arc on the screen. It is possible to hide, move and delete it after +it has been drawn. + |
+This diagram was generated by
+<SCRIPT Language="JavaScript">
+P=new Array();
+document.open();
+P[0]=new Pie(100,240,10,80,0*3.6,10*3.6,"#ff6060");
+P[1]=new Pie(100,240,0,80,10*3.6,40*3.6,"#ffa000");
+P[2]=new Pie(100,240,0,80,40*3.6,100*3.6,"#f6f600");
+new Bar(200,190,280,210,"#ff6060","Apples","#000000","", "void(0)","MouseOver(0)","MouseOut(0)");
+new Bar(200,230,280,250,"#ffa000","Oranges","#000000","", "void(0)","MouseOver(1)","MouseOut(1)");
+new Bar(200,270,280,290,"#f6f600","Bananas","#000000","", "void(0)","MouseOver(2)","MouseOut(2)");
+document.close();
+function MouseOver(i) { P[i].MoveTo("","",10); }
+function MouseOut(i) { P[i].MoveTo("","",0); }
+</SCRIPT> +
++<SCRIPT Language="JavaScript">
+P=new Array();
+document.open();
+P[0]=new Pie(100,240,10,80,0*3.6,10*3.6,"#ff6060");
+P[1]=new Pie(100,240,0,80,10*3.6,40*3.6,"#ffa000");
+P[2]=new Pie(100,240,0,80,40*3.6,100*3.6,"#f6f600");
+new Bar(200,190,280,210,"#ff6060","Apples","#000000","", "void(0)","MouseOver(0)","MouseOut(0)");
+new Bar(200,230,280,250,"#ffa000","Oranges","#000000","", "void(0)","MouseOver(1)","MouseOut(1)");
+new Bar(200,270,280,290,"#f6f600","Bananas","#000000","", "void(0)","MouseOver(2)","MouseOut(2)");
+document.close();
+function MouseOver(i) { P[i].MoveTo("","",10); }
+function MouseOut(i) { P[i].MoveTo("","",0); }
+</SCRIPT> +
+
+You can use the following methods: +
+
+
+
+
+
\ No newline at end of file
Index: openacs-4/packages/diagram/www/resources/diagram/pixel_object.html
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/diagram/www/resources/diagram/pixel_object.html,v
diff -u -N
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ openacs-4/packages/diagram/www/resources/diagram/pixel_object.html 10 Jan 2006 07:34:16 -0000 1.1
@@ -0,0 +1,102 @@
+
+
+
++You can use the following methods: +
-
+
- var P = new Pie(theXCenter, theYCenter, theOffset, theRadius, theAngle0, theAngle1, theColor[,
+theTooltipText[, theOnClickAction[, theOnMouseoverAction[, theOnMouseoutAction]]]])
+//Constructor and Display
+ - P.SetColor(theColor) //Color +
- P.SetVisibility(isVisible) //Show or Hide +
- P.SetTitle(theTitle) //TooltipText +
- P.MoveTo(theXCenter, theYCenter, theOffset) //Move +
- P.ResizeTo(theXCenter, theYCenter, theOffset, theRadius, theAngle0, theAngle1) //Resize +
- P.Delete() //Delete DIV object of P from the document +
- delete P //Destructor +
+
+
| « The Arrow object | +Static example » | +
+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: +
+
+
+
+
+
\ No newline at end of file
Index: openacs-4/packages/diagram/www/resources/diagram/q_000000.gif
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/diagram/www/resources/diagram/q_000000.gif,v
diff -u -N
Binary files differ
Index: openacs-4/packages/diagram/www/resources/diagram/q_0000ff.gif
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/diagram/www/resources/diagram/q_0000ff.gif,v
diff -u -N
Binary files differ
Index: openacs-4/packages/diagram/www/resources/diagram/q_ff0000.gif
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/diagram/www/resources/diagram/q_ff0000.gif,v
diff -u -N
Binary files differ
Index: openacs-4/packages/diagram/www/resources/diagram/relative_position.html
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/diagram/www/resources/diagram/relative_position.html,v
diff -u -N
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ openacs-4/packages/diagram/www/resources/diagram/relative_position.html 10 Jan 2006 07:34:16 -0000 1.1
@@ -0,0 +1,50 @@
+
+
+
++<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: +
-
+
- var P = new Pixel(theX, theY, theColor) //Constructor and Display +
- P.SetColor(theColor) //Color +
- P.SetVisibility(isVisible) //Show or Hide +
- P.MoveTo(theX, theY) //Move +
- P.Delete() //Delete DIV object of P from the document +
- delete P //Destructor +
+
+
| « The Dot object | +The Line object » | +
JavaScript Diagram Builder - Relative Position
+By including the diagram code between <div style='position:relative; top:0px; height:220px'> and </div> +you can put a diagram to a relative position in a web page also without using of iframes (for instance after text 1 and before text 2). +The values for the vertical positions of the diagram objects are with regard to the covering div. Instead of height:220px +you should use the height, which is required by the diagram. In this way diagrams can be inserted directly between text blocks +of a web page. Test it by altering the width of your window and see how the diagram moves and does not overlap with the text. +This method does not work with the old browser Netscape 4.7, which however is almost no more used. ++
+
+
++This diagram was generated by
+<div style='position:relative; top:0px; height:220px'>
+<SCRIPT Language="JavaScript">
+var D=new Diagram();
+D.SetFrame(70, 30, 380, 200);
+D.SetBorder(10, 50, 0, 4);
+D.Draw("#80FF80","#0000FF",false);
+for (var i=15; i<50; i+=5)
+ new Bar(D.ScreenX(i)-10, D.ScreenY(i%3+1), D.ScreenX(i)+10, D.ScreenY(0), "#00cccc");
+</SCRIPT>
+</div>
+
+
| « Dynamic Example | +Logarithmic Scale Example » | +
+JavaScript Diagram Builder - Static Example+ |
| +The diagrams on this page are static in a sense, that after the objects are created, they are never changed. +Here are shown several date scales, which can be in the range from seconds up to years. +Unfortunately, there are many different date formats in the world (for instance day.month, day-month, +month/day). If you want to use another date format, then you can add it to the function _DateFormat() +in the file 'diagram.js'. + |
+Code example for a diagram with date scale:
+<SCRIPT Language="JavaScript">
+D=new Diagram();
+...
+D.SetBorder(
+Date.UTC(2001,0,1,0,0,0), //date/time (left): year, month(0..11), day, hour, min, sec
+Date.UTC(2001,11,31,23,59,59), //date/time (right): year, month(0..11), day, hour, min, sec
+0, 1); //any y scale
+//change the scale type from default=1 into 2 or higher before drawing:
+D.XScale=2; //2,3,4=predefined date scales; 5,6,..=userdefined date scales
+...
+//get the screen position of a date/time for the display of bars, dots or pixels:
+var x=D.ScreenX(Date.UTC(2001,10,11,11,11,0));
+...
+</SCRIPT>
+
+
+
+
+
\ No newline at end of file
Index: openacs-4/packages/diagram/www/resources/diagram/transparent.gif
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/diagram/www/resources/diagram/transparent.gif,v
diff -u -N
Binary files differ
Index: openacs-4/packages/diagram/www/resources/diagram/v_blue.gif
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/diagram/www/resources/diagram/v_blue.gif,v
diff -u -N
Binary files differ
Index: openacs-4/packages/diagram/www/resources/diagram/v_green.gif
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/diagram/www/resources/diagram/v_green.gif,v
diff -u -N
Binary files differ
Index: openacs-4/packages/diagram/www/resources/diagram/v_orange.gif
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/diagram/www/resources/diagram/v_orange.gif,v
diff -u -N
Binary files differ
Index: openacs-4/packages/diagram/www/resources/diagram/v_red.gif
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/diagram/www/resources/diagram/v_red.gif,v
diff -u -N
Binary files differ
Index: openacs-4/packages/diagram/www/resources/diagram/zoom_line.html
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/diagram/www/resources/diagram/zoom_line.html,v
diff -u -N
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ openacs-4/packages/diagram/www/resources/diagram/zoom_line.html 10 Jan 2006 07:34:16 -0000 1.1
@@ -0,0 +1,87 @@
+
+
+
++<SCRIPT Language="JavaScript">
+D=new Diagram();
+...
+D.SetBorder(
+Date.UTC(2001,0,1,0,0,0), //date/time (left): year, month(0..11), day, hour, min, sec
+Date.UTC(2001,11,31,23,59,59), //date/time (right): year, month(0..11), day, hour, min, sec
+0, 1); //any y scale
+//change the scale type from default=1 into 2 or higher before drawing:
+D.XScale=2; //2,3,4=predefined date scales; 5,6,..=userdefined date scales
+...
+//get the screen position of a date/time for the display of bars, dots or pixels:
+var x=D.ScreenX(Date.UTC(2001,10,11,11,11,0));
+...
+</SCRIPT>
+
+
| « The Pie object | +Dynamic Example » | +