ÿþ<HTML> <HEAD> <TITLE>XYGraph model file</TITLE> <!-- my_file_name.htm author --> <meta name="author" content="Web Grapher" /> <!-- XYGraph v2.3 code author (please keep this one)--> <meta name="author" content="J. Gebelein" /> <!-- xygraphe.htm code author (you can delete this one)--> <meta name="author" content="Liu, HsinHan ‰Rk”"o &#21129;&#37995;&#28450;" /> <!--9712201641 must keep next style lines. --> <style type="text/css"> v\:* { behavior: url(#default#VML); } </style> <script type="text/javascript"> <!-- //2010-12-17-22-30 (//9912172230) //This version XYGraph v2.3 is modified //added var showXYcoord1orNot0=1; //9912140641 //2010-12-28-16-33 (9912281633) //'L' is a symbol of x-axis and y-axis //cross point. //xatL=0; mean that at xy cross point //x has value zero. Similarly for yatL=0; var xatL=0; var yatL=0; //define as global variable, allow other //function to modify x,y value at cross. //see function xyatL(arg1) at // http://freeman2.com/xygraph2.htm //2010-12-28-16-39 (9912281639) //9506241341 change 'bold' to 'regular' //9506241347 change 'bold' to 'regular' //9506241355 change 'Arial' to 'Dotum' // /*================================================================================ XYGraph.js : v2.3 by J. Gebelein, Last Updated 2006.01.11 Contact: info@Structura.info All rights reserved. Copyright 2006 Structura.info This script generates an XY Graph using Vector Markup Language (VML) and returns an html string for display via Javascript. Labels for points on a line, individual labels and arrows may be drawn with fully customizable features. Multiple lines with unlimited points and customizable formats can be drawn on the same plot with intelligent data axes that provide a best fit to the data for simple, dynamic programming. The VML used by this script is fully supported by Internet Explorer 5 or later, and will run on any website or intranet, online or offline. Data for the graph may be generated from static or dynamic Javascript and user form interfaces, or even from complex active server database programs. Use of this code is free for all non-commercial websites. If you find this code to be useful, I will gladly accept PayPal donations to info@Structura.info. I provide free email support and will try to accomodate your various needs into improving this program. For commercial use I ask for a one time licensing fee of $39.95 per domain, or $99.95 for an unlimited license. Both will cover all future version upgrades and allow for customization of the source code. An unlimited license will allow unrestricted use by a single organization including redistribution or resale as supporting code for a software product. Please leave this header intact if you intend on sharing this code. ========================================= ========================================= "XYGraph" object documentation Initialize: var MyGraph = new XYGraph(); MyGraph.xmax = 10; // set properties as desired Properties: See constructor script with inline comments below. Methods: MyGraph.Plot(XYLine [, XYLine_1, ...]) // returns html code for display Notes: Input x,y coordinate pairs using the "XYLine" object found in this script. The only required input is the x and y data, all formatting and other parameters either have default values defined in this script, or are automatically calculated as required to best display the data. Multiple XYLine objects may be passed to the Plot function for graphing. Extreme values +/-999E+99 and "NaN" are clipped from the data set. Unlike standard XY graphs, lines are drawn point to point in any direction without limitation. This allows step functions, circles, shapes, etc. This script does not optimize data for better resolution, it is up to the programmer to input the data spacing as desired. Generating smooth output requires increasing the number of data points at the expense of computation time. Generally, 1000 points or less is adequate. Formatting for text may be modified using CSS. Formatting for the axes and lines may be modified using VML styles, for more information on VML see the W3C definition page: http://www.w3.org/TR/NOTE-VML ========================================= ========================================= "XYLine" object documentation Initialize: var MyLine = new XYLine(); MyLine.x = [1, 2, 3, 4]; // set x and y data points MyLine.label = "plot 1"; // set properties as desired Properties: See constructor script with inline comments below. ======================================== ========================================*/ function XYLine() { // Arrays for holding x, y coordinate values and point labels this.x = new Array(); this.y = new Array(); this.labels = new Array(); // Assign VML compliant properties for the line. // Note that non-primary colors must be in #hex or rbg(r,g,b) format. // 9506162040 here // color='red' or // color='blue' determine curve color // this.VMLstroke = "weight='1pt'; color='red'; dashstyle='solid';"; // 9506201957 only here change color // this.VMLstroke = "weight='3pt'; color='red'; dashstyle='solid';"; this.VMLstroke = "weight='1pt'; color='blue'; dashstyle='solid';"; this.drawline=true; // set to true or false // Assign a label for the line this.label = "line"; // displayed when mouse is over line this.labelfont = "'Arial'"; this.labelsize = "8"; // font size in "pt" this.labelcolor = "black"; // Assign a VML shapetype for plotting data points, see definitions at bottom of script. // Using the 'none' shapetype plots invisible points and allows coordinates to be // shown when the mouse is over the point. Set 'drawpoints' to false to turn off // the points completely and speed up graphing for extensive data sets. The graph script // automatically turns off points if the data set has more than 1000 points. this.VMLpointshapetype="diamond"; // [ diamond, square, triangle, circle, x, none ] this.drawpoints=true; // set to true or false this.drawlabels=false; // set to true or false this.mouseoverlabels=false; // true will show the "labels" on mouseover, false will show x,y coord // Assign VML properties for the points this.pointsize="5"; // shape display size in "pt" this.pointfillcolor="blue"; // point fill color this.pointstrokecolor="black"; // point line color } function Arrow() { // x and y coordinate values of arrow origin this.x = 0; this.y = 0; this.rotation = 45; this.length = 25; // Assign a label for the arrow this.label = "Test"; // Assign VML properties for the arrow this.size="10"; // shape display size in "pt" this.color="red"; // arrow color this.labelcolor="red"; // label color this.labelsize="12"; // label size in "pt" this.lineweight="2"; // line weight in "pt" this.dashstyle="solid"; // line style // Arrow head shape definition this.arrowhead='<v:shapetype id="arrowhead" coordsize="500,500" path=" m 0 0 l 250 500 500 0 250 100 x e" />'; } // end function function Label() { // x and y coordinate values of the label origin this.x = 0; this.y = 0; this.rotation = 45; this.length = 0; // Assign a label text this.label = ""; // Assign VML properties for the label this.labelcolor="red"; // label color this.labelsize="12"; // label size in "pt" // this.VMLpointshapetype="circle"; // [ diamond, square, triangle, circle, x, none ] //9506172103 change to next // this.VMLpointshapetype="none"; // [ diamond, square, triangle, circle, x, none ] //then all circle disappear //9506172105 return to original setting this.VMLpointshapetype="circle"; // [ diamond, square, triangle, circle, x, none ] this.pointsize="6"; // shape display size in "pt" this.pointfillcolor="red"; // point fill color this.pointstrokecolor="black"; // point line color } // end function function XYGraph() { // Data Properties // The max and min values define the upper and lower axis values to display. // If not specified they will automatically fit to the data limits. this.xmax=null; this.xmin=null; this.ymax=null; this.ymin=null; // Graph titles this.title=null; this.xaxis=null; this.yaxis=null; // Tic scale spacing, if not specified it will be fit to the data. this.xscale=null; this.yscale=null; // Value where the axes cross. Default is at 0,0 // Set to "Number.NEGATIVE_INFINITY" to align with the minimum axis value. // Set to "Number.POSITIVE_INFINITY" to align with the maximum axis value. // this.xint=0; // this.yint=0; //9912281640 change to next this.xint=xatL; this.yint=yatL; // The last plot string generated is maintained in memory this.lastplot=""; // Tracks the changes made from additional plots for use with DeleteLast() this.lastplotadded= new Array(); this.numplots=0; // Style Properties this.gheight=200; // Plotting height in "pt" this.gwidth=300; // Plotting width in "pt" this.pad_top=10; // Internal padding margins in "pt" this.pad_bottom=10; this.pad_left=10; this.pad_right=10; this.ticsize=5; // Tic size in "pt", set to "0" to turn off this.ticspaceavg=30; // Average auto tic spacing in "pt" this.xticloc="auto"; // x-axis labels "top", "bottom", "auto" or "none" this.yticloc="auto"; // y-axis labels "right", "left", "auto" or "none" this.userxticlabels=null; // allows the user to override x axis tic labels this.useryticlabels=null; // allows the user to override y axis tic labels this.VMLminorxaxisstroke = "weight='0.5pt'; color='#D3D3D3'; dashstyle='dash';"; this.VMLminoryaxisstroke = "weight='0.5pt'; color='#D3D3D3'; dashstyle='dash';"; this.VMLmajoraxisstroke = "weight='1pt'; color='black';"; this.VMLbackgroundfill = "color='white'"; this.VMLframestroke = "color='white'"; this.CSSticfont = "font: 8pt 'Arial';"; // this.CSStitlefont = "font: 10pt 'Arial'; font-weight: bold;"; // font sizes must be set in "pt" //9506181816 delete [ font-weight: bold;] this.CSStitlefont = "font: 10pt 'Arial';"; // font sizes must be set in "pt" this.CSSxaxisfont = "font: 8pt 'Arial'; font-weight: bold;"; this.CSSyaxisfont = "font: 8pt 'Arial'; font-weight: bold;"; this.VMLyaxisfontcolor = "black"; // must specify y-axis title font color since it is VML object } XYGraph.prototype.toString = function() {return this.lastplot;} // The object will evaluate to the last plot XYGraph.prototype.Plot = function (XYLine) { // Parse input to determine x,y data limits and clip extreme values lines = arguments; xmax = Number.NEGATIVE_INFINITY; xmin = Number.POSITIVE_INFINITY; ymax = Number.NEGATIVE_INFINITY; ymin = Number.POSITIVE_INFINITY; clipxmax = (this.xmax ? Number(this.xmax) : 999E+99); clipxmin = (this.xmin ? Number(this.xmin) : -999E+99); clipymax = (this.ymax ? Number(this.ymax) : 999E+99); clipymin = (this.ymin ? Number(this.ymin) : -999E+99); clipped=false; // fix input this.yint = Number(this.yint); this.xint = Number(this.xint); this.ymin = Number(this.ymin); this.xmin = Number(this.xmin); this.ymax = Number(this.ymax); this.xmax = Number(this.xmax); if (this.xmax < this.xmin && this.xmax) {temp=this.xmax; this.xmax=this.xmin; this.xmin=temp;} if (this.ymax < this.ymin && this.ymax) {temp=this.ymax; this.ymax=this.ymin; this.ymin=temp;} xmax=this.xmax; xmin=this.xmin; ymax=this.ymax; ymin=this.ymin; for (var n=0; n<lines.length; n++) { var j=0; tempx = new Array(); tempy = new Array(); templabels = new Array(); linelen = (lines[n].y.length > lines[n].x.length ? lines[n].x.length : lines[n].y.length); for (var i=0; i<linelen; i++) { if ((lines[n].x[i] <= clipxmax)&&(lines[n].x[i] >= clipxmin)&&(lines[n].y[i] <= clipymax)&&(lines[n].y[i] >= clipymin)&&(i<=1000)) { if (xmax < lines[n].x[i]) {xmax = lines[n].x[i]}; if (xmin > lines[n].x[i]) {xmin = lines[n].x[i]}; if (ymax < lines[n].y[i]) {ymax = lines[n].y[i]}; if (ymin > lines[n].y[i]) {ymin = lines[n].y[i]}; tempx[j]=lines[n].x[i]; tempy[j]=lines[n].y[i]; if(lines[n].drawlabels || lines[n].mouseoverlabels) {templabels[j]= lines[n].labels[j];} j++; } else if (isNaN(lines[n].x[i]) || isNaN(lines[n].y[i])) {clipped=true;} else if (((lines[n].x[i+1] <= clipxmax)&&(lines[n].x[i+1] >= clipxmin)&&(lines[n].y[i+1] <= clipymax)&&(lines[n].y[i+1] >= clipymin)&&(i<=1000))) { lastxy = this.Findedge(lines[n].x[i+1],lines[n].x[i],lines[n].y[i+1],lines[n].y[i],clipxmax,clipxmin,clipymax,clipymin); if (Math.abs(lastxy[0]) < 999E+99 && Math.abs(lastxy[1]) < 999E+99) { tempx[j]=lastxy[0]; tempy[j]=lastxy[1]; if(lines[n].drawlabels || lines[n].mouseoverlabels) {templabels[j]="";} j++; } clipped=true; } else if (((lines[n].x[i-1] <= clipxmax)&&(lines[n].x[i-1] >= clipxmin)&&(lines[n].y[i-1] <= clipymax)&&(lines[n].y[i-1] >= clipymin))&&(i<=1000)) { lastxy = this.Findedge(lines[n].x[i-1],lines[n].x[i],lines[n].y[i-1],lines[n].y[i],clipxmax,clipxmin,clipymax,clipymin); if (Math.abs(lastxy[0]) < 999E+99 && Math.abs(lastxy[1]) < 999E+99) { tempx[j]=lastxy[0]; tempy[j]=lastxy[1]; if(lines[n].drawlabels || lines[n].mouseoverlabels) {templabels[j]="";} j++; } if (i+1 != linelen) { lines.length += 1; lines[(lines.length-1)] = new Array(); lines[(lines.length-1)].VMLstroke = lines[n].VMLstroke; lines[(lines.length-1)].drawline = lines[n].drawline; lines[(lines.length-1)].label = lines[n].label; lines[(lines.length-1)].VMLpointshapetype = lines[n].VMLpointshapetype; lines[(lines.length-1)].pointsize = lines[n].pointsize; lines[(lines.length-1)].pointfillcolor = lines[n].pointfillcolor; lines[(lines.length-1)].pointstrokecolor = lines[n].pointstrokecolor; lines[(lines.length-1)].drawpoints = lines[n].drawpoints; lines[(lines.length-1)].labelsize = lines[n].labelsize; lines[(lines.length-1)].labelfont = lines[n].labelfont; lines[(lines.length-1)].labelcolor = lines[n].labelcolor; lines[(lines.length-1)].drawlabels = lines[n].drawlabels; lines[(lines.length-1)].mouseoverlabels = lines[n].mouseoverlabels; lines[(lines.length-1)].x=lines[n].x.slice(i); lines[(lines.length-1)].y=lines[n].y.slice(i); lines[n].x=tempx; lines[n].y=tempy; if(lines[n].drawlabels || lines[n].mouseoverlabels) { lines[(lines.length-1)].labels=lines[n].labels.slice(i); lines[n].labels=templabels; } clipped=true; break; } } else if (i > 1000) { lines[n].drawpoints = false; lines[n].drawlabels = false; lines.length += 1; lines[(lines.length-1)] = new Array(); lines[(lines.length-1)].VMLstroke = lines[n].VMLstroke; lines[(lines.length-1)].drawline = lines[n].drawline; lines[(lines.length-1)].label = lines[n].label; lines[(lines.length-1)].drawpoints = false; lines[(lines.length-1)].drawlabels = false; lines[(lines.length-1)].x=lines[n].x.slice(i-1); lines[(lines.length-1)].y=lines[n].y.slice(i-1); lines[n].x=tempx; lines[n].y=tempy; break; } else {clipped=true;} } lines[n].x=tempx; lines[n].y=tempy; lines[n].labels=templabels; } if (this.xint == Number.NEGATIVE_INFINITY) {this.xint = xmin;} if (this.xint == Number.POSITIVE_INFINITY) {this.xint = xmax;} if (this.yint == Number.NEGATIVE_INFINITY) {this.yint = ymin;} if (this.yint == Number.POSITIVE_INFINITY) {this.yint = ymax;} // Intialize data if (this.lastplot == "") { // don't redraw graph background if called multiple times xscale=Number(this.xscale); yscale=Number(this.yscale); xint=Number(this.xint); yint=Number(this.yint); gheight=Number(this.gheight); gwidth=Number(this.gwidth); ticsize=Number(this.ticsize); xticloc=this.xticloc; yticloc=this.yticloc; // Initialize parameters gxpt=100; pad_t=gxpt*this.pad_top; pad_b=gxpt*this.pad_bottom; // padding pad_l=gxpt*this.pad_left; pad_r=gxpt*this.pad_right; gwt=Math.abs(Math.round(gwidth*gxpt)); // total graph width; ght=Math.abs(Math.round(gheight*gxpt)); // total graph height; gstyle='position:absolute; width='+gwt+'; height='+ght; // repetitive string constant GXstyle=this.CSSticfont+'position:absolute;'; GYstyle=this.CSSticfont+'position:absolute;'; GYLstyle=this.CSSticfont+'position:absolute; text-align:right; width:'; // finished later // fix auto scale x axis if (xint < xmin) {xmin=xint;} if (xint > xmax) {xmax=xint;} // x auto tic scale if (xscale <= 0) { xticmax=(gwidth-(pad_r+pad_l)/gxpt)/this.ticspaceavg; ticdivision=[0.1,0.2,0.25,0.5]; divpow=0; i=0; while ((xmax-xmin)/(ticdivision[i]*Math.pow(10,divpow)) > xticmax) { i++; if (!(i % ticdivision.length)) {divpow++; i=0;} if (divpow>1) {xticmax=(gwidth-(pad_r+pad_l)/gxpt)/(Number(this.ticspaceavg)+5);} } if (i==0 && divpow==0) { i=ticdivision.length-1; divpow=-1; xticmax=(gwidth-(pad_r+pad_l)/gxpt)/(Number(this.ticspaceavg)+10); while ((xmax-xmin)/(ticdivision[i]*Math.pow(10,divpow)) < xticmax) { i--; if (i==-1) {divpow--; i=ticdivision.length-1; xticmax=(gwidth-(pad_r+pad_l)/gxpt)/(Number(this.ticspaceavg)+30);} } } xscale=ticdivision[i]*Math.pow(10,divpow); } // fix auto scale y axis if (yint < ymin) {ymin = yint;} if (yint > ymax) {ymax = yint;} // y auto tic scale if (yscale <= 0) { yticmax=(gheight-(pad_t+pad_b)/gxpt)/this.ticspaceavg; ticdivision=[0.1,0.2,0.25,0.5]; divpow=0; i=0; while ((ymax-ymin)/(ticdivision[i]*Math.pow(10,divpow)) > yticmax) { i++; if (!(i % ticdivision.length)) {divpow++; i=0;} if (divpow>1) {yticmax=(gwidth-(pad_t+pad_b)/gxpt)/(Number(this.ticspaceavg)+5);} } if (i==0 && divpow==0) { i=ticdivision.length-1; divpow=-1; yticmax=(gheight-(pad_t+pad_b)/gxpt)/(this.ticspaceavg+10); while ((ymax-ymin)/(ticdivision[i]*Math.pow(10,divpow)) < yticmax) { i--; if (i==-1) {divpow--; i=ticdivision.length-1; yticmax=(gheight-(pad_t+pad_b)/gxpt)/(this.ticspaceavg+30);} } } yscale=ticdivision[i]*Math.pow(10,divpow); } // fix auto scale y axis if (!clipped) { ymin = (ymin%yscale ? ymin-ymin%yscale-yscale : ymin); ymax = (ymax%yscale ? ymax-ymax%yscale+yscale : ymax); } // Determine x tic labels xticlabels = new Array(); xticcharnum=1; numxticleft = Math.floor((xint-xmin)/xscale); numxtic = numxticleft+Math.floor((xmax-xint)/xscale)+1; for (var i=0; i<numxtic; i++) { xticlabel=(i-numxticleft)*xscale+xint; negstr=""; expstr=0; if (xticlabel < 0) {xticlabel*=-1; negstr="-";} switch (true) { case (xticlabel > 99999) : while (xticlabel>=1000) {xticlabel/=1000; expstr++;} xticlabel=String(xticlabel).slice(0,4); xticlabels[i]=negstr+xticlabel+"E+"+(expstr*3); break; case (xticlabel < 0.001 && xticlabel!=0) : while (xticlabel<=0.001) {xticlabel*=1000; expstr++;} xticlabel=(Math.round(xticlabel*Math.pow(10,4)))/Math.pow(10,4); xticlabels[i]=negstr+xticlabel+"E-"+(expstr*3); break; default: xticlabel=(Math.round(xticlabel*Math.pow(10,3)))/Math.pow(10,3); xticlabels[i]=negstr+String(xticlabel).slice(0,6); break; } xticcharnum=Math.max(xticcharnum,String(xticlabels[i]).length); } xticcharnumlast=String(xticlabels[i-1]).length; if (this.userxticlabels!=null) { len=Math.min(this.userxticlabels.length,xticlabels.length); for (var i=0; i<len; i++) { xticlabels[i]=this.userxticlabels[i]; }} // Determine y tic labels yticlabels = new Array(); yticcharnum=0; numyticbot = Math.floor((yint-ymin)/yscale); numytic = numyticbot+Math.floor((ymax-yint)/yscale)+1; for (var i=0; i<numytic; i++) { yticlabel=(i-numyticbot)*yscale+yint; negstr=""; expstr=0; if (yticlabel < 0) {yticlabel*=-1; negstr="-";} switch (true) { case (yticlabel > 99999) : while (yticlabel>=1000) {yticlabel/=1000; expstr++;} yticlabel=String(yticlabel).slice(0,4); yticlabels[i]=negstr+yticlabel+"E+"+(expstr*3); break; case (yticlabel < 0.001 && yticlabel!=0) : while (yticlabel<=0.001) {yticlabel*=1000; expstr++;} yticlabel=(Math.round(yticlabel*Math.pow(10,4)))/Math.pow(10,4); yticlabels[i]=negstr+yticlabel+"E-"+(expstr*3); break; default: yticlabel=(Math.round(yticlabel*Math.pow(10,3)))/Math.pow(10,3); yticlabels[i]=negstr+String(yticlabel).slice(0,6); break; } yticcharnum=Math.max(yticcharnum,String(yticlabels[i]).length); } if (this.useryticlabels!=null) { len=Math.min(this.useryticlabels.length,yticlabels.length); for (var i=0; i<len; i++) { yticlabels[i]=this.useryticlabels[i]; }} // Determine required extra padding and auto axis location tic_pt=Number((this.CSSticfont.slice(0,this.CSSticfont.indexOf("pt"))).slice(-2)); GYLstyle+=tic_pt*(yticcharnum+1)*0.5+"pt;"; if (yticloc!="none") { if (!numxticleft) { if (yticloc=="auto") {yticloc="left";} if (yticloc!="right") { pad_l+=0.75*yticcharnum*tic_pt*gxpt; if (this.yaxis) {pad_l+=0.5*this.pad_left*gxpt;} } } if (numxticleft == numxtic-1) { if (yticloc=="auto") {yticloc="right";} if (yticloc!="left") {pad_r+=0.75*yticcharnum*tic_pt*gxpt;} } } if (xticloc!="none") { if (!numyticbot) { if (xticloc=="auto") {xticloc="bottom";} if (xticloc!="top") {pad_b+=0.75*tic_pt*gxpt;} } if (numyticbot == numytic-1) { if (xticloc=="auto") {xticloc="top";} if (xticloc!="bottom") {pad_t+=0.75*tic_pt*gxpt;} } if (!((numxticleft == numxtic-1) && (yticloc=="right"))) {pad_r+=0.25*xticcharnumlast*tic_pt*gxpt;} } if (this.title) { title_pt=Number((this.CSStitlefont.slice(0,this.CSStitlefont.indexOf("pt"))).slice(-2)); pad_t+=1.25*title_pt*gxpt; if (xticloc=="top") pad_t+=0.75*tic_pt*gxpt;} if (this.xaxis) { xaxis_pt=Number((this.CSSxaxisfont.slice(0,this.CSSxaxisfont.indexOf("pt"))).slice(-2)); pad_b-=0.25*pad_b; pad_b+=xaxis_pt*gxpt; if (xticloc=="bottom") pad_b+=0.75*tic_pt*gxpt;} if (this.yaxis) { yaxis_pt=Number((this.CSSyaxisfont.slice(0,this.CSSyaxisfont.indexOf("pt"))).slice(-2)); pad_l-=0.25*pad_l; pad_l+=yaxis_pt*gxpt;} gw=gwt-pad_l-pad_r; gh=ght-pad_t-pad_b; xscl=gw/(xmax-xmin); yscl=gh/(ymax-ymin); this.xmin=xmin; this.xmax=xmax; this.ymin=ymin; this.ymax=ymax; gxmin=pad_l; gxmax=gw+pad_l; gxint=(xint-xmin)*xscl+pad_l; gymin=gh+pad_t; gymax=pad_t; gyint=(ymax-yint)*yscl+pad_t; gytic=yscale*yscl; gxtic=xscale*xscl; gticsize=Math.abs(Math.round(ticsize*gxpt)); gstr='<v:group style="antialias:true; width='+gwidth+'pt; height='+gheight+'pt" coordsize="'+gwt+','+ght+'" coordorigin="0,0">'; gstr+='<v:rect style="'+gstyle+'" ><v:stroke '+this.VMLframestroke+' /><v:fill '+this.VMLbackgroundfill+' /></v:rect>'; if(showXYcoord1orNot0==1) //9912140642 { //9712291547 delete 2D axis //9712291539 below draw 2D axis equal level lines // draw x-axis if(xscl!=Number.POSITIVE_INFINITY) { gstr+='<v:line from="'+gxmin+','+Math.round(gyint)+'" to="'+gxmax+','+Math.round(gyint)+'" ><v:stroke '+this.VMLmajoraxisstroke+' /></v:line>'; } // draw y-axis if(yscl!=Number.POSITIVE_INFINITY) { gstr+='<v:line from="'+Math.round(gxint)+','+gymin+'" to="'+Math.round(gxint)+','+gymax+'" ><v:stroke '+this.VMLmajoraxisstroke+' /></v:line>'; } // draw minor x-axis yticmin=gyint+numyticbot*gytic; for (var i=0; i<numytic; i++) { curint=Math.round(yticmin-gytic*i); if (curint!=Math.round(gyint)) {gstr+='<v:line from="'+gxmin+','+curint+'" to="'+gxmax+','+curint+'" ><v:stroke '+this.VMLminorxaxisstroke+' /></v:line>';} } // draw minor y-axis xticmin=gxint-numxticleft*gxtic; for (var i=0; i<numxtic; i++) { curint=Math.round(gxtic*i+xticmin); if (curint!=Math.round(gxint)) {gstr+='<v:line from="'+curint+','+gymin+'" to="'+curint+','+gymax+'" ><v:stroke '+this.VMLminoryaxisstroke+' /></v:line>';} } // draw x-axis tics gstr+='<v:shape style="'+gstyle+'"><v:path v="'; for (var i=0; i<numxtic; i++) { gstr+='m '+Math.round(xticmin+i*gxtic)+','+Math.round(gyint)+' r 0,'+((xticloc=="top" ? -1 : 1)*gticsize)+' x ';} gstr+='e" /><v:stroke '+this.VMLmajoraxisstroke+' /><v:fill on="false" /></v:shape>'; // draw y-axis tics gstr+='<v:shape style="'+gstyle+'"><v:path v="'; for (var i=0; i<numytic; i++) { gstr+='m '+Math.round(gxint)+','+Math.round(yticmin-i*gytic)+' r '+((yticloc=="right" ? 1 : -1)*gticsize)+',0 x ';} gstr+='e" /><v:stroke '+this.VMLmajoraxisstroke+' /><v:fill on="false" /></v:shape>'; //9712291539 above draw 2D axis equal level lines /*9712291529 del */ } // draw titles if (this.title) { nonchar=0; for (var i=0; i<this.title.length; i++) {if (this.title.charAt(i)==";") {nonchar++;}} gstr+='<span style="'+this.CSStitlefont+' position:absolute; text-align:center; top: '+0.5*this.pad_top; gstr+='pt; left: '+(0.5*gwt/gxpt-(this.title.length-5.5*nonchar)*title_pt*0.25)+'pt;">'+this.title+'</span>'; } if (this.xaxis) { nonchar=0; for (var i=0; i<this.xaxis.length; i++) {if (this.xaxis.charAt(i)==";") {nonchar++;}} gstr+='<span style="'+this.CSSxaxisfont+' position:absolute; text-align:center; top: '+((gymin+0.5*(pad_b-xaxis_pt*gxpt))/gxpt+(xticloc=="bottom" ? 0.75*tic_pt:0)); gstr+='pt; left: '+(0.5*gwt/gxpt-(this.xaxis.length-5.5*nonchar)*xaxis_pt*0.25)+'pt;">'+this.xaxis+'</span>'; } if (this.yaxis) { gstr+='<v:shape style="'+gstyle; gstr+='" path="M '+((0.25*this.pad_left+0.5*yaxis_pt)*gxpt)+','+gymin+' L '+((0.25*this.pad_left+0.5*yaxis_pt)*gxpt)+','+gymax+'" fillcolor="'+this.VMLyaxisfontcolor+'">'; gstr+='<v:stroke on="false" /><v:path textpathok="true" />'; gstr+='<v:textpath on="true" style="'+this.CSSyaxisfont+'" string="'+this.yaxis+'" /></v:shape>'; } } // end of draw graph background // hold on to previous plot if (this.lastplot != "") { gstr=this.lastplot.substring(0,this.lastplot.length-10); gstrtemp=gstr; } // draw lines for (var n=0; n<lines.length; n++) { if (lines[n].drawline && lines[n].x.length>1) { gstr+='<v:polyline points="'; for (i=0; i<lines[n].x.length; i++) {gstr+= Math.round(gxmin+(lines[n].x[i]-xmin)*xscl)+" "+Math.round(gymin-(lines[n].y[i]-ymin)*yscl)+" ";} gstr+='" title="'+lines[n].label+'" ><v:stroke '+lines[n].VMLstroke+' /><v:fill on="false" /></v:polyline>'; }} // draw points for (var n=0; n<lines.length; n++) { if (lines[n].drawpoints && lines[n].x.length>0) { gstr+=this.VMLpointshape(lines[n].VMLpointshapetype); for (i=0; i<lines[n].x.length; i++) { gstr+='<v:shape type="#'+(lines[n].VMLpointshapetype).toLowerCase()+'" style="width:'+lines[n].pointsize*gxpt+'; height:'+lines[n].pointsize*gxpt; gstr+='; top:'+Math.round(gymin-0.5*lines[n].pointsize*gxpt-(lines[n].y[i]-ymin)*yscl)+'; left:'+Math.round(gxmin-0.5*lines[n].pointsize*gxpt+(lines[n].x[i]-xmin)*xscl); ptitle = (lines[n].mouseoverlabels) ? lines[n].labels[i] : lines[n].x[i]+','+lines[n].y[i]; gstr+='" title="'+ptitle+'" fillcolor="'+lines[n].pointfillcolor+'"'; gstr+=' strokecolor="'+lines[n].pointstrokecolor+'" />'; } }} // draw labels for (var n=0; n<lines.length; n++) { if (lines[n].drawlabels && lines[n].labels.length>0) { for (i=0; i<lines[n].labels.length; i++) { gstr+='<span style="font: '+lines[n].labelsize+'pt '+lines[n].labelfont+'; position:absolute;'; gstr+=' top:'+Math.round((gymin-1.5*lines[n].labelsize*gxpt-(lines[n].y[i]-ymin)*yscl)/gxpt)+'pt; left:'+Math.round((gxmin+0.5*lines[n].labelsize*gxpt+(lines[n].x[i]-xmin)*xscl)/gxpt)+'pt; '; gstr+=' color:'+lines[n].labelcolor+'">'+lines[n].labels[i]+'</span>'; } }} if(showXYcoord1orNot0==1) //9912140643 { //9712291548 delete 2D axis //9712291540 below need variable defined in "9712291529 del" section if (this.lastplot == "") { // don't redraw graph background if called multiple times // draw x-axis labels if (xticloc!="none") { for (var i=0; i<numxtic; i++) { if (xticloc=="top") { gstr+='<span style="'+GXstyle+' top: '+((gyint-gticsize*1.25)/gxpt-8)+'pt; left: '+((xticmin+i*gxtic-0.5*gticsize)/gxpt)+'pt;">'; } else { gstr+='<span style="'+GXstyle+' top: '+((gyint+gticsize*1.25)/gxpt)+'pt; left: '+((xticmin+i*gxtic-0.5*gticsize)/gxpt)+'pt;">'; } gstr+=xticlabels[i]+'</span>'; }} // draw y-axis labels if (yticloc!="none") { for (var i=0; i<numytic; i++) { if (yticloc=="right") { gstr+='<span style="'+GYstyle+' top: '+((yticmin-i*gytic-gticsize)/gxpt)+'pt; left: '+((gxint+gticsize*1.5)/gxpt)+'pt;">'; } else { gstr+='<span style="'+GYLstyle+' top: '+((yticmin-i*gytic-gticsize)/gxpt)+'pt; left: '+((gxint-gticsize)/gxpt-0.5*(yticcharnum+1)*tic_pt)+'pt;">'; } gstr+=yticlabels[i]+'</span>'; }} } // end of draw graph background /**9712291534 del 9712291536 success delete 2D axis */ } //9712291548 delete 2D axis // close and return output gstr+='</v:group>'; if (this.numplots > 0) {this.lastplotadded[this.numplots]=gstr.length-gstrtemp.length;} else {this.lastplotadded[0]=gstr.length;} this.numplots++; this.lastplot=gstr; // save this output in memory return gstr; } // end function // function to undo last added line, label or arrow from the plot XYGraph.prototype.DeleteLast = function () { if (this.numplots > 1) { gstr=this.lastplot.substring(0,this.lastplot.length-this.lastplotadded[this.numplots-1]+1); gstr+='</v:group>'; this.lastplot=gstr; this.numplots--; } return gstr; } // end function XYGraph.prototype.Findedge = function (x1,x2,y1,y2,xmax,xmin,ymax,ymin) { x=0; y=0; if (!isNaN(x2)) { if (!isFinite(x2)) { switch (x2) { case Number.POSITIVE_INFINITY: x2 = 999E+99; break; case Number.NEGATIVE_INFINITY: x2 = -999E+99; break; } } if (!isFinite(y2)) { switch (y2) { case Number.POSITIVE_INFINITY: y2 = 999E+99; break; case Number.NEGATIVE_INFINITY: y2 = -999E+99; break; } } angle = Math.atan2(y2-y1,x2-x1); angle += (angle > 0 ? 0 : 2*Math.PI); slope = (y2-y1)/(x2-x1); Mxx = Math.atan2(ymax-y1,xmax-x1); Mxx += (Mxx > 0 ? 0 : 2*Math.PI); Mnx = Math.atan2(ymax-y1,xmin-x1); Mnx += (Mnx > 0 ? 0 : 2*Math.PI); Mnn = Math.atan2(ymin-y1,xmin-x1); Mnn += (Mnn > 0 ? 0 : 2*Math.PI); Mxn = Math.atan2(ymin-y1,xmax-x1); Mxn += (Mxn > 0 ? 0 : 2*Math.PI); switch (true) { case (angle>=Mxx && angle<Mnx) : y = ymax; x = (ymax-y1)/slope+x1; break; case (angle>=Mnx && angle<Mnn) : x = xmin; y = (xmin-x1)*slope+y1; break; case (angle>=Mnn && angle<Mxn) : y = ymin; x = (ymin-y1)/slope+x1; break; case (angle>=Mxn || angle<Mxx) : x = xmax; y = (xmax-x1)*slope+y1; break; } } return [x,y]; } // end function // point shapetype definitions, these can be modified and expanded XYGraph.prototype.VMLpointshape = function (shapename) { switch (shapename.toLowerCase()) { case "diamond" : return '<v:shapetype id="diamond" coordsize="500,500" path=" m 250 500 l 500 250 250 0 0 250 x e" />'; case "square" : return '<v:shapetype id="square" coordsize="350,350" path=" m 0 0 l 0 350 350 350 350 0 x e" />'; case "triangle" : return '<v:shapetype id="triangle" coordsize="400,400" path=" m 200 0 l 400 400 0 400 x e" />'; case "circle" : return '<v:shapetype id="circle" coordsize="350,350" path=" m 0 175 l 23 262 88 327 175 350 262 327 327 262 350 175 327 88 262 23 175 0 88 23 23 88 x e" />'; case "x" : return '<v:shapetype id="x" coordsize="350,350" path=" m 0 0 l 350 350 e m 0 350 l 350 0 e" />'; case "none" : return '<v:shapetype id="none" coordsize="350,350" filled="false" stroked="false" path=" m 0 0 l 0 350 350 350 350 0 x e" />'; } } // end function XYGraph.prototype.Drawarrow = function (arrowdef) { gstr=gstr.substring(0,gstr.length-10); gstrtemp=gstr; arrowdef.x = Number(arrowdef.x) arrowdef.y = Number(arrowdef.y) arrowdef.rotation = Number(arrowdef.rotation) arrowdef.length = Number(arrowdef.length) arrowdef.size = Number(arrowdef.size) xpoint=Math.round(gxmin+(arrowdef.x-xmin)*xscl+0.5*arrowdef.size*gxpt*Math.sin(arrowdef.rotation*Math.PI/180)); ypoint=Math.round(gymin-(arrowdef.y-ymin)*yscl-0.5*arrowdef.size*gxpt*Math.cos(arrowdef.rotation*Math.PI/180)); xpoint2=Math.round(xpoint+arrowdef.length*gxpt*Math.sin(arrowdef.rotation*Math.PI/180)); ypoint2=Math.round(ypoint-arrowdef.length*gxpt*Math.cos(arrowdef.rotation*Math.PI/180)); gstr+='<v:line from="'+xpoint+','+ypoint+'" to="'+xpoint2+','+ypoint2+'" ><v:stroke weight="'+arrowdef.lineweight+'pt"; color="'+arrowdef.color+'"; dashstyle="'+arrowdef.dashstyle+'"; /></v:line>'; xpoint3=Math.round(xpoint2+1.25*arrowdef.labelsize*gxpt*Math.sin(arrowdef.rotation*Math.PI/180)); ypoint3=Math.round(ypoint2-1.25*arrowdef.labelsize*gxpt); if(Math.cos(arrowdef.rotation*Math.PI/180)>0.707) {position=' text-align:center; top:'+Math.round(ypoint3/gxpt)+'pt; left: '+Math.round(xpoint3/gxpt-0.25*arrowdef.label.length*arrowdef.labelsize)+'pt; ';} if(Math.cos(arrowdef.rotation*Math.PI/180)<0.707) {position=' text-align:center; top:'+Math.round(ypoint2/gxpt)+'pt; left: '+Math.round(xpoint3/gxpt-0.25*arrowdef.label.length*arrowdef.labelsize)+'pt; ';} if(Math.sin(arrowdef.rotation*Math.PI/180)>0.707) {position=' text-align:center; top:'+Math.round(ypoint2/gxpt-arrowdef.labelsize*(0.5+Math.cos(arrowdef.rotation*Math.PI/180)))+'pt; left: '+Math.round(xpoint3/gxpt-0.25*arrowdef.label.length*arrowdef.labelsize)+'pt; ';} if(Math.sin(arrowdef.rotation*Math.PI/180)<0.707) {position=' text-align:center; top:'+Math.round(ypoint2/gxpt-arrowdef.labelsize*(0.5+Math.cos(arrowdef.rotation*Math.PI/180)))+'pt; left: '+Math.round(xpoint3/gxpt-0.25*arrowdef.label.length*arrowdef.labelsize)+'pt; ';} // gstr+='<span style="font: '+arrowdef.labelsize+'pt Arial; font-weight:bold; position:absolute;'; //9506241341 change 'bold' to 'regular' gstr+='<span style="font: '+arrowdef.labelsize+'pt Arial; font-weight:regular; position:absolute;'; gstr+=position+'color:'+arrowdef.labelcolor+'">'+arrowdef.label+'</span>'; xpoint=Math.round(gxmin-0.5*arrowdef.size*gxpt+(arrowdef.x-xmin)*xscl+0.5*arrowdef.size*gxpt*Math.sin(arrowdef.rotation*Math.PI/180)); ypoint=Math.round(gymin-0.5*arrowdef.size*gxpt-(arrowdef.y-ymin)*yscl-0.5*arrowdef.size*gxpt*Math.cos(arrowdef.rotation*Math.PI/180)); gstr+=arrowdef.arrowhead; gstr+='<v:shape type="#arrowhead" style="width:'+arrowdef.size*gxpt+'; height:'+arrowdef.size*gxpt; gstr+='; top:'+ypoint+'; left:'+xpoint; gstr+='" title="'+arrowdef.label+'" fillcolor="'+arrowdef.color+'"'; gstr+='"; style= "rotation:'+arrowdef.rotation+'deg"'; gstr+=' strokecolor="'+arrowdef.color+'" />'; gstr+='</v:group>'; this.lastplot=gstr; this.lastplotadded[this.numplots]=gstr.length-gstrtemp.length; this.numplots++; return gstr; } // end function XYGraph.prototype.Drawlabel = function (labeldef) { gstr=gstr.substring(0,gstr.length-10); gstrtemp=gstr; labeldef.x = Number(labeldef.x) labeldef.y = Number(labeldef.y) labeldef.rotation = Number(labeldef.rotation) labeldef.length = Number(labeldef.length) xpoint=Math.round(gxmin+(labeldef.x-xmin)*xscl+0.5*labeldef.labelsize*gxpt*Math.sin(labeldef.rotation*Math.PI/180)); ypoint=Math.round(gymin-(labeldef.y-ymin)*yscl-0.5*labeldef.labelsize*gxpt*Math.cos(labeldef.rotation*Math.PI/180)); xpoint2=Math.round(xpoint+labeldef.length*gxpt*Math.sin(labeldef.rotation*Math.PI/180)); ypoint2=Math.round(ypoint-labeldef.length*gxpt*Math.cos(labeldef.rotation*Math.PI/180)); xpoint3=Math.round(xpoint2+1.25*labeldef.labelsize*gxpt*Math.sin(labeldef.rotation*Math.PI/180)); ypoint3=Math.round(ypoint2-1.25*labeldef.labelsize*gxpt); if(Math.cos(labeldef.rotation*Math.PI/180)>0.707) {position=' text-align:center; top:'+Math.round(ypoint3/gxpt)+'pt; left: '+Math.round(xpoint3/gxpt-0.25*labeldef.label.length*labeldef.labelsize)+'pt; ';} if(Math.cos(labeldef.rotation*Math.PI/180)<0.707) {position=' text-align:center; top:'+Math.round(ypoint2/gxpt)+'pt; left: '+Math.round(xpoint3/gxpt-0.25*labeldef.label.length*labeldef.labelsize)+'pt; ';} if(Math.sin(labeldef.rotation*Math.PI/180)>0.707) {position=' text-align:center; top:'+Math.round(ypoint2/gxpt-labeldef.labelsize*(0.5+Math.cos(labeldef.rotation*Math.PI/180)))+'pt; left: '+Math.round(xpoint3/gxpt-0.25*labeldef.label.length*labeldef.labelsize)+'pt; ';} if(Math.sin(labeldef.rotation*Math.PI/180)<0.707) {position=' text-align:center; top:'+Math.round(ypoint2/gxpt-labeldef.labelsize*(0.5+Math.cos(labeldef.rotation*Math.PI/180)))+'pt; left: '+Math.round(xpoint3/gxpt-0.25*labeldef.label.length*labeldef.labelsize)+'pt; ';} // gstr+='<span style="font: '+labeldef.labelsize+'pt Arial; font-weight:bold; position:absolute;'; //9506241347 change 'bold' to 'regular' // gstr+='<span style="font: '+labeldef.labelsize+'pt Arial; font-weight:regular; position:absolute;'; //9506241352 change 'Arial' to 'Courier New' to 'Courier' still thick //9506241355 change 'Arial' to 'Dotum' get thinner characters gstr+='<span style="font: '+labeldef.labelsize+'pt Dotum; font-weight:regular; position:absolute;'; gstr+=position+'color:'+labeldef.labelcolor+'">'+labeldef.label+'</span>'; gstr+=this.VMLpointshape(labeldef.VMLpointshapetype); gstr+='<v:shape type="#'+(labeldef.VMLpointshapetype).toLowerCase()+'" style="width:'+labeldef.pointsize*gxpt+'; height:'+labeldef.pointsize*gxpt; gstr+='; top:'+Math.round(gymin-0.5*labeldef.pointsize*gxpt-(labeldef.y-ymin)*yscl,2)+'; left:'+Math.round(gxmin-0.5*labeldef.pointsize*gxpt+(labeldef.x-xmin)*xscl); gstr+='" fillcolor="'+labeldef.pointfillcolor+'"'; gstr+=' strokecolor="'+labeldef.pointstrokecolor+'" />'; gstr+='</v:group>'; this.lastplot=gstr; this.lastplotadded[this.numplots]=gstr.length-gstrtemp.length; this.numplots++; return gstr; } // end function /** 95,06,12,18,21,28 http://www.structura.info/XYGraph/XYGraph.zip C:\$fm\js\xygraph\XYGraph.zip ===== 95,10,17,20,00,42 http://www.structura.info/XYGraph/XYGraph.js 95,10,17,20,14,17 http://www.structura.info/XYGraph/Examples.htm /**/ //--> </script><!--9712282002 include XYGraph.js 9712291045 del XYGraph.js to save file size 9712291521 re-use XYGraph.js to delete 2D axis --> <!--9712282002 include XYGraph.js 9712291045 del XYGraph.js to save file size 9712291521 re-use XYGraph.js to delete 2D axis --> </HEAD> <body link="#FF0000" vlink="#0000FF" alink="#50A000" bgcolor="#ccfcfc" onload=javascript:initial0() > <!-- onload=javascript:initial0()--> <font size=+2> XYGraph model file </font> ; <a href="#neatDrawing"> Neat drawing </a> ; <a href="#docA001"> doc </a> <br> <font size=+2 color=red> Please use MSIE browser to read this page. </font> <br> This file is programmed with MSIE 6.0 <a href="#docA019"> Update 2011-01-12 </a> <!--9712301414--> <br> <!--9506212132 add link--> <!--please keep XYGraph v2.3 link below--> <font size=4> <a href=http://www.structura.info/XYGraph/XYGraphDemo.htm> XYGraph v2.3 - web page graph </a> </font> &nbsp; <!--9506231219 add link--> <a href=http://www.structura.info/XYGraph/Links.htm> &#9756;&#9758; <!--##9756;##9758;--> </a> &nbsp; <!--9506231216 add link--> <a href=http://www.structura.info/XYGraph/Purchase.htm> donate<!--9801031950 use donate ##9829;##9835; &#9829;&#9835;--> </a> <!--please keep XYGraph v2.3 link above--> <br> <font color=red size=+2> This file is personal home work. Output <br> may contain error. Please verify first. <!--9712301920--> </font> <br> <br> <a name="clickButton"></a> <input onclick="myGraphCode();" type="button" value="##Draw myGraph" /> <!--2010-12-16-15-58--> <input onclick="myGraphCode(0);" type="button" value="wipe" /> <input type="checkbox" id="QAchkbxID01" onclick="if(QAchkbxID01.checked) QAspanAlert05.innerHTML='Use x,y axis ' else QAspanAlert05.innerHTML='Del x,y axis ' " /><!--9912111036--> <span id=QAspanAlert05> </span><!--2010-12-16-16-11--> <br> Axes cross at x= <input id=QAxatL value=0 size=3 /> <!--a001112038--> , y= <input id=QAyatL value=0 size=3 /> , <input onclick="QAxatL.value=QAyatL.value=2" type="button" value="2" /> <input onclick="QAxatL.value=QAyatL.value=0" type="button" value="0" /> <br> <a name="graphDiv"></a> <div id=QAdivGraph10></div> <br> <a name="graphDoc"></a> <span id=QAspanEqnDoc10> <!--2010-12-16-15-54--> </span> <!--[==]--> <SCRIPT language=JavaScript> <!-- function initial0(arg1) { //9912121002 if(typeof(QAchkbxID01)=='object' &&typeof(QAspanAlert05)=='object' ) if(QAchkbxID01.checked) QAspanAlert05.innerHTML='Use x,y axis ' else QAspanAlert05.innerHTML='Del x,y axis ' if(typeof(QSchkbxID01)=='object' &&typeof(QSspanAlert05)=='object' ) if(QSchkbxID01.checked) QSspanAlert05.innerHTML='Use x,y axis ' else QSspanAlert05.innerHTML='Del x,y axis ' } //2010-12-16-15-50 function myGraphCode(arg1) { //9912292223 move next two if() to top //9912292225 ok right if(typeof(xyatL)=='function') xyatL(QAxatL,QAyatL); //a001112050 if(typeof(xyaxis01)=='function') xyaxis01(QAchkbxID01); var MyGraph = new XYGraph(); var MyLine1 = new XYLine(); MyLine1.VMLpointshapetype="none"; if(typeof(QAdivGraph10)=="object") QAdivGraph10.innerHTML = ""; /** MyGraph.ymax=QAboxYmax0.value; MyGraph.ymin=QAboxYmin0.value; MyGraph.xmax=QAboxXmax0.value; MyGraph.xmin=QAboxXmin0.value; MyGraph.gheight=QAboxHeight0.value; MyGraph.gwidth=QAboxWidth0.value; //if your web page has elements //id=QAboxYmax0 to id=QAboxWidth0 //you can use above six lines. //otherwise use next six lines. /**/ //you can change number below MyGraph.ymax=5; MyGraph.ymin=-1; MyGraph.xmax=5; MyGraph.xmin=-1; MyGraph.gheight=300; MyGraph.gwidth=300; //you can change number above. showXYcoord1orNot0=1; if(typeof(QAchkbxID01)=='object') if(!QAchkbxID01.checked) showXYcoord1orNot0=0; //9912172131 if(arg1==0) //9912120909 { //keep drawing board open (blank) MyLine1.x=[0,0]; //draw one dot, otherwise MyLine1.y=[0,0]; //no drawing board. MyGraph.Plot(MyLine1); QAdivGraph10.innerHTML = MyGraph; return; //9912120910 } MyGraph.title='Put your drawing title here.'; //Above code is common to all parts. // //Below is an example drawing. //You can delete code below and //replace with your drawing code // /***** Shade code start *****/ var shadeIn="0.0 0.0 1.0 0.0 1.0 1.0 2.0 1.0 2.0 2.0 3.0 2.0 3.0 3.0 4.0 3.0 4.0 4.0 5.0 4.0"; if(typeof(cleanData)=="function") shadeIn=cleanData(shadeIn); var shadLen=0.15; var shadDeg=135; var is4or1=4; if(shadLen<0.01){is4or1=1;shadDeg=91} var shadRad=2.356194490192345; var shadSpace=0.25; var lineRad; var dx,dy; var lx,ly; var sx,sy; var lineLen; var shadPcs; var semiloc0=semiloc1=-1; var inStr1=""; var xycoord; var count0,i,j,k; var xbgn,ybgn,xend,yend; var s0=0; var s1=1; var totpts=0; if(shadDeg>90||shadDeg<-90){s0=1;s1=0;} MyLine1.VMLstroke="weight=1; color=black; dashstyle=solid;"; while(1) { semiloc1=shadeIn.indexOf(";",semiloc0+1); if(semiloc1<0)semiloc1=shadeIn.length; inStr1=shadeIn.substring(semiloc0+1,semiloc1) xycoord=inStr1.split(" "); for(i=0;i<xycoord.length;i++) xycoord[i]=parseFloat(xycoord[i]); if(xycoord.length>3) { //main work here count0=0; while(count0*2<xycoord.length) { xbgn=count0*2+0 ybgn=count0*2+1 xend=count0*2+2 yend=count0*2+3 lx=xycoord[xend]-xycoord[xbgn]; ly=xycoord[yend]-xycoord[ybgn]; lineRad=Math.atan2(ly,lx); lineLen=Math.sqrt(lx*lx+ly*ly); shadPcs=parseInt(lineLen/shadSpace); if(shadPcs<=0)shadPcs=1; sx=shadLen*Math.cos(lineRad-shadRad); sy=shadLen*Math.sin(lineRad-shadRad); dx=lx/shadPcs; dy=ly/shadPcs; MyLine1.x=[] MyLine1.y=[] for(i=0;i<shadPcs;i++) { MyLine1.x[0+i*is4or1]=xycoord[xbgn]+i*dx MyLine1.y[0+i*is4or1]=xycoord[ybgn]+i*dy MyLine1.x[1+i*is4or1]=xycoord[xbgn]+i*dx +dx*s0 +sx*s1 MyLine1.y[1+i*is4or1]=xycoord[ybgn]+i*dy +dy*s0 +sy*s1 if(is4or1!=4)continue; MyLine1.x[2+i*is4or1]=xycoord[xbgn]+i*dx +dx*s0 +sx*s0 MyLine1.y[2+i*is4or1]=xycoord[ybgn]+i*dy +dy*s0 +sy*s0 MyLine1.x[3+i*is4or1]=xycoord[xbgn]+i*dx+dx MyLine1.y[3+i*is4or1]=xycoord[ybgn]+i*dy+dy } //for(i=0;i<shadPcs;i++) totpts+=MyLine1.x.length; MyGraph.Plot(MyLine1); count0++; } //while(count0*2<xycoord.length) } //if(xycoord.length>3) if(semiloc1>=shadeIn.length)break; semiloc0=semiloc1+1; } //while(1) status="Shade draw "+totpts+" points." /***** Shade code stop. #37995#28450;9911091335 *****/ // MyLine1.x=[3.1,3.063,3.025,2.988,2.95,2.913,2.875,2.838,2.8,2.763,2.725,2.688,2.65,2.613,2.575,2.538,2.5] MyLine1.y=[4,3.998,3.98,3.945,3.894,3.827,3.742,3.643,3.525,3.394,3.242,3.078,2.894,2.698,2.48,2.251,2] MyLine1.VMLstroke="weight=1; color=red; dashstyle=solid;"; MyGraph.Plot(MyLine1); MyLine1.x=[2.5,2.438,2.375,2.313,2.25,2.188,2.125,2.063,2,1.938,1.875,1.813,1.75,1.688,1.625,1.563,1.5] MyLine1.y=[2,2.277,2.513,2.7,2.844,2.94,2.992,2.998,2.958,2.874,2.742,2.567,2.344,2.078,1.763,1.407,1] MyLine1.VMLstroke="weight=1; color=red; dashstyle=solid;"; MyGraph.Plot(MyLine1); MyLine1.x=[1.5,1.438,1.375,1.313,1.25,1.188,1.125,1.063,1,0.938,0.875,0.813,0.75,0.688,0.625,0.563] MyLine1.y=[1,1.277,1.513,1.7,1.844,1.94,1.992,1.998,1.958,1.874,1.742,1.567,1.344,1.078,0.763,0.478] MyLine1.VMLstroke="weight=1; color=red; dashstyle=solid;"; MyGraph.Plot(MyLine1); /***** Three quadratic #37995#28450;9911252359 *****/ // MyLine1.x=[3.65,3.602,3.477,3.323,3.198,3.15,3.198,3.323,3.477,3.602,3.65,3.4]; MyLine1.y=[4,4.147,4.238,4.238,4.147,4,3.853,3.762,3.762,3.853,4]; MyLine1.VMLstroke="weight=1; color=black; dashstyle=dot;"; MyGraph.Plot(MyLine1); //9911140908 MyLine1.x=[0.812,0.764,0.639,0.485,0.360,0.312,0.360,0.485,0.639,0.764,0.812,0.562]; MyLine1.y=[0.240,0.387,0.478,0.478,0.387,0.240,0.093,0.002,0.002,0.093,0.240]; MyLine1.VMLstroke="weight=1; color=black; dashstyle=solid;"; MyGraph.Plot(MyLine1); //a001111124 why no parallel move? //a001111213 get parallel move //a001111224 MyLine1.x=[2.592,2.65,2.799,2.65,2.688] MyLine1.y=[3.137,2.894,3.095,2.894,3.078] MyLine1.VMLstroke="weight=1; color=#FF0000; dashstyle=solid;"; MyGraph.Plot(MyLine1); MyLine1.x=[1.637,1.688,1.842,1.688,1.75] MyLine1.y=[2.323,2.078,2.275,2.078,2.344] MyLine1.VMLstroke="weight=1; color=#FF0000; dashstyle=solid;"; MyGraph.Plot(MyLine1); MyLine1.x=[0.71,0.75,0.913,0.75,0.813] MyLine1.y=[1.591,1.344,1.533,1.344,1.567] MyLine1.VMLstroke="weight=1; color=#FF0000; dashstyle=solid;"; MyGraph.Plot(MyLine1); /***** ­{-˜cäNP}_g #37995#28450;9911091340 *****/ //labelSection begin var MyLabel = new Label(); MyLabel.labelsize = "14"; MyLabel.VMLpointshapetype="none"; MyLabel.labelcolor="black"; MyLabel.rotation = +0; MyLabel.pointfillcolor="red"; MyLabel.x =2.5; MyLabel.y =4.5; MyLabel.label = "This is sample graph. You can"; MyGraph.Drawlabel(MyLabel); MyLabel.x =2.75; MyLabel.y =4.1; MyLabel.label = "delete it and insert your graph."; MyGraph.Drawlabel(MyLabel); MyLabel.x =2.4; MyLabel.y =-1.2; MyLabel.label = "ISBN 981-02-1298-4 page 11, fig.1.5"; MyGraph.Drawlabel(MyLabel); //Above is an example drawing. //You can delete code above and //replace with your drawing code // //All line code, label code must be above here. //must be before next "... = MyGraph" line. QAdivGraph10.innerHTML = MyGraph; } //function myGraphCode(arg1) myGraphCode(0); //initial blank drawing board. //if you cannot get initial blank drawing board //one possible reason is that you put // myGraphCode(0); //in [head] [/head] before QAchkbxID01 //is defined. //[=][][] --> </SCRIPT> <br> <a name="neatDrawing">&lt;a name="neatDrawing"&gt;</a> <a href="#docA001"> doc </a> <br> <font color=red><b> Following files generate neat drawing codes. </b></font> <br> Build code to draw arrow, ellipse, shade, small arc. <br> Draw equation, draw data, rotate x,y side-by-side data <br> <a href=http://freeman2.com/xygraph2.htm> http://freeman2.com/xygraph2.htm</a> &nbsp; <a href=xygraph2.htm>local</a> <br> <!--9910312007--> <br> Build XYGraph mechanical spring codes and data <br> Rotate string type data in XYGraph codes. x array <br> and y array separate. One click rotate, one click draw <br> <a href=http://freeman2.com/xygraph4.htm> http://freeman2.com/xygraph4.htm</a> &nbsp; <a href=xygraph4.htm>local</a><br> <!--9911231954--> <br> Build code to draw spherical coordinate. <br> Convert 3D xyz data to 2D xy data. <br> Hex to decimal, decimal to hex. <br> <a href=http://freeman2.com/sphere3d.htm> http://freeman2.com/sphere3d.htm</a> &nbsp; <a href=sphere3d.htm>local</a><br> <!--9912161933--> <br> Display drawing code. XYGraph model file. <br> Test XYGraph drawing code. Drop x,y axis. <br> <a href=http://freeman2.com/xygraphe.htm> http://freeman2.com/xygraphe.htm</a> &nbsp; <a href=xygraphe.htm>local</a><br> <!--9912171648--> <br> <br> <br> <br> <br> <!-- ######## Below is test code click button and ######## input box 1&2. If you delete test ######## section, remaining still work OK. --> <br> <a name="boxSec01">&lt;boxSec01&gt;</a> <font color=red size=+1><b> Please use MSIE to read this page. </b></font> <br> Graph area size, W: <!--9810121216--> <INPUT id=QSboxWidth0 value="300" size=3 onchange="javascript: if(QSboxWidth0.value<100||isNaN(QSboxWidth0.value)) QSboxWidth0.value=100; else if(QSboxWidth0.value>800) QSboxWidth0.value=800;" > H: <INPUT id=QSboxHeight0 value="300" size=3 onchange="javascript: if(QSboxHeight0.value<100||isNaN(QSboxHeight0.value)) QSboxHeight0.value=100; else if(QSboxHeight0.value>800) QSboxHeight0.value=800;" > <INPUT onclick='QSboxWidth0.value=QSboxHeight0.value=""' type=button value="dW"><!--9911011628--> <INPUT onclick='QSboxXmin0.value=QSboxXmax0.value=""' type=button value="dX"> <INPUT onclick='QSboxYmin0.value=QSboxYmax0.value=""' type=button value="dY"> <INPUT onclick=' QSboxWidth0.value= QSboxHeight0.value= QSboxXmin0.value= QSboxYmin0.value= QSboxXmax0.value= QSboxYmax0.value=""; ' type=button value="dAll"> <INPUT onclick=' QSboxWidth0.value= QSboxHeight0.value="300" QSboxXmin0.value= QSboxYmin0.value="-1"; QSboxXmax0.value= QSboxYmax0.value="5"; ' type=button value="use1"><!--9911011638--> <br> x min: <INPUT id=QSboxXmin0 value="-3" size=3 > , x max: <INPUT id=QSboxXmax0 value="3" size=3 > ; y min: <INPUT id=QSboxYmin0 value="-3" size=3 > , y max: <INPUT id=QSboxYmax0 value="3" size=3 > ; <br> <br> <a name="testButton"></a> <input onclick=" //9912121143 runTestCode(QSboxd01.value); " type="button" value="%%Draw Spherical3D" /> ; <input onclick="runTestCode(0)" type="button" value="wipe" /> <!--9912140819--> ; <input onclick=" //9912121154 QSboxYmax0.value= QSboxXmax0.value=3; QSboxYmin0.value= QSboxXmin0.value=-3; " type="button" value="-3to3" /> ; <input type="checkbox" id="QSchkbxID01" onclick="if(QSchkbxID01.checked) QSspanAlert05.innerHTML='Use x,y axis ' else QSspanAlert05.innerHTML='Del x,y axis ' " /><!--9912111036--> <span id=QSspanAlert05> </span><!--9912111037--> <br> Axes cross at x= <input id=QSxatL value=0 size=3 /> <!--a001112041--> , y= <input id=QSyatL value=0 size=3 /> , <input onclick="QSxatL.value=QSyatL.value=2" type="button" value="2" /> <input onclick="QSxatL.value=QSyatL.value=0" type="button" value="0" /> <br> <a name="graphDiv"></a> <div id=QSdivGraph10></div> <br> <a name="graphDoc"></a> <span id=QSspanEqnDoc10> <!--9910271900--> </span> <br> Example <input onclick="QSboxd01.value=example1" type="button" value="1" /> <input onclick="QSboxd01.value=example2" type="button" value="2" /> ; <input onclick=" //9912121143 runTestCode(QSboxd01.value); " type="button" value="%%Draw Spherical3D" /> ; <input onclick="runTestCode(0)" type="button" value="wipe" /> <!--9912140819--> ; <input onclick=" //9912121154 QSboxYmax0.value= QSboxXmax0.value=3; QSboxYmin0.value= QSboxXmin0.value=-3; " type="button" value="-3to3" /> <br> <a name="atbox01"></a> Box 1 input XYGraph code <INPUT onclick='javascript:window.clipboardData.setData("Text",document.getElementById("QSboxd01").value.toString())' type=button value="copy 1"> <INPUT onclick='document.getElementById("QSboxd01").value=""' type=button value="del 1"> <br><!--9912051516--> <TEXTAREA id=QSboxd01 rows=6 cols=65 > </TEXTAREA> <br> <a name="atbox02"></a> Box 2 work area <INPUT onclick='javascript:window.clipboardData.setData("Text",document.getElementById("QSboxd02").value.toString())' type=button value="copy 2"> <INPUT onclick='document.getElementById("QSboxd02").value=""' type=button value="del 2"> <br> <TEXTAREA id=QSboxd02 rows=6 cols=65 > You can delete Box 1 example code, paste your code to Box 1, then click "%%Draw" button. QSboxd02.value='string1' </TEXTAREA> <br> <!-- ######## Above is test code click button and ######## input box 1&2. If you delete test ######## section, remaining still work OK. --> <br><!--[=][][]--> <br> <pre><font size=+2><a name="docA001">&lt;a name="docA001"&gt;</a> 2010-12-16-20-00 start This file <a href=http://freeman2.com/xygraphe.htm> http://freeman2.com/xygraphe.htm</a> is created on 2010-12-16. Purpose is to help you to build graph code web page or test XYGraph codes. <a name="docA002">&lt;a name="docA002"&gt;</a> 2010-12-16 done the file <a href=http://freeman2.com/sphere3d.htm> http://freeman2.com/sphere3d.htm</a> sphere3d.htm generate code to draw spherical coordinate. It is easy for LiuHH to create a html drawing code file. But it is not easy for majority of web user. <a name="docA003">&lt;a name="docA003"&gt;</a> Although <a href=http://freeman2.com/xygraph2.htm>xygraph2.htm</a> [draw arrow] and [draw oval] buttons create whole set html drawing code file, but there is no way to remove x,y coordinate from drawing board. There are three differences between xygraphe.htm and xygraph2.htm . (2011-01-12-10-34 already unified) <a name="docA004">&lt;a name="docA004"&gt;</a> (1) xygraph2.htm include XYGraph v2.3 code from [script type="text/javascript" src=http://freeman2.com/jsgraph2.js] [/script] xygraph2.htm created whole set html drawing code size is small, <font color=red><b>xygraph2.htm does not have the drawing engine code.</b></font> <a name="docA005">&lt;a name="docA005"&gt;</a> On the other hand, <font color=red><b> xygraphe.htm contain XYGraph v2.3 code as part of this file.</b></font> This moment xygraphe.htm size is 12/16/2010 08:39 PM 122,280 xygraphe.htm It contains XYGraph v2.3 engine code. Two example codes and explanation documents. <a name="docA006">&lt;a name="docA006"&gt;</a> (2) xygraph2.htm include jsgraph2.js The engine code in jsgraph2.js can not remove x,y coordinates from drawing. (2011-01-12-10-52 already updated) <a name="docA007">&lt;a name="docA007"&gt;</a> On the other hand, xygraphe.htm has modified XYGraph v2.3 engine code. xygraphe.htm added a check box for use/del x,y coordinates from drawing. Some graph can be displayed in better shape if not draw x,y coordinates and grids. <a name="docA008">&lt;a name="docA008"&gt;</a> (3) xygraph2.htm created whole set html drawing code do not have input box for testing XYGraph codes. xygraph4.htm has input box for testing XYGraph codes. But x,y coordinates and grids must show up. <a name="docA009">&lt;a name="docA009"&gt;</a> On the other hand, xygraphe.htm has input box for testing XYGraph codes and it is possible to drop x,y coordinates and grids. <a name="docA010">&lt;a name="docA010"&gt;</a> xygraphe.htm is created to help you to build graph code web page. Since the result page is your work, You can delete Liu,Hsinhan's name from your result page. <a name="docA011">&lt;a name="docA011"&gt;</a> But your result page should include [[ All rights reserved. Copyright 2006 Structura.info ..... Please leave this header intact if you intend on sharing this code. ]] <a name="docA012">&lt;a name="docA012"&gt;</a> You can delete freeman2.com name or link from your result page. Suggest you to keep the link to Structura.info at top of this file This line look like next </font></pre> <a href=http://www.structura.info/XYGraph/XYGraphDemo.htm> XYGraph v2.3 - web page graph </a> &nbsp; <a href=http://www.structura.info/XYGraph/Links.htm> &#9756;&#9758; <!--##9756;##9758;--> </a> &nbsp; <a href=http://www.structura.info/XYGraph/Purchase.htm> donate </a> <pre><font size=+2>Please revisit freeman2.com<a href=http://freeman2.com/freeman2.htm#whatsnew> whatsnew</a> section for updated files. Thank you for visiting Freeman's web site. Freeman 2010-12-16-20-50 (Liu, HsinHan &#21129;&#37995;&#28450;) <a name="docA013">&lt;a name="docA013"&gt;</a> 2010-12-17-10-16 start One change at xygraphe.htm is that if you click "wipe" button, drawing board become white blank. LiuHH earlier work, all wipe button let drawing board disappear. Old design make whole page move up or move down frequently. New design whole page no shift. <a name="docA014">&lt;a name="docA014"&gt;</a> "##Draw" click button default graph is a combination of three sections (1) shade from xygraph2.htm click example '1' and click 'draw shade' (2) three quadratic curve from xygraph4.htm . Click 'V0' then click 'Draw three quadratic' <a name="docA015">&lt;a name="docA015"&gt;</a> (3) small arc from xygraph2.htm Oval center x= 3.4 ,y= 4 ; b_axis length=[ empty ] Oval a_axis end point x= 3.65 ,y=4 Oval steps=10 Small Arc [small arc] angle= 360 deg. Output to Box 1, output code small arc has radius, delete last number in x=[...] and y=[...] to remove radius. (also delete last comma) Put (1), (2), (3) code together the result is "##Draw" click button output. <a name="docA016">&lt;a name="docA016"&gt;</a> xygraphe.htm "%%Draw" click button is a combination of two sections. Spherical coordinate from sphere3d.htm and arrow head from xygraph2.htm When build "%%Draw" click button example, LiuHH did not keep 3D data. Now only 2D data in hand, there is no way to recover 3D data. <a name="docA017">&lt;a name="docA017"&gt;</a> "%%Draw" click button example (Á,Æ,¸) and Eye x,y,z are uncertain. 2010-12-17-11-18 stop <a name="docA018">&lt;a name="docA018"&gt;</a> 2010-12-17-16-39 start Above uncertainty cause LiuHH write click button [in] and [out] next to "3D#" at the page sphere3d.htm. Please see <a href=sphere3d.htm#docA040>sphere3d.htm#docA040</a> 2010-12-17-16-41 stop <a name="docA019">&lt;a name="docA019"&gt;</a> 2011-01-12-11-00 start The following is Update 2011-01-12. 2010-12-22 upload xygraphe.htm. After twenty days 2011-01-10 review xygraphe (intend to add "Axes cross at x=") and click "##Draw" button (not "%%Draw"), saw a ball on top of stair with three quadratic path curves. First impression come to my mind is that jet air plane fly in the sky draw a white line (cloud) which mark the already passed path. Now <a name="docA020">&lt;a name="docA020"&gt;</a> see a ball with red line behind it, compare with jet air plane, then this ball jump upstairs !! NO ! NO ! that is not what I mean ! Ball jump down stairs. LiuHH move the first design (ball jump upstairs) to %%Draw button example 2 ("Box 1 input XYGraph code") The title "Jump upstairs, watch the moon; Ask moon lady, how much worry she had?" is a translation from Chinese version. Use 'worry' instead of 'happiness', since Chinese version has rhyme. <a name="docA021">&lt;a name="docA021"&gt;</a> After move to example 2. Re-draw "##Draw" example, let ball be fall from upstairs to down stairs. Down stairs ball is a parallel move of upstairs ball. On 2011-01-11-11-24 when use parallel move utility at page <a href="xygraph4.htm#textbox1">xygraph4.htm</a> LiuHH get a big surprise, parallel move function not work !! <a name="docA022">&lt;a name="docA022"&gt;</a> Why I did not find it before 2011-01-07 upload ?? Immediately 2011-01-11 updated parallel_move on xygraph4.htm. After this correction LiuHH back to xygraphe.htm. The main change is add "Axes cross at x= , y=" for this model page. <a name="docA023">&lt;a name="docA023"&gt;</a> xygraphe.htm is designed for visitor write his/her own graph page. Therefore xygraphe.htm do not have link to freeman2.com standard page top message rocsitee.js 2011-01-12-11-42 stop </font></pre> <br> <hr><br> Javascript index <br> <a href=http://freeman2.com/jsindex2.htm> http://freeman2.com/jsindex2.htm </a> &nbsp; <a href=jsindex2.htm> local </a> <!--9810201450 add local link--> <br> Save graph code to same folder as htm files. <br> <a href=http://freeman2.com/jsgraph2.js> http://freeman2.com/jsgraph2.js </a> &nbsp; <a href=jsgraph2.js> local </a> <br> <script src="jslist1e.js" language="javascript"></script> <br> <br> <br> <br> This file xygraphe.htm is created on 2010-12-16 <br> <br> This page URL <br> <a href=http://freeman2.com/xygraphe.htm> http://freeman2.com/xygraphe.htm </a> <br> Chinese version URL <br> <a href=http://freeman2.com/xygraphc.htm> http://freeman2.com/xygraphc.htm </a> <br> First upload 2010-12-22 <br> <br> Thank you for visiting Freeman's web site <br> Freeman 2010-12-22 <br> (Freeman's name is Liu, HsinHan &#21129;&#37995;&#28450;) <br> <br> </BODY> </HTML> <SCRIPT language=JavaScript> <!-- //9912120858 function runTestCode(arg1) { //9912292223 move next two if() to top //9912292225 ok right if(typeof(xyatL)=='function') //9912292210 xyatL(QSxatL,QSyatL); //9912292211 if(typeof(xyaxis01)=='function') xyaxis01(QSchkbxID01); //9912292212 var MyGraph = new XYGraph(); var MyLine1 = new XYLine(); MyLine1.VMLpointshapetype="none"; if(typeof(QSdivGraph10)=="object") QSdivGraph10.innerHTML = ""; MyGraph.ymax=QSboxYmax0.value; MyGraph.ymin=QSboxYmin0.value; MyGraph.xmax=QSboxXmax0.value; MyGraph.xmin=QSboxXmin0.value; MyGraph.gheight=QSboxHeight0.value; MyGraph.gwidth=QSboxWidth0.value; showXYcoord1orNot0=1; if(typeof(QSchkbxID01)=='object') if(!QSchkbxID01.checked) showXYcoord1orNot0=0; //9912172128 if(arg1==0) //9912120909 { MyLine1.x=[0,0]; MyLine1.y=[0,0]; MyGraph.Plot(MyLine1); QSdivGraph10.innerHTML = MyGraph; return; //9912120910 } //Above code is common to all parts. // // var inStr1=arg1; //9912121145 var inStr2; var bgn1,end1; bgn1=inStr1.indexOf('//[[[') end1=inStr1.indexOf('//]]]') if(bgn1>0&&end1>0) inStr2=inStr1.substring(bgn1,end1) else inStr2=inStr1; eval(inStr2); //9911231335 // // //All line code, label code must be above here. //must be before next "... = MyGraph" line. QSdivGraph10.innerHTML = MyGraph; } //function runTestCode(arg1) 9912120915 //always open drawing board. 9912120911 runTestCode(0) //[=][][] --> </SCRIPT> <SCRIPT language=JavaScript> <!-- var example1='' //a001111020 +'MyGraph.xmin=QSboxXmin0.value=-3;\nMyGraph.xmax=QSboxXmax0.value=+3;\nMyGraph.ymin=QSboxYmin0.value=-3;\nMyGraph.ymax=QSboxYmax0.value=+3;\n//2D x[], y[] data.\n' +'//total 6 curves. 9912112315\n//Parallel projection. bigger\n\n//First Greenwich greater circle, all white color and deleted.\n\n//Second (Á, Æ, ¸) greater circle front arc.\nMyLine1.x=[0,0.193,0.38,0.555,0.652]\nMyLine1.y=[1.724,1.551,1.331,1.071,0.899]\nMyLine1.VMLstroke="weight=2; color=#dd6090; dashstyle=solid;";\nMyGraph.Plot(MyLine1);\n\n//Second (Á, Æ, ¸) greater circle back arc.\nMyLine1.x=[0.652,0.961,1.043,1.093,1.109,1.093,1.043,0.961,0.85,0.713,0.555,0.38,0.193,0,-0.191,-0.378,-0.553,-0.711,-0.848,-0.959,-1.041,-1.091,-1.107,-1.091,-1.041,-0.959,-0.848,-0.711,-0.553,-0.378,-0.191,0]\nMyLine1.y=[0.899,0.131,-0.202,-0.531,-0.843,-1.128,-1.381,-1.591,-1.753,-1.861,-1.913,-1.906,-1.843,-1.722,-1.55,-1.329,-1.07,-0.777,-0.461,-0.13,0.204,0.532,0.843,1.13,1.382,1.592,1.754,1.862,1.914,1.908,1.844,1.724]\nMyLine1.VMLstroke="weight=1; color=silver; dashstyle=solid;";\nMyGraph.Plot(MyLine1);\n\n//3rd equator great circle front arc.\nMyLine1.x=[-0.391,-0.045,0.302,0.641,0.961,1.109]\n' +'MyLine1.y=[-0.993,-1.013,-1.001,-0.96,-0.889,-0.843]\nMyLine1.VMLstroke="weight=2; color=blue; dashstyle=solid;";\nMyGraph.Plot(MyLine1);\n\n//3rd equator great circle back arc\nMyLine1.x=[1.109,1.502,1.708,1.864,1.961,2,1.976,1.894,1.754,1.561,1.32,1.039,0.726,0.392,0.047,-0.3,-0.639,-0.959,-1.248,-1.5,-1.707,-1.862,-1.959,-1.998,-1.975,-1.893,-1.752,-1.559,-1.318,-1.037,-0.725,-0.391]\nMyLine1.y=[-0.843,-0.668,-0.526,-0.367,-0.198,-0.023,0.153,0.325,0.487,0.633,0.761,0.866,0.945,0.994,1.013,1.002,0.96,0.889,0.791,0.669,0.526,0.368,0.199,0.023,-0.152,-0.324,-0.486,-0.633,-0.761,-0.865,-0.944,-0.993]\nMyLine1.VMLstroke="weight=1; color=silver; dashstyle=solid;";\nMyGraph.Plot(MyLine1);\n\n//Fourth small circle, deleted.\n\n//5th ground (i,j,k) tripod\nMyLine1.x=[-0.587,0,2.942,0,0]\nMyLine1.y=[-1.491,0,-0.297,0,2.586]\nMyLine1.VMLstroke="weight=1; color=#cccccc; dashstyle=solid;";\nMyGraph.Plot(MyLine1);\n\n//6th rotated(l,m,n) tripod\nMyLine1.x=[1.035,0.555,1.387,0.555,0.832]\n' +'MyLine1.y=[0.275,1.071,1.352,1.071,1.606]\nMyLine1.VMLstroke="weight=1; color=#ff0000; dashstyle=solid;";\nMyGraph.Plot(MyLine1);\n\n//Sphere rim\nMyLine1.x=[2,1.97,1.879,1.732,1.532,1.286,1,0.684,0.347,0,-0.346,-0.683,-0.999,-1.285,-1.531,-1.731,-1.878,-1.969,-1.999,-1.969,-1.878,-1.731,-1.531,-1.285,-0.999,-0.683,-0.346,0,0.347,0.684,1,1.286,1.532,1.732,1.879,1.97,2]\nMyLine1.y=[0,0.347,0.684,1,1.286,1.532,1.732,1.879,1.97,2,1.97,1.879,1.732,1.532,1.286,1,0.684,0.347,0,-0.346,-0.683,-0.999,-1.285,-1.531,-1.731,-1.878,-1.969,-1.999,-1.969,-1.878,-1.731,-1.531,-1.285,-0.999,-0.683,-0.346,0]\nMyLine1.VMLstroke="weight=1; color=#999999; dashstyle=solid;";\nMyGraph.Plot(MyLine1);\nMyLine1.x=[0.555,0,0.555,0.555,-0.138,0.555,0.693]\nMyLine1.y=[-0.421,0,1.071,-0.421,-0.351,-0.421,-0.069]\nMyLine1.VMLstroke="weight=1; color=black; dashstyle=solid;";\nMyGraph.Plot(MyLine1);\n\n/***** Spherical coordinate #37995#28450;9912142108 *****/\n\n/***** Arrow code start *****/\nMyLine1.x=[0.924,1.109,0.861,1.109,0.961]\n' +'MyLine1.y=[-1.01,-0.842,-0.808,-0.842,-0.888]\nMyLine1.VMLstroke="weight=2; color=blue; dashstyle=solid;";\nMyGraph.Plot(MyLine1);\n\nMyLine1.x=[0.341,0.555,0.516,0.555,0.38]\nMyLine1.y=[1.2,1.071,1.318,1.071,1.331]\nMyLine1.VMLstroke="weight=2; color=red; dashstyle=solid;";\nMyGraph.Plot(MyLine1);\n\nMyLine1.x=[0.501,0.555,0.386,0.555,0]\nMyLine1.y=[0.827,1.071,0.886,1.071,0]\nMyLine1.VMLstroke="weight=1; color=black; dashstyle=solid;";\nMyGraph.Plot(MyLine1);\n\n/***** Arrow code stop. #37995#28450;9911091335 *****/\n\n//labelSection begin\nvar MyLabel = new Label();\nMyLabel.labelsize = "14";\nMyLabel.VMLpointshapetype="none";\nMyLabel.labelcolor="black";\nMyLabel.rotation = +0;\nMyLabel.pointfillcolor="red";\n MyLabel.x =0.2;\n MyLabel.y =0.3;\n MyLabel.label = "Á";\nMyGraph.Drawlabel(MyLabel);\n\n MyLabel.x =0.4;\n MyLabel.y =1.2;\n MyLabel.label = "Æ";\nMyGraph.Drawlabel(MyLabel);\n\n MyLabel.x =0.4;\n MyLabel.y =-1.25;\n MyLabel.label = "¸";\nMyGraph.Drawlabel(MyLabel);\n\n' +' MyLabel.x =0.0;\n MyLabel.y =2.5;\n MyLabel.label = "http://en.wikipedia.org/wiki/";\nMyGraph.Drawlabel(MyLabel);\n\n MyLabel.x =0.0;\n MyLabel.y =2.1;\n MyLabel.label = "Spherical%20coordinate%20system";\nMyGraph.Drawlabel(MyLabel);\n\n MyLabel.x =0.;\n MyLabel.y =-3.0;\n MyLabel.label = "LiuHH added triangle and tripod";\nMyGraph.Drawlabel(MyLabel);\n' var example2='' //a001111016 +'MyGraph.xmin=QSboxXmin0.value=-1;\nMyGraph.xmax=QSboxXmax0.value=+5;\nMyGraph.ymin=QSboxYmin0.value=-1;\nMyGraph.ymax=QSboxYmax0.value=+5;\n' +'/***** Shade code start *****/\nvar shadeIn="0.0 0.0 1.0 0.0 1.0 1.0 2.0 1.0 2.0 2.0 3.0 2.0 3.0 3.0 4.0 3.0 4.0 4.0 5.0 4.0";\nif(typeof(cleanData)=="function")\nshadeIn=cleanData(shadeIn);\nvar shadLen=0.15;\nvar shadDeg=135;\nvar is4or1=4;\nif(shadLen<0.01){is4or1=1;shadDeg=91}\nvar shadRad=2.356194490192345;\nvar shadSpace=0.25;\nvar lineRad;\nvar dx,dy;\nvar lx,ly;\nvar sx,sy;\nvar lineLen;\nvar shadPcs;\nvar semiloc0=semiloc1=-1;\nvar inStr1="";\nvar xycoord;\nvar count0,i,j,k;\nvar xbgn,ybgn,xend,yend;\nvar s0=0;\nvar s1=1;\nvar totpts=0;\nif(shadDeg>90||shadDeg<-90){s0=1;s1=0;}\nMyLine1.VMLstroke="weight=1; color=black; dashstyle=solid;";\nwhile(1)\n {\nsemiloc1=shadeIn.indexOf(";",semiloc0+1);\nif(semiloc1<0)semiloc1=shadeIn.length;\ninStr1=shadeIn.substring(semiloc0+1,semiloc1)\nxycoord=inStr1.split(" ");\nfor(i=0;i<xycoord.length;i++)\nxycoord[i]=parseFloat(xycoord[i]);\nif(xycoord.length>3)\n {\n//main work here\ncount0=0;\nwhile(count0*2<xycoord.length)\n' +' {\nxbgn=count0*2+0\nybgn=count0*2+1\nxend=count0*2+2\nyend=count0*2+3\nlx=xycoord[xend]-xycoord[xbgn];\nly=xycoord[yend]-xycoord[ybgn];\nlineRad=Math.atan2(ly,lx);\nlineLen=Math.sqrt(lx*lx+ly*ly);\nshadPcs=parseInt(lineLen/shadSpace);\nif(shadPcs<=0)shadPcs=1;\nsx=shadLen*Math.cos(lineRad-shadRad);\nsy=shadLen*Math.sin(lineRad-shadRad);\ndx=lx/shadPcs;\ndy=ly/shadPcs;\nMyLine1.x=[]\nMyLine1.y=[]\nfor(i=0;i<shadPcs;i++)\n {\nMyLine1.x[0+i*is4or1]=xycoord[xbgn]+i*dx\nMyLine1.y[0+i*is4or1]=xycoord[ybgn]+i*dy\nMyLine1.x[1+i*is4or1]=xycoord[xbgn]+i*dx +dx*s0 +sx*s1\nMyLine1.y[1+i*is4or1]=xycoord[ybgn]+i*dy +dy*s0 +sy*s1\nif(is4or1!=4)continue;\nMyLine1.x[2+i*is4or1]=xycoord[xbgn]+i*dx +dx*s0 +sx*s0\nMyLine1.y[2+i*is4or1]=xycoord[ybgn]+i*dy +dy*s0 +sy*s0\nMyLine1.x[3+i*is4or1]=xycoord[xbgn]+i*dx+dx\nMyLine1.y[3+i*is4or1]=xycoord[ybgn]+i*dy+dy\n } //for(i=0;i<shadPcs;i++)\ntotpts+=MyLine1.x.length;\nMyGraph.Plot(MyLine1);\ncount0++;\n } //while(count0*2<xycoord.length) \n' +' } //if(xycoord.length>3)\nif(semiloc1>=shadeIn.length)break;\nsemiloc0=semiloc1+1;\n } //while(1) \nstatus="Shade draw "+totpts+" points."\n/***** Shade code stop. #37995#28450;9911091335 *****/\n//\n\nMyLine1.x=[3.1,3.063,3.025,2.988,2.95,2.913,2.875,2.838,2.8,2.763,2.725,2.688,2.65,2.613,2.575,2.538,2.5]\nMyLine1.y=[4,3.998,3.98,3.945,3.894,3.827,3.742,3.643,3.525,3.394,3.242,3.078,2.894,2.698,2.48,2.251,2]\nMyLine1.VMLstroke="weight=1; color=red; dashstyle=solid;";\nMyGraph.Plot(MyLine1);\nMyLine1.x=[2.5,2.438,2.375,2.313,2.25,2.188,2.125,2.063,2,1.938,1.875,1.813,1.75,1.688,1.625,1.563,1.5]\nMyLine1.y=[2,2.277,2.513,2.7,2.844,2.94,2.992,2.998,2.958,2.874,2.742,2.567,2.344,2.078,1.763,1.407,1]\nMyLine1.VMLstroke="weight=1; color=red; dashstyle=solid;";\nMyGraph.Plot(MyLine1);\nMyLine1.x=[1.5,1.438,1.375,1.313,1.25,1.188,1.125,1.063,1,0.938,0.875,0.813,0.75,0.688,0.625,0.563,0.5]\nMyLine1.y=[1,1.277,1.513,1.7,1.844,1.94,1.992,1.998,1.958,1.874,1.742,1.567,1.344,1.078,0.763,0.407,0]\n' +'MyLine1.VMLstroke="weight=1; color=red; dashstyle=solid;";\nMyGraph.Plot(MyLine1);\n/***** Three quadratic #37995#28450;9911252359 *****/\n//\n\nMyLine1.x=[3.65,3.602,3.477,3.323,3.198,3.15,3.198,3.323,3.477,3.602,3.65,3.4];\nMyLine1.y=[4,4.147,4.238,4.238,4.147,4,3.853,3.762,3.762,3.853,4];\nMyLine1.VMLstroke="weight=1; color=black; dashstyle=solid;";\nMyGraph.Plot(MyLine1); //9911140908\n\n//labelSection begin\nvar MyLabel = new Label();\nMyLabel.labelsize = "14";\nMyLabel.VMLpointshapetype="none";\nMyLabel.labelcolor="black";\nMyLabel.rotation = +0;\nMyLabel.pointfillcolor="red";\n\n MyLabel.x =2.0;\n MyLabel.y =4.4;\n MyLabel.label = "Jump upstairs, watch the moon;";\nMyGraph.Drawlabel(MyLabel);\n MyLabel.x =2.0;\n MyLabel.y =4.0;\n MyLabel.label = "Ask moon lady, how much worry she had?";\nMyGraph.Drawlabel(MyLabel);\n\n ' QSboxd01.value=example1; //a001112107 //9912281706 did not use arg1,arg2 //code as "if(typeof(QSxatL)=='object')" //above lock 'QSxatL' to code, not flexible //below better code. //9912292207 use arg1,arg2 //code as "if(typeof(arg1)=='object')" // function xyatL(arg1,arg2) { var x,y; xatL=0; yatL=0; if(typeof(arg1)=='object') x=arg1.value; if(!isNaN(x))xatL=x; if(typeof(arg2)=='object') y=arg2.value; if(!isNaN(y))yatL=y; } //function xyatL(arg1,arg2) 9912281709 function xyaxis01(arg1) { //9912282055 //9912292155 replace QSchkbxID01 with arg1 showXYcoord1orNot0=1; if(typeof(arg1)=='object') if(!arg1.checked) showXYcoord1orNot0=0; //9912281732 } //9912282056 //--> </SCRIPT> <!-- 99,12,16,15,27 copy xygraphe.htm xygraphe.htm -->