Skip to content

D
diagram
Commit eedfe4c7 authored by Frank Bergmann's avatar Frank Bergmann
Browse files
Options

Initial Import

parents
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 2138 additions and 0 deletions
.project 0 → 100755
View file @ eedfe4c7
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>diagram</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
</buildSpec>
<natures>
</natures>
</projectDescription>
catalog/diagram.de_DE.ISO-8859-1.xml 0 → 100755
View file @ eedfe4c7
<?xml version="1.0" encoding="ISO-8859-1"?>
<message_catalog package_key="diagram" package_version="0.1" locale="de_DE" charset="ISO-8859-1">
<msg key="Legend">Legende</msg>
</message_catalog>
catalog/diagram.en_US.ISO-8859-1.xml 0 → 100755
View file @ eedfe4c7
<?xml version="1.0" encoding="ISO-8859-1"?>
<message_catalog package_key="diagram" package_version="0.1" locale="en_US" charset="ISO-8859-1">
<msg key="Legend">Legend</msg>
</message_catalog>
catalog/diagram.es_ES.ISO-8859-1.xml 0 → 100755
View file @ eedfe4c7
<?xml version="1.0" encoding="ISO-8859-1"?>
<message_catalog package_key="diagram" package_version="0.1" locale="es_ES" charset="ISO-8859-1">
<msg key="Legend">Leyenda</msg>
</message_catalog>
diagram.info 0 → 100755
View file @ eedfe4c7
<?xml version="1.0"?>
<!-- Generated by the OpenACS Package Manager -->
<package key="diagram" url="http://openacs.org/repository/apm/packages/diagram" type="apm_application">
<package-name>Diagram</package-name>
<pretty-plural>Diagrams</pretty-plural>
<initial-install-p>f</initial-install-p>
<singleton-p>t</singleton-p>
<auto-mount>diagram</auto-mount>
<version name="0.2b" url="http://openacs.org/repository/download/apm/diagram-0.2b.apm">
<owner url="mailto:mazloumi@uni-mannheim.de">Nima Mazloumi</owner>
<summary>Extension to acs-templating package to give support for diagrams.</summary>
<release-date>2005-11-25</release-date>
<vendor url="http//www.uni-mannheim.de">Universität Mannheim</vendor>
<description format="text/html">This package gives support to multirow based diagrams. Like template::list::create you can easily define your diagram and pass the multirow to be used. Currently it has only support for Javascript based diagrams. The underlying library used is JavaScript Diagram Builder v3.3 from Lutz Tautenhahn. The rendering is encapsulated though. This allows future version to give support for different engines like GNUPlot.</description>
<maturity>0</maturity>
<provides url="diagram" version="0.2b"/>
<requires url="acs-lang" version="5.2.0a1"/>
<callbacks>
</callbacks>
<parameters>
<parameter datatype="string" min_n_values="1" max_n_values="1" name="DefaultDiagramTemplate" default="diagram" description="-"/>
</parameters>
</version>
</package>
resources/diagram/cockpit.adp 0 → 100755
View file @ eedfe4c7
<noparse>
<multiple name="@diagram_properties.multirow@">
</noparse>
<multiple name="elements">
<% set col [expr "$elements(rownum) % 2"]; %>
<if @col@ ne 0>
<SCRIPT Language="JavaScript">
document.open();
v='<diagramelement name="@elements.name@"/>';
document.close();
</SCRIPT>
</if><else>
<div style='position:relative;top:0px;height:@diagram_properties.height@px;width:@diagram_properties.width@px;float:left;'>
<SCRIPT Language="JavaScript">
document.open();
var D=new Diagram();
D.SetFrame(10, 10,@diagram_properties.right@, @diagram_properties.bottom@);
D.SetBorder(-1, 1, -1, 1);
D.SetText('','','@elements.label@');
D.XScale=0;
D.YScale=0;
D.Draw('/resources/diagram/diagram/cockpit.png','',false);
sla='<diagramelement name="@elements.name@"/>';
a = Math.round((v - sla)/sla*100);
d = a*0.3;if (d < -15 || d > 15) {d=NaN;}
x=Math.sin((12+d)*2*Math.PI/12);
y=Math.cos((12+d)*2*Math.PI/12);
new Arrow(D.ScreenX(0), D.ScreenY(0), D.ScreenX(x/1.4),D.ScreenY(y/1.4),'@elements.color@', '@elements.size@');
new Bar(@diagram_properties.width@/2-10,@diagram_properties.height@/2-10,10,@diagram_properties.bottom@,'',a,'@elements.color@');
document.close();
</SCRIPT>
</div>
</else>
</multiple>
<noparse>
</multiple>
</noparse>
resources/diagram/curve.adp 0 → 100755
View file @ eedfe4c7
<table align="left" cellpadding="3" cellspacing="1" >
<tr><td>
<div style='position:relative;top:0px;height:@diagram_properties.height@px;width:@diagram_properties.width@px;float:left;'>
<SCRIPT Language="JavaScript">
document.open();
var D=new Diagram();
D.SetFrame(@diagram_properties.left@, @diagram_properties.top@, @diagram_properties.right@, @diagram_properties.bottom@);
D.SetBorder(@diagram_properties.borders@);
D.SetText("@diagram_properties.x_label@","@diagram_properties.y_label@", "@diagram_properties.title@");
@diagram_properties.scales@
D.Font="color:#000000;font-family:Verdana;font-weight:normal;font-size:7pt;line-height:7pt;";
D.Draw("", "@diagram_properties.color@", false);
var x=0, y=0;
@diagram_properties.minima@
<noparse>
<multiple name="@diagram_properties.multirow@">
</noparse>
<multiple name="elements">
<% set col [expr "$elements(rownum) % 2"] %>
<% set index [expr "int(ceil($elements(rownum)/2))"];%>
<if @col@ eq 1>
x=D.ScreenX(<if @diagram_properties.x_scale@ eq 1><diagramelement name="@elements.name@"/></if><else>Date.UTC(<diagramelement name="@elements.name@"/>)</else>);
</if>
<else>
y=D.ScreenY(<if @diagram_properties.y_scale@ eq 1><diagramelement name="@elements.name@"/></if><else>Date.UTC(<diagramelement name="@elements.name@"/>)</else>);
</else>
<if @col@ eq 0>
<if @elements.type@ eq 1>new Dot(x, y, @elements.size@, '@elements.dot_type@', '@elements.color@','');</if>
<if @elements.type@ eq 2>new Bar(x-@elements.size@, y, x+@elements.size@,@diagram_properties.y0@, '@elements.color@', '', '', '');</if>
<if @elements.type@ eq 3>new Box(x-@elements.size@, y, x+@elements.size@,@diagram_properties.y0@, '@elements.color@', '@elements.image;noquote@', '', 1, '#000000');</if>
<if @elements.type@ eq 4>
new Line(x@index@, y@index@, x, y,'@elements.color@',@elements.size@, '');
x@index@=x;
y@index@=y;
</if>
</if>
</multiple>
<noparse>
</multiple>
</noparse>
document.close();
</SCRIPT>
</div>
</td>
<td valign="top">
#diagram.Legend#
<multiple name="elements">
<% set col [expr "$elements(rownum) % 2"] %>
<% set index [expr "int(ceil($elements(rownum)/2))"];%>
<if @col@ eq 1>
<div style="color: @elements.color@;font-size:7pt;">@elements.label;noquote@</div>
</if>
</multiple>
</td></tr>
</table>
resources/diagram/pie.adp 0 → 100755
View file @ eedfe4c7
<SCRIPT Language="JavaScript">
function MouseOver(i) { P[i].MoveTo("","",10); }
function MouseOut(i) { P[i].MoveTo("","",0); }
</SCRIPT>
<% set index 0 %>
<div style='position:relative;top:@diagram_properties.top@px;height:@diagram_properties.height@px;width:@diagram_properties.width@px;float:left;'>
<SCRIPT Language="JavaScript">
P = new Array();
document.open();
var y0=0;var sum=@diagram_properties.sum@;var i=0;
_BFont="font-family:Verdana;font-weight:bold;font-size:7pt;line-height:7pt;color:#000000;"
<noparse>
<multiple name="@diagram_properties.multirow@">
</noparse>
<multiple name="elements">
<% set col [expr "$elements(rownum) % 2"]; %>
<if @col@ ne 0>
var x='<diagramelement name="@elements.name@"/>';
</if><else>
v=<diagramelement name="@elements.name@"/>;
i=i+1;
var y=y0 + v;
var q1 = y0/sum;
var q2 = y/sum;
if (q2 <= 0) {q2=1;}
var r = Math.round(Math.random()*255);
var g = Math.round(Math.random()*255);
var b = Math.round(Math.random()*255);
var color = 'rgb('+r+','+g+','+b+')';
var left = @diagram_properties.left@+@diagram_properties.width@/2;
var top = @diagram_properties.top@+@diagram_properties.height@/2;
var radius = @diagram_properties.width@/2;
var v1 = q1*360;
var v2 = q2*360;
P[i]=new Pie(left,top,0,radius,v1,v2,color);
var left = left + radius+25;
var top = top-@diagram_properties.height@/3+i*15;
var bottom = top +15;
new Bar(left,top,left+60,bottom,color,x,"#FF0000","","void(0)","MouseOver("+i+")","MouseOut("+i+")");
y0=y0+<diagramelement name="@elements.name@"/>;
</else>
</multiple>
<noparse>
</multiple>
</noparse>
document.close();
</SCRIPT>
</div>
sql/oracle/diagram-create.sql 0 → 100755
View file @ eedfe4c7
-- The following table is only created for illustration. You can remove it on a productive site.
-- Table: diagram_dummy_logs
CREATE TABLE diagram_dummy_logs
(
x1 timestamptz,
y1 int4,
x2 timestamptz,
y2 int4,
x3 timestamptz,
y3 int4
);
-- Some dummy data
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:11.868964+01',2,'2005-11-21 23:06:11.868964+01',1.0,'2005-11-21 23:06:10.868964+01',2);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:12.913197+01',2,'2005-11-21 23:06:12.913197+01',0,'2005-11-21 23:06:13.913197+01',3);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:13.207786+01',3,'2005-11-21 23:06:13.207786+01',2,'2005-11-21 23:06:16.207786+01',8);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:14.358372+01',2,'2005-11-21 23:06:14.358372+01',3,'2005-11-21 23:06:19.358372+01',8);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:15.489034+01',3,'2005-11-21 23:06:15.489034+01',7,'2005-11-21 23:06:21.489034+01',6);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:16.614377+01',3,'2005-11-21 23:06:16.614377+01',3,'2005-11-21 23:06:23.614377+01',0);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:17.735309+01',4,'2005-11-21 23:06:17.735309+01',6,'2005-11-21 23:06:26.735309+01',8);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:18.453809+01',4,'2005-11-21 23:06:18.453809+01',1,'2005-11-21 23:06:29.453809+01',8);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:19.186141+01',4,'2005-11-21 23:06:20.186141+01',6,'2005-11-21 23:06:31.186141+01',3);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:20.077621+01',5,'2005-11-21 23:06:22.077621+01',8,'2005-11-21 23:06:33.077621+01',6);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:21.362135+01',5,'2005-11-21 23:06:23.362135+01',5,'2005-11-21 23:06:36.362135+01',7);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:22.700218+01',5,'2005-11-21 23:06:25.700218+01',0,'2005-11-21 23:06:39.700218+01',0);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:23.850676+01',4,'2005-11-21 23:06:26.850676+01',6,'2005-11-21 23:06:41.850676+01',4);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:24.041068+01',5,'2005-11-21 23:06:27.041068+01',7,'2005-11-21 23:06:43.041068+01',6);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:25.171647+01',5,'2005-11-21 23:06:28.171647+01',0,'2005-11-21 23:06:46.171647+01',6);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:26.317253+01',6,'2005-11-21 23:06:29.317253+01',4,'2005-11-21 23:06:49.317253+01',9);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:27.423928+01',6,'2005-11-21 23:06:30.423928+01',3,'2005-11-21 23:06:51.423928+01',5);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:28.528976+01',7,'2005-11-21 23:06:31.528976+01',2,'2005-11-21 23:06:53.528976+01',6);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:29.557702+01',7,'2005-11-21 23:06:32.557702+01',7,'2005-11-21 23:06:56.557702+01',2);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:30.708037+01',5,'2005-11-21 23:06:33.708037+01',5.5,'2005-11-21 23:06:59.708037+01',9);
sql/oracle/diagram-drop.sql 0 → 100755
View file @ eedfe4c7
DROP TABLE diagram_dummy_logs;
\ No newline at end of file
sql/postgresql/diagram-create.sql 0 → 100755
View file @ eedfe4c7
-- The following table is only created for illustration. You can remove it on a productive site.
-- Table: diagram_dummy_logs
CREATE TABLE diagram_dummy_logs
(
x1 timestamptz,
y1 int4,
x2 timestamptz,
y2 int4,
x3 timestamptz,
y3 int4
);
-- Some dummy data
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:11.868964+01',2,'2005-11-21 23:06:11.868964+01',1.0,'2005-11-21 23:06:10.868964+01',2);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:12.913197+01',2,'2005-11-21 23:06:12.913197+01',0,'2005-11-21 23:06:13.913197+01',3);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:13.207786+01',3,'2005-11-21 23:06:13.207786+01',2,'2005-11-21 23:06:16.207786+01',8);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:14.358372+01',2,'2005-11-21 23:06:14.358372+01',3,'2005-11-21 23:06:19.358372+01',8);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:15.489034+01',3,'2005-11-21 23:06:15.489034+01',7,'2005-11-21 23:06:21.489034+01',6);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:16.614377+01',3,'2005-11-21 23:06:16.614377+01',3,'2005-11-21 23:06:23.614377+01',0);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:17.735309+01',4,'2005-11-21 23:06:17.735309+01',6,'2005-11-21 23:06:26.735309+01',8);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:18.453809+01',4,'2005-11-21 23:06:18.453809+01',1,'2005-11-21 23:06:29.453809+01',8);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:19.186141+01',4,'2005-11-21 23:06:20.186141+01',6,'2005-11-21 23:06:31.186141+01',3);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:20.077621+01',5,'2005-11-21 23:06:22.077621+01',8,'2005-11-21 23:06:33.077621+01',6);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:21.362135+01',5,'2005-11-21 23:06:23.362135+01',5,'2005-11-21 23:06:36.362135+01',7);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:22.700218+01',5,'2005-11-21 23:06:25.700218+01',0,'2005-11-21 23:06:39.700218+01',0);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:23.850676+01',4,'2005-11-21 23:06:26.850676+01',6,'2005-11-21 23:06:41.850676+01',4);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:24.041068+01',5,'2005-11-21 23:06:27.041068+01',7,'2005-11-21 23:06:43.041068+01',6);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:25.171647+01',5,'2005-11-21 23:06:28.171647+01',0,'2005-11-21 23:06:46.171647+01',6);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:26.317253+01',6,'2005-11-21 23:06:29.317253+01',4,'2005-11-21 23:06:49.317253+01',9);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:27.423928+01',6,'2005-11-21 23:06:30.423928+01',3,'2005-11-21 23:06:51.423928+01',5);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:28.528976+01',7,'2005-11-21 23:06:31.528976+01',2,'2005-11-21 23:06:53.528976+01',6);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:29.557702+01',7,'2005-11-21 23:06:32.557702+01',7,'2005-11-21 23:06:56.557702+01',2);
INSERT INTO diagram_dummy_logs VALUES ('2005-11-21 23:06:30.708037+01',5,'2005-11-21 23:06:33.708037+01',5.5,'2005-11-21 23:06:59.708037+01',9);
sql/postgresql/diagram-drop.sql 0 → 100755
View file @ eedfe4c7
DROP TABLE diagram_dummy_logs;
\ No newline at end of file
tcl/diagram-procs.tcl 0 → 100755
View file @ eedfe4c7
This diff is collapsed.
www/doc/cockpit.adp 0 → 100755
View file @ eedfe4c7
<diagram name="dia1"></diagram>
www/doc/cockpit.tcl 0 → 100755
View file @ eedfe4c7
ad_page_contract {
} {
{width 100}
{height 100}
{size 2}
{color "ff5533"}
{csv ""}
{template cockpit}
{limit 1}
{top 100}
{left 100}
}
set query "select
y3 as x1, case when random()>0.3 then (-1*(random()*y3/10)+y3) else ((random()*y3/10)+y3) end as x2,
y3 as x3, case when random()>0.3 then (-1*(random()*y3/10)+y3) else ((random()*y3/10)+y3) end as x4
from diagram_dummy_logs
order by random()
limit $limit"
db_multirow datasource select_objects $query
template::diagram::create \
-name dia1 \
-multirow datasource \
-title "System Monitoring" \
-left $left -top $top -right $width -bottom $height \
-template $template \
-elements {
d1 {
label "Monitor"
color "\#ff5533"
size $size
}
d2 {
label "CPU1"
color "\#$color"
size $size
}
}
if {[exists_and_not_null csv]} {
template::diagram::write_output -name dia1
}
ad_return_template
www/doc/curve.adp 0 → 100755
View file @ eedfe4c7
<diagram name="dia1"></diagram>
www/doc/curve.tcl 0 → 100755
View file @ eedfe4c7
ad_page_contract {
} {
{d1 1}
{d2 2}
{width 480}
{height 150}
{dot_type 1}
{size 2}
{d1_color "ff5533"}
{d2_color "aaee33"}
{csv ""}
{x_scale 2}
{y_scale 1}
{template curve}
{limit 20}
{top 40}
{left 100}
}
set query "select
to_char(x1, 'YYYY,MM,DD,HH24,MI,SS') as x1,
y1,
to_char(x2, 'YYYY,MM,DD,HH24,MI,SS') as x2,
y2,
to_char(x3, 'YYYY,MM,DD,HH24,MI,SS') as x3,
y3
from diagram_dummy_logs
order by x1
limit $limit"
db_multirow datasource select_objects $query
template::diagram::create \
-name dia1 \
-multirow datasource \
-title "Monitoring - Dummy" \
-x_label "Time" \
-y_label "Count" \
-left $left -top $top -right $width -bottom $height \
-scales "$x_scale $y_scale" \
-template $template \
-elements {
d1 {
color "#$d1_color"
type 1
label "Objects"
size 7
dot_type 3
}
d2 {
color "#$d2_color"
type 4
label "Memory"
size 1
dot_type 3
}
d3 {
color "#c0c0c0"
type 3
label "Disc Usage"
size 4
dot_type 4
}
}
if {[exists_and_not_null csv]} {
template::diagram::write_output -name dia1
}
ad_return_template
\ No newline at end of file
www/doc/index.adp 0 → 100755
View file @ eedfe4c7
<master>
<property name="header_stuff"><SCRIPT Language="JavaScript" src="/resources/diagram/diagram/diagram.js"></SCRIPT></property>
<h2>Introduction Diagram v0.2b</h2>
by <a href="mailto:nima.mazloumi@gmx.de">Nima Mazloumi</a>, and with help of <a href="mailto:lutz.tautenhahn@lutanho.net">Lutz Tautenhahn</a>
<p>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 <a href="/api-doc/proc-view?proc=template::diagram::create">template::diagram::create</a> is called since the
column names are retrieved dynamically.
</p>
<p>
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.
</p>
<h2>Extending the Diagram Builder</h2>
<p>The rendering is taking place in
the templates defined under resources/diagram/..<br/>. 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 <a href="/api-doc/proc-view?proc=template::diagram::create">template::diagram::create</a>.
</p>
</p>
<h2>Examples</h2>
<p>You need to run the <code>diagram-create.sql</code> to view the examples
below. It will create a table with dummy data. You can remove the table again
using <code>diagram-drop.sql</code>.</p>
<p>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.
</p>
<a class="button" href="index?csv=1">CSV</a><include src="pie">
<include src="curve">
<include src="cockpit">
<h2>Limitations</h2>
<p>In order to make this builder easier to be extended the Javascript specific
parts have to be removed:
<ul>
<li>Affected are the procs: <code>template::diagram::prepare_value</code>,
<code>template::diagram::update_borders</code> and
<code>template::diagram::set_borders</code> which nead a clean up. Maybe
moving these information into the templates would be best.
<li>Date and Timestamp based values from the database have to be formatted in
a special way. You must use <code>to_char(mydate, 'YYYY,MM,DD[,HH24][,MI][,SS]')</code> in
your sql query to return a meaningful value. As you can see some elements are
optional. For details please view the <code>Date</code> and <code>UTC</code>
objects documentation for JavaScript.
</ul>
</p>
<h2>Future Work</h2>
<p>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:
<ul>
<li>Give support for GNUPlot - a very powerful engine that has support for all
diagram types including world maps...
<li>Allow the definition of scales. Currently a developer would need to touch
the Javascript Library to add new scales types
<li>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...
<li>Provide an XoTCL version in order to support different classes of diagrams
and to improve reusablity.
</ul>
\ No newline at end of file
www/doc/pie.adp 0 → 100755
View file @ eedfe4c7
<diagram name="dia1"></diagram>
www/doc/pie.tcl 0 → 100755
View file @ eedfe4c7
ad_page_contract {
} {
{d1 1}
{d2 2}
{width 80}
{height 80}
{dot_type 1}
{size 2}
{d1_color "ff5533"}
{d2_color "aaee33"}
{csv ""}
{x_scale 2}
{y_scale 1}
{template pie}
{limit 2}
{top 0}
{left 0}
}
set query "select
to_char(x1, 'HH24:MI:SS') as x1,
y1
from diagram_dummy_logs
order by x1
limit $limit"
db_multirow datasource select_objects $query
template::diagram::create \
-name dia1 \
-multirow datasource \
-title "Objects" \
-x_label "Time" \
-y_label "Count" \
-left $left -top $top -right $width -bottom $height \
-scales "$x_scale $y_scale" \
-template $template \
-elements {
d1 {
color "#$d1_color"
label "Pie 1"
size $size
}
}
if {[exists_and_not_null csv]} {
template::diagram::write_output -name dia1
}
ad_return_template
\ No newline at end of file
www/resources/diagram/area_object.html 0 → 100755
View file @ eedfe4c7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JavaScript Diagram Builder - The Area object</title>
<link rel=stylesheet type="text/css" href="diagram.css" />
<SCRIPT Language="JavaScript">if ((document.layers)&&(history.length==1)) location.href=location.href+"#";</SCRIPT>
<SCRIPT Language="JavaScript" src="diagram.js"></SCRIPT>
</head>
<body>
<DIV STYLE="position:absolute; top:0px"></DIV>
<TABLE NOBORDER CELLPADDING=2 CELLSPACING=2 WIDTH=720><TR><TD>
<H3>JavaScript Diagram Builder - The Area object</H3>
</TD></TR><TR><TD>
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.
</TD></TR></TABLE>
<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>
<DIV STYLE="position:absolute; top:390px">
<B>This diagram was generated by</B><BR /><BR />
&lt;SCRIPT Language="JavaScript"&gt;<BR />
document.open();<BR />
var D=new Diagram();<BR />
D.SetFrame(80, 160, 520, 360);<BR />
D.SetBorder(Date.UTC(2000,11,15,0,0,0), Date.UTC(2001,11,15,0,0,0), -300, 1100);<BR />
D.SetText("","", "profit/loss per day during the last year");<BR />
D.XScale=4;<BR />
D.YScale=" $";<BR />
D.Draw("#FFFFCC", "#000000", false);<BR />
var i, t0, t1, P0, P1, base=D.ScreenY(0);<BR />
t1=D.ScreenX(Date.UTC(2000,11,15,0,0,0));<BR />
P1=0;<BR />
for (i=0; i<12; i++)<BR />
{ t0=t1; P0=P1;<BR />
&nbsp;&nbsp;t1=D.ScreenX(Date.UTC(2001,i,15,0,0,0));<BR />
&nbsp;&nbsp;P1+=(i/5-Math.random())*100;<BR />
&nbsp;&nbsp;new Area(t0, D.ScreenY(P0), t1, D.ScreenY(P1), "ff0000", base, "profit/loss per day");<BR />
}<BR />
document.close();<BR />
&lt;/SCRIPT&gt;
<BR /><BR />
<B>You can use the following methods:</B>
<UL>
<LI><B>var A = new Area(theX0, theY0, theX1, theY1, theColor, theBase[, theTooltipText[,<BR />
theOnClickAction[, theOnMouseoverAction[, theOnMouseoutAction]]]])</B><BR />
//Constructor and Display, requires images o_*, d_*, p_* q_* and b_* (*=theColor+".gif")</LI>
<LI><B>A.SetColor(theColor)</B> //Color</LI>
<LI><B>A.SetVisibility(isVisible)</B> //Show or Hide</LI>
<LI><B>A.SetTitle(theTitle)</B> //TooltipText</LI>
<LI><B>A.MoveTo(theLeft, theTop)</B> //Move</LI>
<LI><B>A.ResizeTo(theX0, theY0, theX1, theY1)</B> //Resize</LI>
<LI><B>A.Delete()</B> //Delete DIV object of A from the document</LI>
<LI><B>delete A</B> //Destructor</LI>
</UL><BR />
<BR />
<TABLE NOBORDER CELLPADDING=2 CELLSPACING=2 WIDTH=720><TR>
<TD ALIGN=LEFT><A HREF="line_object.html">&#171; The Line object</A></TD>
<TD ALIGN=RIGHT><A HREF="arrow_object.html">The Arrow object &#187;</A></TD>
</TR></TABLE>
</DIV>
</body>
</html>
\ No newline at end of file
www/resources/diagram/arrow_object.html 0 → 100755
View file @ eedfe4c7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JavaScript Diagram Builder - The Arrow object</title>
<link rel=stylesheet type="text/css" href="diagram.css" />
<SCRIPT Language="JavaScript">if ((document.layers)&&(history.length==1)) location.href=location.href+"#";</SCRIPT>
<SCRIPT Language="JavaScript" src="diagram.js"></SCRIPT>
</head>
<body>
<DIV STYLE="position:absolute; top:0px"></DIV>
<TABLE NOBORDER CELLPADDING=2 CELLSPACING=2 WIDTH=720><TR><TD>
<H3>JavaScript Diagram Builder - The Arrow object</H3>
</TD></TR><TR><TD>
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.
</TD></TR></TABLE>
<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>
<DIV STYLE="position:absolute; top:140px; left:360px; width:360px">
<B>This arrows were generated by</B><BR /><BR />
&lt;SCRIPT Language="JavaScript"&gt;<BR />
document.open();<BR />
var D=new Diagram();<BR />
D.SetFrame(60, 140, 300, 380);<BR />
D.SetBorder(-1, 1, -1, 1);<BR />
var i, x, y;<BR />
for (i=0; i<11; i++)<BR />
{ x=Math.sin((i+0.5)*2*Math.PI/11);<BR />
&nbsp;&nbsp;y=Math.cos((i+0.5)*2*Math.PI/11);<BR />
&nbsp;&nbsp;new Arrow(D.ScreenX(x/3), D.ScreenY(y/3), D.ScreenX(x), D.ScreenY(y), "#0000ff", i%5+1);<BR />
}<BR />
document.close();<BR />
&lt;/SCRIPT&gt;
</DIV>
<DIV STYLE="position:absolute; top:390px;">
<BR /><BR />
<B>You can use the following methods:</B>
<UL>
<LI><B>var A = new Arrow(theX0, theY0, theX1, theY1, theColor[, theSize[, theTooltipText[,<BR />
theOnClickAction[, theOnMouseoverAction[, theOnMouseoutAction]]]]])</B>
//Constructor and Display</LI>
<LI><B>A.SetColor(theColor)</B> //Color</LI>
<LI><B>A.SetVisibility(isVisible)</B> //Show or Hide</LI>
<LI><B>A.SetTitle(theTitle)</B> //TooltipText</LI>
<LI><B>A.MoveTo(theLeft, theTop)</B> //Move</LI>
<LI><B>A.ResizeTo(theX0, theY0, theX1, theY1)</B> //Resize</LI>
<LI><B>A.Delete()</B> //Delete DIV object of A from the document</LI>
<LI><B>delete A</B> //Destructor</LI>
</UL><BR />
<BR />
<TABLE NOBORDER CELLPADDING=2 CELLSPACING=2 WIDTH=720><TR>
<TD ALIGN=LEFT><A HREF="area_object.html">&#171; The Area object</A></TD>
<TD ALIGN=RIGHT><A HREF="pie_object.html">The Pie object &#187;</A></TD>
</TR></TABLE>
</DIV>
</body>
</html>
\ No newline at end of file
www/resources/diagram/bar_object.html 0 → 100755
View file @ eedfe4c7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JavaScript Diagram Builder - The Bar object</title>
<link rel=stylesheet type="text/css" href="diagram.css" />
<SCRIPT Language="JavaScript">if ((document.layers)&&(history.length==1)) location.href=location.href+"#";</SCRIPT>
<SCRIPT Language="JavaScript" src="diagram.js"></SCRIPT>
</head>
<body>
<DIV STYLE="position:absolute; top:0px"></DIV>
<TABLE NOBORDER CELLPADDING=2 CELLSPACING=2 WIDTH=720><TR><TD>
<H3>JavaScript Diagram Builder - The Bar object</H3>
</TD></TR><TR><TD>
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.
</TD></TR></TABLE>
<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;
var i, j, y;
D.Draw("#FFFF80", "#004080", false);
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>
<DIV STYLE="position:absolute; top:390px">
<B>This diagram was generated by</B><BR /><BR />
&lt;SCRIPT Language="JavaScript"&gt;<BR />
document.open();<BR />
var D=new Diagram();<BR />
D.SetFrame(80, 160, 520, 360);<BR />
D.SetBorder(-1, 13, 0, 1000);<BR />
D.SetText("","", "Website Hits 2001");<BR />
D.XScale=0;<BR />
D.Draw("#FFFF80", "#004080", false);<BR />
var i, j, y;<BR />
Month=new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");<BR />
for (i=0; i<12; i++)<BR />
{ y=500+Math.random()*400;<BR />
&nbsp;&nbsp;j=D.ScreenX(i+0.5);<BR />
&nbsp;&nbsp;if (i%2==0) new Bar(j-15, D.ScreenY(y), j+15, D.ScreenY(0), "#0000FF", Month[i], "#FFFFFF", "Hits per month");<BR />
&nbsp;&nbsp;else new Bar(j-15, D.ScreenY(y), j+15, D.ScreenY(0), "#FF0000", Month[i], "#000000", "Hits per month");<BR />
}<BR />
document.close();<BR />
&lt;/SCRIPT&gt;
<BR /><BR />
<B>You can use the following methods:</B>
<UL>
<LI><B>var B = new Bar(theLeft, theTop, theRight, theBottom, theDrawColor, theText, theTextColor<BR />
[, theTooltipText[, theOnClickAction[, theOnMouseoverAction[, theOnMouseoutAction]]]])</B><BR />
//Constructor and Display, if theText="" then min_height=1 else min_height=12<BR />
//if you want to use B.SetText() later, then you must initialize with a Text<>""</LI>
<LI><B>B.SetColor(theColor)</B> //Color</LI>
<LI><B>B.SetVisibility(isVisible)</B> //Show or Hide</LI>
<LI><B>B.SetText(theText)</B> //Text or Image</LI>
<LI><B>B.SetTitle(theTitle)</B> //TooltipText</LI>
<LI><B>B.MoveTo(theLeft, theTop)</B> //Move</LI>
<LI><B>B.ResizeTo(theLeft, theTop, theWidth, theHeight)</B> //Resize</LI>
<LI><B>B.Delete()</B> //Delete DIV object of B from the document</LI>
<LI><B>delete B</B> //Destructor</LI>
</UL>
<B>Before drawing, you can change the text style:</B>
<BR />
<B>_BFont=<I>theFont;</I></B><BR />
_BFont is a global variable, which is valid for all Bar and Box objects.
The default setting is<BR />
<B>_BFont="font-family:Verdana;font-weight:bold;font-size:10pt;line-height:13pt;"</B>.
<BR /><BR />
<BR />
<TABLE NOBORDER CELLPADDING=2 CELLSPACING=2 WIDTH=720><TR>
<TD ALIGN=LEFT><A HREF="diagram_object.html">&#171; The Diagram object</A></TD>
<TD ALIGN=RIGHT><A HREF="box_object.html">The Box object &#187;</A></TD>
</TR></TABLE>
</DIV>
</body>
</html>
\ No newline at end of file
www/resources/diagram/blank.html 0 → 100755
View file @ eedfe4c7
<html>
<head>
</head>
<body>
</body>
</html>
\ No newline at end of file
www/resources/diagram/box_object.html 0 → 100755
View file @ eedfe4c7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JavaScript Diagram Builder - The Box object</title>
<link rel=stylesheet type="text/css" href="diagram.css" />
<SCRIPT Language="JavaScript">if ((document.layers)&&(history.length==1)) location.href=location.href+"#";</SCRIPT>
<SCRIPT Language="JavaScript" src="diagram.js"></SCRIPT>
</head>
<body>
<DIV STYLE="position:absolute; top:0px"></DIV>
<TABLE NOBORDER CELLPADDING=2 CELLSPACING=2 WIDTH=720><TR><TD>
<H3>JavaScript Diagram Builder - The Box object</H3>
</TD></TR><TR><TD>
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 "".
</TD></TR></TABLE>
<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>
<DIV STYLE="position:absolute; top:390px">
<B>This diagram was generated by</B><BR /><BR />
&lt;SCRIPT Language="JavaScript"&gt;<BR />
document.open();<BR />
var D=new Diagram();<BR />
D.SetFrame(80, 160, 520, 360);<BR />
D.SetBorder(Date.UTC(2000,11,15,0,0,0), Date.UTC(2001,11,15,0,0,0), 0, 1000);<BR />
D.SetText("","", "Website Hits 2001");<BR />
D.XScale=4;<BR />
D.Draw("", "#004080", false);<BR />
var i, j, y, y0=D.ScreenY(0);<BR />
for (i=0; i<12; i++)<BR />
{ y=D.ScreenY(500+Math.random()*400);<BR />
&nbsp;&nbsp;j=D.ScreenX(Date.UTC(2001,i,1,0,0,0));<BR />
&nbsp;&nbsp;if (i%2==0) new Box(j-12, y, j+12, y0, "#0000FF", "v_blue.gif", "#FFFFFF", 1, "#000000");<BR />
&nbsp;&nbsp;else new Box(j-12, y, j+12, y0, "#FF0000", "v_red.gif", "#000000", 1, "#000000");<BR />
}<BR />
document.close();<BR />
&lt;/SCRIPT&gt;
<BR /><BR />
<B>You can use the following methods:</B>
<UL>
<LI><B>var B = new Box(theLeft, theTop, theRight, theBottom, theDrawColor, theText, theTextColor<BR />
[, theBorderWidth[, theBorderColor[, theTooltipText[, theOnClickAction[,<BR /> theOnMouseoverAction[, theOnMouseoutAction]]]]]])</B><BR />
//Constructor and Display, if theText="" then min_height=1 else min_height=12<BR />
//if you want to use B.SetText() later, then you must initialize with a Text<>""</LI>
<LI><B>B.SetColor(theColor)</B> //Color</LI>
<LI><B>B.SetVisibility(isVisible)</B> //Show or Hide</LI>
<LI><B>B.SetText(theText)</B> //Text or Image</LI>
<LI><B>B.SetTitle(theTitle)</B> //TooltipText</LI>
<LI><B>B.MoveTo(theLeft, theTop)</B> //Move</LI>
<LI><B>B.ResizeTo(theLeft, theTop, theWidth, theHeight)</B> //Resize</LI>
<LI><B>B.Delete()</B> //Delete DIV object of B from the document</LI>
<LI><B>delete B</B> //Destructor</LI>
</UL>
<B>Before drawing, you can change the text style:</B>
<BR />
<B>_BFont=<I>theFont;</I></B><BR />
_BFont is a global variable, which is valid for all Bar and Box objects.
The default setting is<BR />
<B>_BFont="font-family:Verdana;font-weight:bold;font-size:10pt;line-height:13pt;"</B>.
<BR /><BR />
<BR />
<TABLE NOBORDER CELLPADDING=2 CELLSPACING=2 WIDTH=720><TR>
<TD ALIGN=LEFT><A HREF="bar_object.html">&#171; The Bar object</A></TD>
<TD ALIGN=RIGHT><A HREF="dot_object.html">The Dot object &#187;</A></TD>
</TR></TABLE>
</DIV>
</body>
</html>
\ No newline at end of file
www/resources/diagram/browser_support.html 0 → 100755
View file @ eedfe4c7
This diff is collapsed.
www/resources/diagram/diagram.js 0 → 100755
View file @ eedfe4c7
This diff is collapsed.
www/resources/diagram/diagram_dom.js 0 → 100755
View file @ eedfe4c7
This diff is collapsed.
www/resources/diagram/diagram_nav.js 0 → 100755
View file @ eedfe4c7
This diff is collapsed.
www/resources/diagram/diagram_object.html 0 → 100755
View file @ eedfe4c7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JavaScript Diagram Builder - The Diagram object</title>
<link rel=stylesheet type="text/css" href="diagram.css" />
<SCRIPT Language="JavaScript">if ((document.layers)&&(history.length==1)) location.href=location.href+"#";</SCRIPT>
<SCRIPT Language="JavaScript" src="diagram.js"></SCRIPT>
</head>
<body>
<DIV STYLE="position:absolute; top:0px"></DIV>
<TABLE NOBORDER CELLPADDING=2 CELLSPACING=2 WIDTH=720><TR><TD>
<H3>JavaScript Diagram Builder - The Diagram object</H3>
</TD></TR><TR><TD>
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.
</TD></TR></TABLE>
<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>
<DIV STYLE="position:absolute; top:160px; left:440px; width:280px;">
<B>This diagram was generated by</B><BR />
&lt;SCRIPT Language="JavaScript"&gt;<BR />
document.open();<BR />
var D=new Diagram();<BR />
D.SetFrame(80, 160, 420, 360);<BR />
D.SetBorder(10, 50, 0, 4);<BR />
D.SetText("X-Label","Y-Label","Title");<BR />
D.SetGridColor("#44CC44");<BR />
D.Draw("#80FF80","#0000FF",true,"Click on me !","DiagramClick()");<BR />
document.close();<BR />
function DiagramClick()<BR />
{ alert("Use your own function here."); }<BR />
&lt;/SCRIPT&gt;
</DIV>
<DIV STYLE="position:absolute; top:390px">
<B>You can use the following methods:</B>
<UL>
<LI><B>var D = new Diagram()</B> //Constructor</LI>
<LI><B>D.SetFrame(theLeft, theTop, theRight, theBottom)</B> //Screen</LI>
<LI><B>D.SetBorder(theLeftX, theRightX, theBottomY, theTopY)</B> //World</LI>
<LI><B>D.SetText(theScaleX, theScaleY, theTitle)</B> //Labels (optional)</LI>
<LI><B>D.ScreenX(theRealX)</B> //Coordinate transformation world->screen</LI>
<LI><B>D.ScreenY(theRealY)</B> //Coordinate transformation world->screen</LI>
<LI><B>D.RealX(theScreenX)</B> //Coordinate transformation screen->world</LI>
<LI><B>D.RealY(theScreenY)</B> //Coordinate transformation screen->world</LI>
<LI><B>D.GetXGrid()</B> //returns array, which contains min, delta and max of the X grid</LI>
<LI><B>D.GetYGrid()</B> //returns array, which contains min, delta and max of the Y grid</LI>
<LI><B>D.SetGridColor(theGridColor[, theSubGridColor])</B> //Colors of X and Y grid lines</LI>
<LI><B>D.SetXGridColor(theGridColor[, theSubGridColor])</B> //Colors of X grid lines</LI>
<LI><B>D.SetYGridColor(theGridColor[, theSubGridColor])</B> //Colors of Y grid lines</LI>
<LI><B>D.Draw(theDrawColor, theTextColor, isScaleText[, theTooltipText[, theOnClickAction
[, theOnMouseoverAction[, theOnMouseoutAction]]]])</B> //Display,
theDrawColor can be an image</LI>
<LI><B>D.SetVisibility(isVisible)</B> //Show or Hide</LI>
<LI><B>D.SetTitle(theTitle)</B> //TooltipText</LI>
<LI><B>D.Delete()</B> //Delete DIV object of D from the document</LI>
<LI><B>delete D</B> //Destructor</LI>
</UL>
<B>Before drawing, you can set the following properties:</B>
<UL>
<LI><B>D.XScale</B> // 0 = no scale; 1 = numeric (default); 2, 3, ... = date/time; string = numeric+unit
<BR />"function <I>FunctionName</I>" = <I>FunctionName</I>(ScaleValue)</LI>
<LI><B>D.YScale</B> // 0 = no scale; 1 = numeric (default); 2, 3, ... = date/time; string = numeric+unit
<BR />"function <I>FunctionName</I>" = <I>FunctionName</I>(ScaleValue)</LI>
<LI><B>D.XScalePosition</B> // "bottom" (default), "botom-left", "bottom-right", "top", "top-left", "top-right"</LI>
<LI><B>D.YScalePosition</B> // "left" (default), "left-top", "left-bottom", "right", "right-top", "right-bottom"</LI>
<LI><B>D.XGridDelta</B> //Grid interval in X-direction, if it is 0 (default) it will be detected automatically</LI>
<LI><B>D.YGridDelta</B> //Grid interval in Y-direction, if it is 0 (default) it will be detected automatically</LI>
<LI><B>D.XSubGrids</B> //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</LI>
<LI><B>D.YSubGrids</B> //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</LI>
<LI><B>D.Font</B> //Text style, default = "font-family:Verdana;font-weight:normal;font-size:10pt;line-height:13pt;"</LI>
</UL>
<B>After calling D.GetXGrid() / D.GetYGrid() you can read:</B>
<UL>
<LI><B>D.XGrid[0]</B>, <B>D.XGrid[1]</B> and <B>D.XGrid[2]</B> // min, delta and max of the X grid</LI>
<LI><B>D.YGrid[0]</B>, <B>D.YGrid[1]</B> and <B>D.YGrid[2]</B> // min, delta and max of the Y grid</LI>
</UL>
Because of a bug in Netscape 4.x you must add the following code in the web page<BR />
<B>before using the diagram objects:</B><BR />
<B>&lt;DIV STYLE="position:absolute; top:0px"&gt;&lt;/DIV&gt;</B><BR />
Also for Netscape 4.x the file <B>transparent.gif</B> must be in the directory of the web page.<BR />
<BR />
If you want to draw the diagram into another window, you can specify the target window:<BR />
<B>_DiagramTarget=<I>theTargetWindow;</I></B><BR />
_DiagramTarget is a global variable, which is valid within the entire document.<BR />
The default _DiagramTarget is the window object of the current document.
<form><input type=button value="draw a diagram in a new window" onClick="javascript:NewWindow()"></form>
<SCRIPT language="JavaScript1.2">
function MyXScale(nn)
{ 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();
//Important! For IE6+ the DOCTYPE and HTML schema of the DiagramTarget must be the same as of the current window!
writeln("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">");
writeln("<HTML xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\">");
writeln("<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, function-scale and sub-grid");
D2.SetGridColor("#cccccc", "#eeddcc");
D2.Draw("#FFEECC", "#336699", false, "Click on me !", "opener.DiagramClick()");
writeln("</BODY></HTML>");
close();
}
}
</SCRIPT>
<B>The Diagram in the new window was generated by:</B><BR /><BR />
&lt;SCRIPT Language="JavaScript"&gt;<BR />
function MyXScale(nn)<BR />
{ var tt=new Array("left", "center", "right");<BR />
&nbsp;&nbsp;return("&lt;b&gt;"+tt[nn]+"&lt;/b&gt;");<BR />
}<BR />
function NewWindow()<BR />
{ _DiagramTarget=window.open("","",<BR />
&nbsp;&nbsp;"width=460,height=300,menubar=no,locationbar=no,resizable=yes,status=no,scrollbars=no");<BR />
&nbsp;&nbsp;with (_DiagramTarget.document)<BR />
&nbsp;&nbsp;{ open();<BR />
&nbsp;&nbsp;&nbsp;&nbsp;writeln("&lt;HTML>&lt;HEAD&gt;&lt;TITLE&gt;Diagram in a new window&lt;/TITLE&gt;&lt;/HEAD&gt;&lt;BODY&gt;");<BR />
&nbsp;&nbsp;&nbsp;&nbsp;var D2=new Diagram();<BR />
&nbsp;&nbsp;&nbsp;&nbsp;D2.SetFrame(60, 40, 400, 240);<BR />
&nbsp;&nbsp;&nbsp;&nbsp;D2.SetBorder(0, 3, 0, 4);<BR />
&nbsp;&nbsp;&nbsp;&nbsp;D2.XGridDelta=1;<BR />
&nbsp;&nbsp;&nbsp;&nbsp;D2.XScale="function MyXScale";<BR />
&nbsp;&nbsp;&nbsp;&nbsp;D2.XScalePosition="top-right";<BR />
&nbsp;&nbsp;&nbsp;&nbsp;D2.YSubGrids=1;<BR />
&nbsp;&nbsp;&nbsp;&nbsp;D2.Font="font-family:Verdana;font-weight:normal;font-size:8pt;line-height:13pt;";<BR />
&nbsp;&nbsp;&nbsp;&nbsp;D2.SetText("","", "Diagram with small font and function-scale");<BR />
&nbsp;&nbsp;&nbsp;&nbsp;D2.SetGridColor("#cccccc", "#eeddcc");<BR />
&nbsp;&nbsp;&nbsp;&nbsp;D2.Draw("#FFEECC", "#336699", false, "Click on me !", "opener.DiagramClick()");<BR />
&nbsp;&nbsp;&nbsp;&nbsp;writeln("&lt;/BODY&gt;&lt;/HTML&gt;");<BR />
&nbsp;&nbsp;&nbsp;&nbsp;close();<BR />
&nbsp;&nbsp;}<BR />
}<BR />
&lt;/SCRIPT&gt;
<BR /><BR /><BR />
<TABLE NOBORDER CELLPADDING=2 CELLSPACING=2 WIDTH=720><TR>
<TD ALIGN=LEFT><A HREF="introduction.html">&#171; Introduction</A></TD>
<TD ALIGN=RIGHT><A HREF="bar_object.html">The Bar object &#187;</A></TD>
</TR></TABLE>
</DIV>
</body>
</html>
\ No newline at end of file
www/resources/diagram/dot_object.html 0 → 100755
View file @ eedfe4c7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JavaScript Diagram Builder - The Dot object</title>
<link rel=stylesheet type="text/css" href="diagram.css" />
<SCRIPT Language="JavaScript">if ((document.layers)&&(history.length==1)) location.href=location.href+"#";</SCRIPT>
<SCRIPT Language="JavaScript" src="diagram.js"></SCRIPT>
</head>
<body>
<DIV STYLE="position:absolute; top:0px"></DIV>
<TABLE NOBORDER CELLPADDING=2 CELLSPACING=2 WIDTH=720><TR><TD>
<H3>JavaScript Diagram Builder - The Dot object</H3>
</TD></TR><TR><TD>
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.
</TD></TR></TABLE>
<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>
<DIV STYLE="position:absolute; top:490px">
<B>This diagram was generated by</B><BR /><BR />
&lt;SCRIPT Language="JavaScript"&gt;<BR />
document.open();<BR />
var D=new Diagram();<BR />
D.SetFrame(80, 160, 640, 460);<BR />
D.SetBorder(6, 18, 0, 6);<BR />
D.XGridDelta=1;<BR />
D.SetGridColor("#808080");<BR />
D.Draw("#FF80FF", "#000000", false);<BR />
var Size, Type, x;<BR />
Color=new Array("#000000","#FF0000","#0000FF","#000000","#FF0000","#0000FF");<BR />
for (Size=6; Size<=18; Size++)<BR />
{ x=D.ScreenX(Size);<BR />
&nbsp;&nbsp;new Dot(x, D.ScreenY(0), Size, 'smile.gif', "", "Type: smile.gif, Size:"+Size);<BR />
&nbsp;&nbsp;for (Type=1; Type<7; Type++)<BR />
&nbsp;&nbsp;&nbsp;&nbsp;new Dot(x, D.ScreenY(Type), Size, Type, Color[Type-1], "Type:"+Type+", Size:"+Size);<BR />
}<BR />
document.close();<BR />
&lt;/SCRIPT&gt;
<BR /><BR />
<B>You can use the following methods:</B>
<UL>
<LI><B>var D = new Dot(theX, theY, theSize, theType, theColor[, theTooltipText<BR />
[, theOnClickAction[, theOnMouseoverAction[, theOnMouseoutAction]]]])</B><BR />//Constructor and Display, size should be 6..18, type should be 1..6 or an image</LI>
<LI><B>D.SetColor(theColor)</B> //Color</LI>
<LI><B>D.SetVisibility(isVisible)</B> //Show or Hide</LI>
<LI><B>D.SetTitle(theTitle)</B> //TooltipText</LI>
<LI><B>D.MoveTo(theX, theY)</B> //Move</LI>
<LI><B>D.Delete()</B> //Delete DIV object of D from the document</LI>
<LI><B>delete D</B> //Destructor</LI>
</UL><BR />
<BR />
<TABLE NOBORDER CELLPADDING=2 CELLSPACING=2 WIDTH=720><TR>
<TD ALIGN=LEFT><A HREF="box_object.html">&#171; The Box object</A></TD>
<TD ALIGN=RIGHT><A HREF="pixel_object.html">The Pixel object &#187;</A></TD>
</TR></TABLE>
</DIV>
</body>
</html>
\ No newline at end of file
www/resources/diagram/download.html 0 → 100755
View file @ eedfe4c7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JavaScript Diagram Builder - Download</title>
<link rel=stylesheet type="text/css" href="diagram.css" />
</head>
<body>
<DIV STYLE="position:absolute; top:0"></DIV>
<TABLE NOBORDER CELLPADDING=2 CELLSPACING=2 WIDTH=720><TR><TD>
<H3>LT Diagram Builder - Download</H3>
</TD></TR><TR><TD>
Download of v. 3.3<ul>
<li>JavaScript version with english documentation <a href="../diagram.zip" target=_blank>diagram.zip</a> (80kB)</li>
<li>JavaScript version with german documentation <a href="../diagramm.zip" target=_blank>diagramm.zip</a> (82kB)</li>
<li>PHP version with examples <a href="../PHPdiagram.zip" target=_blank>PHPdiagram.zip</a> (78kB)</li>
<li>ASP version with examples <a href="../ASPdiagram.zip" target=_blank>ASPdiagram.zip</a> (92kB)</li>
<li>gdImage.dll (required only for ASP version) <a href="../gdImageDLL.zip" target=_blank>gdImageDLL.zip</a> (92kB)</li>
</ul>
</TD></TR></TABLE><BR />
<BR />
<TABLE NOBORDER CELLPADDING=2 CELLSPACING=2 WIDTH=720><TR>
<TD ALIGN=LEFT><A HREF="php_and_asp.html">&#171; PHP & ASP</A></TD>
<TD ALIGN=RIGHT><font size="-2"><A HREF="mailto:lutz.tautenhahn@lutanho.net" title="email to the author">Lutz Tautenhahn</A><BR />&copy; 2001-2005</font></TD>
</TR></TABLE>
</body>
</html>
\ No newline at end of file
www/resources/diagram/dynamic_example.html 0 → 100755
View file @ eedfe4c7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JavaScript Diagram Builder - Dynamic example</title>
<link rel=stylesheet type="text/css" href="diagram.css" />
<SCRIPT Language="JavaScript">if ((document.layers)&&(history.length==1)) location.href=location.href+"#";</SCRIPT>
<SCRIPT Language="JavaScript" src="diagram.js"></script>
<SCRIPT Language="JavaScript">if (document.getElementById) document.write("<SCRIPT Language=\"JavaScript\" SRC=\"evalsafe.js\"><\/SCRIPT>");</SCRIPT>
</head>
<body>
<DIV STYLE="position:absolute; top:0px"></DIV>
<TABLE NOBORDER CELLPADDING=2 CELLSPACING=2 WIDTH=720><TR><TD>
<H3>JavaScript Diagram Builder - Dynamic example</H3>
</TD></TR></TABLE>
<form name="inputform">
<TABLE NOBORDER CELLPADDING=2 CELLSPACING=2 WIDTH=720>
<TR><TD width=40></TD>
<TD width=50 align=right>x-min:</TD>
<TD width=80 align=left><input name="xmin" value="-4" size=8></TD>
<TD width=50 align=right>x-max:</TD>
<TD width=80 align=left><input name="xmax" value="4" size=8></TD>
<TD width=50 align=right>y-min:</TD>
<TD width=80 align=left><input name="ymin" value="-0.2" size=8></TD>
<TD width=50 align=right>y-max:</TD>
<TD width=80 align=left><input name="ymax" value="0.5" size=8></TD>
<TD></TD>
</TR>
<TR><TD align=right>y=</TD>
<TD colspan=8 align=left><input name="fx" value="1/sqrt(2*PI)*exp(-x*x/2)+sin(PI*x)/10" size=56></TD>
<TD><input type=button value="Draw" onClick="javascript:Draw()"></TD>
</TR>
</TABLE>
</form>
<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();
function Draw()
{ if ((navigator.userAgent.search("Opera 5")>=0)||(navigator.userAgent.search("Opera 6")>=0))
{ alert("Sorry, this doesn't work with this version of Opera.\nUse Opera 7.x, IE 5.x or Netscape 6.x instead.");
return;
}
if ((navigator.appName=="Netscape")&&(parseInt(navigator.appVersion)<5))
{ if (!confirm("This is not a safe operation with Netscape 4.x."+
" It can cause a crash of the browser."+
" Do you want to continue anyway?"))
return;
}
var xmin=parseFloat(document.inputform.xmin.value);
var xmax=parseFloat(document.inputform.xmax.value);
var ymin=parseFloat(document.inputform.ymin.value);
var ymax=parseFloat(document.inputform.ymax.value);
if (isNaN(xmin)) { alert("x-min is not a number"); return; }
if (isNaN(xmax)) { alert("x-max is not a number"); return; }
if (isNaN(ymin)) { alert("y-min is not a number"); return; }
if (isNaN(ymax)) { alert("y-max is not a number"); return; }
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 ((y=="")&&(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>
<DIV STYLE="position:absolute; top:540px; width:720px;">
The diagram displays the function which you type into the input field in the specified
x and y interval.<BR />
You can use the standard operators<BR />
<blockquote>
<B>+ - * / ( )</B><BR />
</blockquote>
the constants of the JavaScript Math object<BR />
<blockquote>
<B>E LN2 LN10 LOG2E LOG10E PI SQRT1_2 SQRT2</B><BR />
</blockquote>
and the functions of the Math object<BR />
<blockquote>
<B>abs acos asin atan ceil cos exp floor log max min pow random round
sin sqrt tan</B><BR />
</blockquote>
to define a function.<BR />
<BR />
<B>When the page is loaded, first a new diagram object and new pixel objects are created:</B><BR />
<BR />
&lt;SCRIPT Language="JavaScript"&gt;<BR />
document.open();<BR />
var D=new Diagram();<BR />
D.SetFrame(60, 175, 635, 500);<BR />
D.SetBorder(-1, 1, -1, 1);<BR />
D.SetText("x","y", "y=f(x)");<BR />
D.SetGridColor("#808080", "#CCCCCC");<BR />
D.Draw("#DDDDDD", "#000000", true, "");<BR />
var i, j, x, y;<BR />
j= D.ScreenY(0);<BR />
P=new Array(636);<BR />
for (i=60; i<=635; i++)<BR />
&nbsp;&nbsp;P[i]=new Pixel(i, j, "#0000FF");<BR />
document.close();<BR />
&lt;/SCRIPT&gt;<BR />
<BR />
<B>After you click the "Draw" button, the properties of the already existing objects are changed,
to display the new function:</B><BR />
<BR />
&lt;SCRIPT Language="JavaScript"&gt;<BR />
function Draw()<BR />
{ // ... some code was cutted here<BR />
&nbsp;&nbsp;D.SetBorder(xmin, xmax, ymin, ymax);<BR />
&nbsp;&nbsp;D.SetText("x", "y", "y="+document.inputform.fx.value);<BR />
&nbsp;&nbsp;D.SetGridColor("#808080", "#CCCCCC");<BR />
&nbsp;&nbsp;D.Draw("#DDDDDD", "#000000", true, "y="+document.inputform.fx.value);<BR />
&nbsp;&nbsp;var isEvalSafe=(window.EvalSafe)&&(EvalSafe("1+1")==2);<BR />
&nbsp;&nbsp;for (i=60; i<=635; i++)<BR />
&nbsp;&nbsp;{ x = D.RealX(i);<BR />
&nbsp;&nbsp;&nbsp;&nbsp;if (isEvalSafe)<BR />
&nbsp;&nbsp;&nbsp;&nbsp;{ y=EvalSafe(document.inputform.fx.value);<BR />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (isNaN(parseInt(y)))<BR />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ alert(document.inputform.fx.value+" can not be evaluated for x="+x);<BR />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;<BR />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<BR />
&nbsp;&nbsp;&nbsp;&nbsp;}<BR />
&nbsp;&nbsp;&nbsp;&nbsp;else<BR />
&nbsp;&nbsp;&nbsp;&nbsp;{ with (Math) y=eval(document.inputform.fx.value);<BR />
&nbsp;&nbsp;&nbsp;&nbsp;}<BR />
&nbsp;&nbsp;&nbsp;&nbsp;if ((ymin<=y)&&(y<=ymax)) P[i].MoveTo(i, D.ScreenY(y));<BR />
&nbsp;&nbsp;&nbsp;&nbsp;else P[i].SetVisibility(false);<BR />
&nbsp;&nbsp;}<BR />
}<BR />
&lt;/SCRIPT&gt;<BR />
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.<BR />
This will work with all browsers.
<form><input type=button value="see the example" onClick="javascript:fx_static()"></form>
<BR /><BR />
<SCRIPT language="JavaScript1.2">
function fx_static()
{ window.open("fx_main.html","FXWindow","width="+eval(760+_nav4*60)+",height=520,menubar=yes,locationbar=no,resizable=yes,status=no,scrollbars=no");
}
</SCRIPT>
<TABLE NOBORDER CELLPADDING=2 CELLSPACING=2 WIDTH=720><TR>
<TD ALIGN=LEFT><A HREF="static_example.html">&#171; Static Example</A></TD>
<TD ALIGN=RIGHT><A HREF="iframe_example.html">Iframe Example &#187;</A></TD>
</TR></TABLE>
</DIV>
</body>
</html>
\ No newline at end of file
www/resources/diagram/evalsafe.js 0 → 100755
View file @ eedfe4c7
function EvalSafe(ss)
{ var jj="";
if (ss.indexOf("^")>=0) return("");
try
{ with (Math) jj=eval(ss);
}
catch(error)
{ return("");
}
return(jj);
}
www/resources/diagram/evalsave.js 0 → 100755
View file @ eedfe4c7
function EvalSave(ss)
{ var jj="";
try
{ with (Math) jj=eval(ss);
}
catch(error)
{ return("");
}
return(jj);
}
www/resources/diagram/fx_display.html 0 → 100755
View file @ eedfe4c7
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript Diagram Builder</title>
<link rel=stylesheet type="text/css" href="diagram.css">
<SCRIPT Language="JavaScript">if ((document.layers)&&(history.length==1)) location.href=location.href+"#";</SCRIPT>
<SCRIPT Language="JavaScript" src="diagram.js"></SCRIPT>
<SCRIPT Language="JavaScript">if (document.getElementById) document.write("<SCRIPT Language=\"JavaScript\" SRC=\"evalsafe.js\"><\/SCRIPT>");</SCRIPT>
</head>
<body>
<DIV STYLE="position:absolute; top:0"></DIV>
<SCRIPT Language="JavaScript">
var i, x, y, xmin=parent.xmin, xmax=parent.xmax, ymin=parent.ymin, ymax=parent.ymax, fx=parent.fx;
document.open();
var D=new Diagram();
D.SetFrame(60, 45, 635, 370);
D.SetBorder(xmin, xmax, ymin, ymax);
D.SetText("x","y", "y=f(x)");
D.Draw("#DDDDDD", "#000000", true, "y="+fx);
document.close();
Draw();
function Draw()
{ var isEvalSafe=(window.EvalSafe)&&(EvalSafe("1+1")==2);
for (i=60; i<=635; i++)
{ x = D.RealX(i);
if (isEvalSafe)
{ y=EvalSafe(fx);
if ((y=="")&&(isNaN(parseInt(y))))
{ alert(fx+" can not be evaluated for x="+x);
return;
}
}
else
{ with (Math) y=eval(fx);
}
if ((ymin<=y)&&(y<=ymax)) new Pixel(i, D.ScreenY(y), "#0000FF");
}
}
</SCRIPT>
</body>
</html>
www/resources/diagram/fx_input.html 0 → 100755
View file @ eedfe4c7
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript Diagram Builder</title>
<link rel=stylesheet type="text/css" href="diagram.css">
</head>
<body>
<form name="inputform">
<TABLE NOBORDER CELLPADDING=2 CELLSPACING=2 WIDTH=720>
<TR><TD width=40></TD>
<TD width=50 align=right>x-min:</TD>
<TD width=80 align=left><input name="xmin" value="-4" size=8></TD>
<TD width=50 align=right>x-max:</TD>
<TD width=80 align=left><input name="xmax" value="4" size=8></TD>
<TD width=50 align=right>y-min:</TD>
<TD width=80 align=left><input name="ymin" value="-0.2" size=8></TD>
<TD width=50 align=right>y-max:</TD>
<TD width=80 align=left><input name="ymax" value="0.5" size=8></TD>
<TD></TD>
</TR>
<TR><TD align=right>y=</TD>
<TD colspan=8 align=left><input name="fx" value="1/sqrt(2*PI)*exp(-x*x/2)+sin(PI*x)/10" size=56></TD>
<TD><input type=button value="Draw" onClick="javascript:Draw()"></TD>
</TR>
</TABLE>
</form>
<SCRIPT Language="JavaScript">
function Draw()
{ var xmin=parseFloat(document.inputform.xmin.value);
var xmax=parseFloat(document.inputform.xmax.value);
var ymin=parseFloat(document.inputform.ymin.value);
var ymax=parseFloat(document.inputform.ymax.value);
if (isNaN(xmin)) { alert("x-min is not a number"); return; }
else xmin=parseFloat(xmin);
if (isNaN(xmax)) { alert("x-max is not a number"); return; }
else xmax=parseFloat(xmax);
if (isNaN(ymin)) { alert("y-min is not a number"); return; }
else ymin=parseFloat(ymin);
if (isNaN(ymax)) { alert("y-max is not a number"); return; }
else ymax=parseFloat(ymax);
parent.xmin=xmin;
parent.xmax=xmax;
parent.ymin=ymin;
parent.ymax=ymax;
parent.fx=document.inputform.fx.value;
parent.frames[1].location.href="fx_display.html";
}
</SCRIPT>
</body>
</html>
\ No newline at end of file
www/resources/diagram/fx_main.html 0 → 100755
View file @ eedfe4c7
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript Diagram Builder</title>
<SCRIPT Language="JavaScript">
var i, j, x, xmin=-1, xmax=1, ymin=-1, ymax=1, fx=0;
</SCRIPT>
</head>
<frameset rows="108,*">
<frame src="fx_input.html" name="fx_input">
<frame src="blank.html" name="fx_display">
</frameset>
<body>
</body>
</html>
www/resources/diagram/iframe_example.html 0 → 100755
View file @ eedfe4c7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JavaScript Diagram Builder - Iframe Example</title>
<link rel=stylesheet type="text/css" href="diagram.css" />
<SCRIPT Language="JavaScript">if ((document.layers)&&(history.length==1)) location.href=location.href+"#";</SCRIPT>
<SCRIPT Language="JavaScript" src="diagram.js"></SCRIPT>
</head>
<body>
<DIV STYLE="position:absolute; top:0px"></DIV>
<H3>JavaScript Diagram Builder - Iframe Example</H3>
By using an iframe as <B><I>_DiagramTarget</I></B> 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.
<BR />
<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>
<BR />
<B>This diagram was generated by</B><BR />
&lt;iframe frameborder=0 scrolling="no" width=400 height=240 name="F1"&gt;&lt;/iframe&gt;<BR />
&lt;SCRIPT Language="JavaScript"&gt;<BR />
_DiagramTarget=window.frames["F1"];<BR />
_DiagramTarget.document.open();<BR />
_DiagramTarget.document.writeln("&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body bgcolor='#eeeeee'&gt;");<BR />
var D=new Diagram();<BR />
D.SetFrame(70, 30, 380, 200);<BR />
D.SetBorder(10, 50, 0, 4);<BR />
D.SetText("X-Label","Y-Label","Title");<BR />
D.Draw("#80FF80","#0000FF",true,"Click on me !","parent.F1DiagramClick()");<BR />
_DiagramTarget.document.writeln("&lt;/body&gt;&lt;/html&gt;");<BR />
_DiagramTarget.document.close();<BR />
function F1DiagramClick(){ alert("Use your own function here."); }<BR />
&lt;/SCRIPT&gt;<BR />
<BR />
<TABLE NOBORDER CELLPADDING=2 CELLSPACING=2 WIDTH=720><TR>
<TD ALIGN=LEFT><A HREF="dynamic_example.html">&#171; Dynamic Example</A></TD>
<TD ALIGN=RIGHT><A HREF="relative_position.html">Relative Position &#187;</A></TD>
</TR></TABLE>
</body>
</html>
\ No newline at end of file
www/resources/diagram/index.html 0 → 100755
View file @ eedfe4c7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JavaScript Diagram Builder</title>
<script language="JavaScript">
function EvalUrlString()
{ url = window.location.search;
if (url != "")
{ url = url.substring(1, url.length);
if (url!="") setTimeout("Redirect(\""+url+"\")",1000);
}
}
function Redirect(url)
{ window.frames[1].location.href=url;
}
EvalUrlString();
</script>
</head>
<frameset cols="172,*">
<frame src="menu.html" name="Menu" />
<frame src="introduction.html" name="Main" />
</frameset>
<body>
</body>
</html>
www/resources/diagram/introduction.html 0 → 100755
View file @ eedfe4c7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JavaScript Diagram Builder - Introduction</title>
<link rel=stylesheet type="text/css" href="diagram.css" />
</head>
<body>
<DIV STYLE="position:absolute; top:0"></DIV>
<TABLE NOBORDER CELLPADDING=2 CELLSPACING=2 WIDTH=720><TR><TD>
<H3>JavaScript Diagram Builder - Introduction</H3>
</TD></TR><TR><TD>
The <B>JavaScript Diagram Builder v. 3.3</B> 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:<BR /><BR />
&lt;SCRIPT Language="JavaScript" src="diagram.js"&gt;&lt;/SCRIPT&gt;<BR /><BR />
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.<BR /><BR />
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.<BR />
<BR />
The JavaScript Diagram Builder v. 3.3 is copyrighted <B>freeware</B>. 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.<BR />
<BR />
Here is the history of new features:<ul>
<li>object 'Line' and object 'Area' available (v. 2.4)</li>
<li>draw scale with unit (v. 2.4)</li>
<li>define target window for the diagram (v. 2.4)</li>
<li>get grid values without drawing the diagram (v. 2.4)</li>
<li>scale text can be defined as function of scale values (v. 2.5)</li>
<li>grid lines can be drawn (v. 2.5)</li>
<li>scale interval (and consequently number of scale lines) can be defined (v. 2.5)</li>
<li>font can be changed for diagram scale, Bar- and Box-objects (v. 2.5)</li>
<li>sub-grid lines can be drawn (v. 2.6)</li>
<li>the code is conform with XHTML 1.0 standard (v. 2.7)</li>
<li>method SetColor available for all objects (v. 2.8)</li>
<li>script file is splitted into browser specific parts (v. 2.8)</li>
<li>object 'Arrow' available (v. 2.9)</li>
<li>image can be used as type of a 'Dot' object (v. 2.9)</li>
<li><B>PHP and ASP versions of the script available!</B> (v. 3.0)</li>
<li>method of Diagram object 'SetGridColor' should be used for compatibility (v. 3.0)</li>
<li>method of Diagram object 'SetGridColor' should be used for compatibility (v. 3.0)</li>
<li>grid color and scale position for X and Y can be specified (v. 3.1)</li>
<li>image can be used for theDrawColor of Diagram object and Text of Bar/Box (v. 3.1)</li>
<li>logarithmic scale can be drawn (v. 3.2)</li>
<li>object 'Pie' available, onMouseOver and onMouseOut can be used (v. 3.3)</li>
</ul>
</TD></TR></TABLE><BR />
<BR />
<TABLE NOBORDER CELLPADDING=2 CELLSPACING=2 WIDTH=720><TR>
<TD ALIGN=LEFT><font size="-2"><A HREF="mailto:lutz.tautenhahn@lutanho.net" title="email to the author">Lutz Tautenhahn</A><BR />&copy; 2001-2005</font></TD>
<TD ALIGN=RIGHT><A HREF="diagram_object.html">The Diagram object &#187;</A></TD>
</TR></TABLE>
</body>
</html>
\ No newline at end of file
www/resources/diagram/line_object.html 0 → 100755
View file @ eedfe4c7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JavaScript Diagram Builder - The Line object</title>
<link rel=stylesheet type="text/css" href="diagram.css" />
<SCRIPT Language="JavaScript">if ((document.layers)&&(history.length==1)) location.href=location.href+"#";</SCRIPT>
<SCRIPT Language="JavaScript" src="diagram.js"></SCRIPT>
</head>
<body>
<DIV STYLE="position:absolute; top:0px"></DIV>
<TABLE NOBORDER CELLPADDING=2 CELLSPACING=2 WIDTH=720><TR><TD>
<H3>JavaScript Diagram Builder - The Line object</H3>
</TD></TR><TR><TD>
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.
</TD></TR></TABLE>
<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>
<DIV STYLE="position:absolute; top:390px">
<B>This diagram was generated by</B><BR /><BR />
&lt;SCRIPT Language="JavaScript"&gt;<BR />
function Fahrenheit(vv){ return("&lt;nobr&gt;"+Math.round(vv*18+320)/10+" F&lt;/nobr&gt;"); }<BR />
document.open();<BR />
var D=new Diagram();<BR />
D.SetFrame(80, 160, 520, 360);<BR />
D.SetBorder(6, 18, 20, 30);<BR />
D.SetText("","", "temperature measured during the day");<BR />
D.XScale=" h";<BR />
D.YScale=" C";<BR />
D.SetGridColor("#cccccc");<BR />
D.Draw("#FFEECC", "#663300", false);<BR />
var t, T0, T1;<BR />
D.GetYGrid();<BR />
_BFont="font-family:Verdana;font-size:10pt;line-height:13pt;";<BR />
for (t=D.YGrid[0]; t<=D.YGrid[2]; t+=D.YGrid[1])<BR />
&nbsp;&nbsp;new Bar(D.right+6, D.ScreenY(t)-8, D.right+6, D.ScreenY(t)+8, "", Fahrenheit(t), "#663300");<BR />
T1=22;<BR />
for (t=6; t<18; t++)<BR />
{ T0=T1;<BR />
&nbsp;&nbsp;T1=23-4*Math.cos(t/4)+Math.random();<BR />
&nbsp;&nbsp;new Line(D.ScreenX(t), D.ScreenY(T0), D.ScreenX(t+1), D.ScreenY(T1), "#cc9966", 2, "temperature");<BR />
}<BR />
document.close();<BR />
&lt;/SCRIPT&gt;
<BR /><BR />
<B>You can use the following methods:</B>
<UL>
<LI><B>var L = new Line(theX0, theY0, theX1, theY1, theColor[, theSize[, theTooltipText[,<BR />
theOnClickAction [, theOnMouseoverAction[, theOnMouseoutAction]]]]])</B>
//Constructor and Display</LI>
<LI><B>L.SetColor(theColor)</B> //Color</LI>
<LI><B>L.SetVisibility(isVisible)</B> //Show or Hide</LI>
<LI><B>L.SetTitle(theTitle)</B> //TooltipText</LI>
<LI><B>L.MoveTo(theLeft, theTop)</B> //Move</LI>
<LI><B>L.ResizeTo(theX0, theY0, theX1, theY1)</B> //Resize</LI>
<LI><B>L.Delete()</B> //Delete DIV object of L from the document</LI>
<LI><B>delete L</B> //Destructor</LI>
</UL><BR />
<BR />
<TABLE NOBORDER CELLPADDING=2 CELLSPACING=2 WIDTH=720><TR>
<TD ALIGN=LEFT><A HREF="pixel_object.html">&#171; The Pixel object</A></TD>
<TD ALIGN=RIGHT><A HREF="area_object.html">The Area object &#187;</A></TD>
</TR></TABLE>
</DIV>
</body>
</html>
\ No newline at end of file
www/resources/diagram/linreg_display.html 0 → 100755
View file @ eedfe4c7
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript Diagram Builder</title>
<link rel=stylesheet type="text/css" href="diagram.css">
<SCRIPT Language="JavaScript">if ((document.layers)&&(history.length==1)) location.href=location.href+"#";</SCRIPT>
<SCRIPT Language="JavaScript" src="diagram.js"></SCRIPT>
<SCRIPT Language="JavaScript">if (document.getElementById) document.write("<SCRIPT Language=\"JavaScript\" SRC=\"evalsafe.js\"><\/SCRIPT>");</SCRIPT>
</head>
<body>
<DIV STYLE="position:absolute; top:0"></DIV>
<SCRIPT Language="JavaScript">
function Display()
{ if ((!parent.x)||(!parent.y)) { location.href="linreg_main.html"; return; }
var i, l=parent.x.length, x=parent.x, y=parent.y;
var xmin, ymin, xmax, ymax, xm=0, ym=0, xxm=0, xym=0, a, b;
xmin=x[0]; xmax=x[0];
for (i=0; i<l; i++)
{ if (xmin>x[i]) xmin=x[i];
if (xmax<x[i]) xmax=x[i];
}
i=xmax-xmin;
if (i==0) { xmin--; xmax++; }
else { xmin-=i/20; xmax+=i/20; }
ymin=y[0]; ymax=y[0];
for (i=0; i<l; i++)
{ if (ymin>y[i]) ymin=y[i];
if (ymax<y[i]) ymax=y[i];
}
i=ymax-ymin;
if (i==0) { ymin--; ymax++; }
else { ymin-=i/20; ymax+=i/20; }
for (i=0; i<l; i++)
{ xm+=x[i];
ym+=y[i];
xxm+=x[i]*x[i];
xym+=x[i]*y[i];
}
if (l>0)
{ xm/=l;
ym/=l;
xxm/=l;
xym/=l;
}
if (xxm-xm*xm!=0)
{ b=(xym-xm*ym)/(xxm-xm*xm);
a=ym-b*xm;
if (ymin>a+b*xmin) ymin=a+b*xmin;
if (ymax<a+b*xmin) ymax=a+b*xmin;
if (ymin>a+b*xmax) ymin=a+b*xmax;
if (ymax<a+b*xmax) ymax=a+b*xmax;
}
document.open();
var D=new Diagram();
D.SetFrame(60, 40, 460, 340);
D.SetBorder(xmin, xmax, ymin, ymax);
var ss=a<0 ? "" : "+";
if (xxm-xm*xm!=0)
D.SetText("x","y", "linear regression of "+l+" points: y="+Math.round(b*10000)/10000+"*x"+ss+Math.round(a*10000)/10000);
else
D.SetText("x","y","");
D.Draw("#eeeeee", "#000000", true, "", "", "#888888", "#cccccc");
if (xxm-xm*xm!=0)
new Line(D.ScreenX(xmin), D.ScreenY(a+b*xmin), D.ScreenX(xmax), D.ScreenY(a+b*xmax), "ff0000", 1);
for (i=0; i<l; i++)
new Dot(D.ScreenX(x[i]), D.ScreenY(y[i]), 6, 6, "#0000ff", "("+x[i]+", "+y[i]+")");
document.close();
}
Display();
</SCRIPT>
</body>
</html>
www/resources/diagram/linreg_input.html 0 → 100755
View file @ eedfe4c7
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript Diagram Builder</title>
<link rel=stylesheet type="text/css" href="diagram.css">
</head>
<body>
<form name="inputform">
<TABLE NOBORDER CELLPADDING=2 CELLSPACING=2 WIDTH=720>
<TR><TD width=50 align=right>x:</TD>
<TD width=80 align=left><input name="x" value="" size=8></TD>
<TD width=50 align=right>y:</TD>
<TD width=80 align=left><input name="y" value="" size=8></TD>
<TD><input type=button value="add point" onClick="javascript:AddPoint()"></TD>
</TR>
</TABLE>
</form>
<SCRIPT Language="JavaScript">
if ((!parent.x)||(!parent.y)) location.href="linreg_main.html";
function AddPoint()
{ var x=parseFloat(document.inputform.x.value);
var y=parseFloat(document.inputform.y.value);
if (isNaN(x)) { alert("x is not a number"); return; }
if (isNaN(y)) { alert("y is not a number"); return; }
var i=parent.x.length;
parent.x[i]=x;
parent.y[i]=y;
parent.frames[1].location.href="linreg_display.html";
}
</SCRIPT>
</body>
</html>
\ No newline at end of file
www/resources/diagram/linreg_main.html 0 → 100755
View file @ eedfe4c7
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript Diagram Builder - Linear Regression Example</title>
<SCRIPT Language="JavaScript">
var x=new Array();
var y=new Array();
</SCRIPT>
</head>
<frameset rows="64,*">
<frame src="linreg_input.html" name="linreg_input">
<frame src="blank.html" name="linreg_display">
</frameset>
<body>
</body>
</html>
www/resources/diagram/logarithmic_scale.html 0 → 100755
View file @ eedfe4c7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JavaScript Diagram Builder - Logarithmic Example</title>
<link rel=stylesheet type="text/css" href="diagram.css" />
<SCRIPT Language="JavaScript">if ((document.layers)&&(history.length==1)) location.href=location.href+"#";</SCRIPT>
<SCRIPT Language="JavaScript" src="diagram.js"></SCRIPT>
</head>
<body>
<DIV STYLE="position:absolute; top:0px"></DIV>
<TABLE NOBORDER CELLPADDING=2 CELLSPACING=2 WIDTH=720><TR><TD>
<H3>JavaScript Diagram Builder - Logarithmic Scale Example</H3>
</TD></TR><TR><TD>
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.
</TD></TR></TABLE>
<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, 150, 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>
<DIV STYLE="position:absolute; top:490px">
<B>This diagram was generated by</B><BR /><BR />
&lt;SCRIPT Language="JavaScript"&gt;<BR />
Hosts=new Array(28174, 80000, 290000, 500000, 727000, 1200000, 2217000, 4852000, 9472000,<BR />
16146000, 29670000, 43230000, 72398092, 109574429, 147344723);<BR />
<B>function LogScale(vv)<BR />
{ if ((vv>3)||(vv<-3)) return("10&lt;sup&gt;"+vv+"&lt;/sup&gt;");<BR />
&nbsp;&nbsp;if (vv>=0) return(Math.round(Math.exp(vv*Math.LN10)));<BR />
&nbsp;&nbsp;else return(1/Math.round(Math.exp(-vv*Math.LN10)));<BR />
}<BR /></B>
document.open();<BR />
var D=new Diagram();<BR />
D.SetFrame(100, 140, 580, 460);<BR />
D.SetBorder(1988, 2002, <B>Math.log(Hosts[0])/Math.LN10, Math.log(Hosts[14])/Math.LN10</B>);<BR />
D.SetText("Year", "Hosts", "&lt;B&gt;Internet growth&lt;/B&gt;");<BR />
D.XGridDelta=2;<BR />
D.XSubGrids=2;<BR />
<B>D.YGridDelta=1;</B><BR />
<B>D.YSubGrids=-1;</B><BR />
<B>D.YScale="function LogScale";</B><BR />
D.SetGridColor("#FFFFFF", "#EEEEEE");<BR />
D.Draw("#DDDDDD", "#000000", true);<BR />
for (var n=1; n&lt;Hosts.length; n++)<BR />
{ new Line(D.ScreenX(1987+n), D.ScreenY(<B>Math.log(Hosts[n-1])/Math.LN10</B>),<BR />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;D.ScreenX(1988+n), D.ScreenY(<B>Math.log(Hosts[n])/Math.LN10</B>), "#0000ff", 2, "internet hosts");<BR />
}<BR />
for (n=0; n&lt;Hosts.length; n++)<BR />
{ new Dot(D.ScreenX(1988+n), D.ScreenY(<B>Math.log(Hosts[n])/Math.LN10</B>), 10, 1, "#ff0000",<BR />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eval(1988+n)+": "+Hosts[n]+" hosts");<BR />
}<BR />
document.close();<BR />
&lt;/SCRIPT&gt;
<BR /><BR />
<BR />
<TABLE NOBORDER CELLPADDING=2 CELLSPACING=2 WIDTH=720><TR>
<TD ALIGN=LEFT><A HREF="relative_position.html">&#171; Relative Position</A></TD>
<TD ALIGN=RIGHT><A HREF="browser_support.html">Browser Support &#187;</A></TD>
</TR></TABLE>
</DIV>
</body>
</html>
\ No newline at end of file
www/resources/diagram/menu.html 0 → 100755
View file @ eedfe4c7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JavaScript Diagram Builder - Menu</title>
<link rel=stylesheet type="text/css" href="diagram.css" />
</head>
<body>
<table border="0" height="95%" cellpadding="0" cellspacing="0">
<tr><td><H3>JavaScript Diagram Builder 3.3</H3></td></tr>
<tr><td><hr></td></tr>
<tr><td><a href="introduction.html" target="Main">Introduction</a></td></tr>
<tr><td><hr></td></tr>
<tr><td><a href="diagram_object.html" target="Main">The Diagram object</a></td></tr>
<tr><td><a href="bar_object.html" target="Main">The Bar object</a></td></tr>
<tr><td><a href="box_object.html" target="Main">The Box object</a></td></tr>
<tr><td><a href="dot_object.html" target="Main">The Dot object</a></td></tr>
<tr><td><a href="pixel_object.html" target="Main">The Pixel object</a></td></tr>
<tr><td><a href="line_object.html" target="Main">The Line object</a></td></tr>
<tr><td><a href="area_object.html" target="Main">The Area object</a></td></tr>
<tr><td><a href="arrow_object.html" target="Main">The Arrow object</a></td></tr>
<tr><td><a href="pie_object.html" target="Main">The Pie object</a></td></tr>
<tr><td><hr></td></tr>
<tr><td><a href="static_example.html" target="Main">Static example</a></td></tr>
<tr><td><a href="dynamic_example.html" target="Main">Dynamic example</a></td></tr>
<tr><td><a href="iframe_example.html" target="Main">Iframe example</a></td></tr>
<tr><td><a href="relative_position.html" target="Main">Relative position</a></td></tr>
<tr><td><a href="logarithmic_scale.html" target="Main">Logarithmic scale</a></td></tr>
<tr><td><hr></td></tr>
<tr><td><a href="browser_support.html" target="Main">Browser support</a></td></tr>
<tr><td><hr></td></tr>
<tr><td><a href="php_and_asp.html" target="Main">PHP & ASP</a</td></tr>
<tr><td><hr></td></tr>
<tr><td><a href="download.html" target="Main">Download</a></td></tr>
<tr><td><hr></td></tr>
<tr><td valign=bottom><font size="-2"><A HREF="http://www.lutanho.net/index.html" title="homepage of the author" target="_blank">Lutz Tautenhahn</A><BR>&copy; 2001-2005</font></td></tr>
</table>
</body>
</html>
\ No newline at end of file
www/resources/diagram/php_and_asp.html 0 → 100755
View file @ eedfe4c7
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript Diagram Builder - PHP & ASP</title>
</head>
<frameset rows="*,32">
<frame src="php_and_asp_versions.html" name="PHP_ASP" scrolling=auto>
<frame src="php_and_asp_menu.html" marginwidth=0 marginheight=0 scrolling=no>
</frameset>
<body>
</body>
</html>
www/resources/diagram/php_and_asp_menu.html 0 → 100755
View file @ eedfe4c7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JavaScript Diagram Builder - PHP and ASP Menu</title>
<link rel=stylesheet type="text/css" href="diagram.css" />
</head>
<body style="background-color:#dcd8d4">
<TABLE NOBORDER CELLPADDING=2 CELLSPACING=2 WIDTH=720><TR>
<TD ALIGN=LEFT><A HREF="browser_support.html" target="Main">&#171; Browser Support</A></TD>
<TD ALIGN=CENTER>
<SELECT onChange="parent.frames[0].location.href=this.options[this.selectedIndex].value">
<option value="php_and_asp_versions.html">Overview
<option value="../PHPdiagram/diagram_object.html">PHP Diagram object
<option value="../PHPdiagram/bar_object.html">- PHP Bar method
<option value="../PHPdiagram/box_object.html">- PHP Box method
<option value="../PHPdiagram/dot_object.html">- PHP Dot method
<option value="../PHPdiagram/pixel_object.html">- PHP Pixel method
<option value="../PHPdiagram/line_object.html">- PHP Line method
<option value="../PHPdiagram/area_object.html">- PHP Area method
<option value="../PHPdiagram/arrow_object.html">- PHP Arrow method
<option value="../PHPdiagram/pie_object.html">- PHP Pie method
<option value="../PHPdiagram/static_example.html">PHP Static example
<option value="../PHPdiagram/dynamic_example.html">PHP Dynamic example
<option value="../PHPdiagram/logarithmic_scale.html">PHP Logarithmic scale
<option value="../ASPdiagram/diagram_object.html">ASP Diagram object
<option value="../ASPdiagram/bar_object.html">- ASP Bar method
<option value="../ASPdiagram/box_object.html">- ASP Box method
<option value="../ASPdiagram/dot_object.html">- ASP Dot method
<option value="../ASPdiagram/pixel_object.html">- ASP Pixel method
<option value="../ASPdiagram/line_object.html">- ASP Line method
<option value="../ASPdiagram/area_object.html">- ASP Area method
<option value="../ASPdiagram/arrow_object.html">- ASP Arrow method
<option value="../ASPdiagram/pie_object.html">- ASP Pie method
<option value="../ASPdiagram/static_example.html">ASP Static example
<option value="../ASPdiagram/dynamic_example.html">ASP Dynamic example
<option value="../ASPdiagram/logarithmic_scale.html">ASP Logarithmic scale
</SELECT>
</TD>
<TD ALIGN=RIGHT><A HREF="download.html" target="Main">Download &#187;</A></TD>
</TR></TABLE>
</body>
</html>
\ No newline at end of file
www/resources/diagram/php_and_asp_versions.html 0 → 100755
View file @ eedfe4c7
This diff is collapsed.
www/resources/diagram/pie_object.html 0 → 100755
View file @ eedfe4c7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JavaScript Diagram Builder - The Pie object</title>
<link rel=stylesheet type="text/css" href="diagram.css" />
<SCRIPT Language="JavaScript">if ((document.layers)&&(history.length==1)) location.href=location.href+"#";</SCRIPT>
<SCRIPT Language="JavaScript" src="diagram.js"></SCRIPT>
</head>
<body>
<DIV STYLE="position:absolute; top:0px"></DIV>
<TABLE NOBORDER CELLPADDING=2 CELLSPACING=2 WIDTH=720><TR><TD>
<H3>JavaScript Diagram Builder - The Pie object</H3>
</TD></TR><TR><TD>
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.
</TD></TR></TABLE>
<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>
<DIV STYLE="position:absolute; top:100px; left:300px; width:420px">
<B>This diagram was generated by</B><BR />
&lt;SCRIPT Language="JavaScript"&gt;<BR />
P=new Array();<BR />
document.open();<BR />
P[0]=new Pie(100,240,10,80,0*3.6,10*3.6,"#ff6060");<BR />
P[1]=new Pie(100,240,0,80,10*3.6,40*3.6,"#ffa000");<BR />
P[2]=new Pie(100,240,0,80,40*3.6,100*3.6,"#f6f600");<BR />
new Bar(200,190,280,210,"#ff6060","Apples","#000000","", "void(0)","MouseOver(0)","MouseOut(0)");<BR />
new Bar(200,230,280,250,"#ffa000","Oranges","#000000","", "void(0)","MouseOver(1)","MouseOut(1)");<BR />
new Bar(200,270,280,290,"#f6f600","Bananas","#000000","", "void(0)","MouseOver(2)","MouseOut(2)");<BR />
document.close();<BR />
function MouseOver(i) { P[i].MoveTo("","",10); }<BR />
function MouseOut(i) { P[i].MoveTo("","",0); }<BR />
&lt;/SCRIPT&gt;
</DIV>
<DIV STYLE="position:absolute; top:360px;">
<BR /><BR />
<B>You can use the following methods:</B>
<UL>
<LI><B>var P = new Pie(theXCenter, theYCenter, theOffset, theRadius, theAngle0, theAngle1, theColor[,<BR />
theTooltipText[, theOnClickAction[, theOnMouseoverAction[, theOnMouseoutAction]]]])</B><BR />
//Constructor and Display</LI>
<LI><B>P.SetColor(theColor)</B> //Color</LI>
<LI><B>P.SetVisibility(isVisible)</B> //Show or Hide</LI>
<LI><B>P.SetTitle(theTitle)</B> //TooltipText</LI>
<LI><B>P.MoveTo(theXCenter, theYCenter, theOffset)</B> //Move</LI>
<LI><B>P.ResizeTo(theXCenter, theYCenter, theOffset, theRadius, theAngle0, theAngle1)</B> //Resize</LI>
<LI><B>P.Delete()</B> //Delete DIV object of P from the document</LI>
<LI><B>delete P</B> //Destructor</LI>
</UL><BR />
<BR />
<TABLE NOBORDER CELLPADDING=2 CELLSPACING=2 WIDTH=720><TR>
<TD ALIGN=LEFT><A HREF="arrow_object.html">&#171; The Arrow object</A></TD>
<TD ALIGN=RIGHT><A HREF="static_example.html">Static example &#187;</A></TD>
</TR></TABLE>
</DIV>
</body>
</html>
\ No newline at end of file
www/resources/diagram/pixel_object.html 0 → 100755
View file @ eedfe4c7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JavaScript Diagram Builder - The Pixel object</title>
<link rel=stylesheet type="text/css" href="diagram.css" />
<SCRIPT Language="JavaScript">if ((document.layers)&&(history.length==1)) location.href=location.href+"#";</SCRIPT>
<SCRIPT Language="JavaScript" src="diagram.js"></SCRIPT>
</head>
<body>
<DIV STYLE="position:absolute; top:0px"></DIV>
<TABLE NOBORDER CELLPADDING=2 CELLSPACING=2 WIDTH=720><TR><TD>
<H3>JavaScript Diagram Builder - The Pixel object</H3>
</TD></TR><TR><TD>
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.
</TD></TR></TABLE>
<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>
<DIV STYLE="position:absolute; top:490px">
<B>This diagram was generated by</B><BR /><BR />
&lt;SCRIPT Language="JavaScript"&gt;<BR />
function MyXScale(xx)<BR />
{ var vv=Math.round(xx*4/Math.PI);<BR />
&nbsp;&nbsp;if (vv==0) return(0);<BR />
&nbsp;&nbsp;if (vv==4) return("&lt;img src=\"pi.gif\"&gt;");<BR />
&nbsp;&nbsp;if (vv==8) return("2 &lt;img src=\"pi.gif\"&gt;");<BR />
&nbsp;&nbsp;if (vv%2==0) return(eval(vv/2)+"/2 &lt;img src=\"pi.gif\"&gt;");<BR />
&nbsp;&nbsp;return(vv+"/4 &lt;img src=\"pi.gif\"&gt;");<BR />
}<BR />
document.open();<BR />
var D=new Diagram();<BR />
D.SetFrame(80, 160, 540, 460);<BR />
D.SetBorder(0, eval(2*Math.PI), -1, 1);<BR />
D.SetText("", "", "&lt;B&gt;some functions&lt;/B&gt;");<BR />
D.XGridDelta=Math.PI/4;<BR />
D.XScale="function MyXScale";<BR />
D.YGridDelta=0.2;<BR />
D.YSubGrids=2;<BR />
D.SetGridColor("#FFFFFF", "#EEEEEE");<BR />
D.Draw("#DDDDDD", "#000000", false);<BR />
var i, j, x;<BR />
for (i=80; i<=540; i++)<BR />
{ x = D.RealX(i);<BR />
&nbsp;&nbsp;j= D.ScreenY(Math.sin(x));<BR />
&nbsp;&nbsp;new Pixel(i, j, "#FF0000");<BR />
&nbsp;&nbsp;j= D.ScreenY(Math.cos(x));<BR />
&nbsp;&nbsp;new Pixel(i, j, "#0000FF");<BR />
}<BR />
new Bar(560, 200, 680, 220, "#0000FF", "f(x)=cos(x)", "#FFFFFF");<BR />
new Bar(560, 260, 680, 280, "#FF0000", "f(x)=sin(x)", "#000000");<BR />
document.close();<BR />
&lt;/SCRIPT&gt;
<BR /><BR />
<B>You can use the following methods:</B>
<UL>
<LI><B>var P = new Pixel(theX, theY, theColor)</B> //Constructor and Display</LI>
<LI><B>P.SetColor(theColor)</B> //Color</LI>
<LI><B>P.SetVisibility(isVisible)</B> //Show or Hide</LI>
<LI><B>P.MoveTo(theX, theY)</B> //Move</LI>
<LI><B>P.Delete()</B> //Delete DIV object of P from the document</LI>
<LI><B>delete P</B> //Destructor</LI>
</UL><BR />
<BR />
<TABLE NOBORDER CELLPADDING=2 CELLSPACING=2 WIDTH=720><TR>
<TD ALIGN=LEFT><A HREF="dot_object.html">&#171; The Dot object</A></TD>
<TD ALIGN=RIGHT><A HREF="line_object.html">The Line object &#187;</A></TD>
</TR></TABLE>
</DIV>
</body>
</html>
\ No newline at end of file
www/resources/diagram/relative_position.html 0 → 100755
View file @ eedfe4c7
This diff is collapsed.
www/resources/diagram/showline.htm 0 → 100755
View file @ eedfe4c7
This diff is collapsed.
www/resources/diagram/static_example.html 0 → 100755
View file @ eedfe4c7
This diff is collapsed.
www/resources/diagram/zoom_line.html 0 → 100755
View file @ eedfe4c7
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment