Math example 1 to 20
Title:
Below is math curve only, not apply to statistic data.
Function 1x:
Function 1y:
Function 2x:
Function 2y:
t increment:
0.01=small => slow => smooth
1000 points/curve. If incomplete, increase [t increment].
t1 Min:
t1 Max:
t2 Min:
t2 Max:
If t min/max depend on 'a' or 'b',
must define min/max in
source code. See source example1
at key string "min0max"
This user interface is less flexible.
Unable to care detail.
Different 'a', 'b' get different member of a family curve.
constant 'a'
constant 'b'
Above is math curve only, not apply to statistic data.
curve width
curve color
DashStyle
Five columns, each column for 1 curve.

Below define drawing board size and X,Y axis range.
board width
height
in pt.
Adjust board size or XY range to make X:Y=1:1
min X
max X
min Y
max Y

C
L
O
S
E
2

95,06,13,23,44
Javascript support the following math functions
[[
Math.E 2.718281828459045091 Euler's constant
Math.LN2 0.6931471805599452862 Natural log of 2
Math.LN10 2.302585092994045901 Natural log of 10
Math.LOG2E 1.442695040888963387 Log base-2 of E
Math.LOG10E 0.4342944819032518167 Log base-10 of E
Math.PI 3.141592653589793116 PI
Math.SQRT1_2 0.7071067811865475 Square root of 0.5
Math.SQRT2 1.414213562373095145 Square root of 2
Math.random() method takes no parameters
Math.abs(val) Absolute value of val
Math.acos(val) Arc cosine (in radians) of val
Math.asin(val) Arc sine (in radians) of val
Math.atan(val) Arc tangent (in radians) of val
Math.atan2(val1, val2) Angle of polar coordinates
Math.ceil(val) Next integer greater than or equal
Math.cos(val) Cosine of val
Math.exp(val) Euler's constant to the power of val
Math.floor(val) Next integer less than or equal to
Math.log(val) Natural logarithm (base e) of val
Math.max(val1, val2) The greater of val1 or val2
Math.min(val1, val2) The lesser of val1 or val2
Math.pow(val1, val2) Val1 to the val2 power
Math.random() Random number between 0 and 1
Math.round(val) N+1 when val >= n.5; otherwise N
Math.sin(val) Sine (in radians) of val
Math.sqrt(val) Square root of val
Math.tan(val) Tangent (in radians) of val
]]
for
hyperbolic cosine, use
0.5*(Math.exp(x)+Math.exp(-x))
hyperbolic sine, use
0.5*(Math.exp(x)-Math.exp(-x))
Step function: stepf(a,b)
If a<b return 0 (close)
otherwise return 1 (open)
Any number multiply by 0 get 0
that is to close.
Any number multiply by 1 get itself
that is to open.
Above is to multiply stepf()
If add or subtract stepf() then it
is shift curve up/down.
One of a,b must be variable. If
both a and b are constant, then
stepf() has no meaning. 9507211227
Gamma function gamma(t)
If t is an integer gamma(t) is (t-1)!
gamma(t) let factorial become
continuous.
gamma(t) is searched from Internet.
9507211232
2006-06-23-12-41 start
This program is received on 2006-06-12
2006-06-12-18-14
http://www.bigwebmaster.com/3051.html
2006-06-12-18-21
http://www.structura.info/XYGraph/XYGraph.zip
This program plot mathematics functions.
It plot better curves. After read the document
and source code. The curve definition is easy.
User can define parametric form equations. It
is possible to plot whole circle.
Freeman receive this program and add several
sample curves definition. There are two type
button on top of the page. They are
and and
"[Plot]1" mean when '1' is in box, press [Plot]
[Plot] button curves have two and more arrow
and label. Need direct coding.
[Plot]1 is XYGraph original mathematics curve
example. Its variable range depend upon
constant coefficient. This curve has two
label and six arrow.
[Plot]2 is Freeman first exercise curve. Its
drawing board is larger, label/arrow
command are correct. This curve has two
label and two arrow.
[Plot]3 is a non-mathematics curve. This is a
drawing which represent harmony.
Ancient China's understanding that the
universe is composed with two type of
elements: positive and negative. (0/1)
when positive/negative work together
they bring harmony to us. This drawing
has six equation definitions.
Above is [Plot] button three curve/drawings,
input-box method is not designed for
it. Since input-box method allow only
one label/one arrow.
Below is [Draw] button. It has 12 curve
definitions.
[Draw] button use input-box method. curves
can use only one arrow & one label
and two equation definitions.
Since input form is limited.
Before click [Draw] button, first fill a
number (1 to 11) in the selection box.
Then click [Get] button. Data specified
in the selection box will auto fill into
places. You can modify data, then click
[Draw].
[Draw]-default is a data pre-filled curve.
Do not put any number in number
selection box. Just click [Draw] at
start up time.
[Draw]-default is Hippopede curve. It is
a peanut-like (with shell) curve.
Inner two curve have square root of
negative number. Program still able
to skip 'NaN' and not cause error.
[Draw]1 to [Draw]10 are all documented at
bottom of the drawing.
[Draw]51 is Drawing-at-large. Put any
number other than 1 to 11 in the
selection box you get [Draw]51
[Plot]3 is the same.
[SDraw] is Statistic Draw.
Like [Draw], [SDraw] let user control.
([Plot] button user has no control.)
Unlike [Draw], [SDraw] read data from
input box1 to box5. ([Draw] get data
from math equation)
If user want to do better job, code the
curve definition. Goto to [if(jobID==1)]
body. learn what to do.
An equation has variable which allow a
point move on the curve (or surface).
An equation has constant which specify a
path for which an on-line-point can move.
A constant can not be a variable.
A variable can not be a constant either.
A "variable-constant" is a constant.
For one given value of this constant get
one curve.
For second value of the same constant get
second curve.
Although two curves are different, not
coincide. two curves belong to one family.
They have similar equation, just differ in
constant. In this case "variable-constant"
is a meaningful concept.
You can use this program
http://freeman2.com/graph03e.htm in MSIE 6.0.
Netscape 8.0 give error message
"graphdiv is not defined"
If you like to keep the curve you plot.
Press and hold control-key, then press
'prt scr' key. Next open Paint.exe and
paste the screen picture to Paint. Select
the curve and copy or cut.
Freeman 2006-06-26-09-13
2006-06-28-19-16 start
First time Upload on 2006-06-26.
First version draw mathematics curves
but not draw statistic curves.
Statistic curve data is recorded by
observation and no math function to
describe it.
This version add three more input box
allow five statistic curve data be
drawn.
Known trouble is that if
line1 has 300 points
line2 has 100 points
First time draw line1 no trouble
Second time draw line2 get trouble
First 100 points belong to line2 show up
from point 101 to point 300 also show up
but they are line1 tail!
[[
Do the reverse way, draw short line first,
draw long line second, no trouble.
]]
Freeman try to redefine
var MyLine1 = new XYLine();
for each new curve data, but useless.
Try to erase MyLine1 (then define again)
free MyLine1.x; //9506281650
free MyLine1.y;
free MyLine1.labels;
free MyLine1;
useless. 'free' is C language command.
Try to use array of MyLine1 object.
var SDLine = new Array(5);
SDLine[0]=new XYLine();
.....
SDLine[4]=new XYLine();
useless
Then try if '\0' will cut off old data.
It does cut off. But only line1 show up.
There must be some method get around this
trouble. Freeman is programming outsider.
Today (2006-06-28) still do not know how
to solve it.
If you draw two curves to five curves.
put shortest data in box1, longest data
in box5, hopefully get what you want.
If you really want to solve this problem
please go ask expert at
http://www.structura.info/XYGraph/XYGraphDemo.htm
XYGraph.js : v2.3 by J. Gebelein,
Contact: info@Structura.info
2006-06-28-19-38 here
The statistic curve data can be a long
string like
[[
1 2.31 2 2.56 3 3.27 4 2.85 5 3.41 6 3.68 7 3.92 .....
]]
can be paired data like
[[
1 2.31
2 2.56
3 3.27
4 2.85
5 3.41
6 3.68
7 3.92
.....
]]
Program treat
all odd number as x-coordinate, and
all even number as y-coordinate.
(first, third, fifth ... number are x coord
second, fourth, sixth ... are y coordinate)
Program read data, ignore ',', ignore ';'
and ignore newline. If data has error
(for example [0.1] mistake to [0,1])
then all following data mess up.
If you want program rely upon ';' as
data separator (one error will not extend
to the following), you need to modify the
source code.
2006-06-28-19-53 here
goto source code at key string "9506282004"
add one '/' to let ';' as data separator.
goto source code at key string "9506282006"
add one '/' to let newline as data separator.
Before modify code, please make a back up copy.
Default ignore ';' and ignore newline will
let you see an exaggerated error curve.
(So you can correct data quickly)
2006-06-28-20-30 stop
Only [SDraw] button read statistic curve data
All parameter are still in [Input%] button.
2006-06-29-10-24 start
If you have paired data for x and y coordinate
then this program work OK.
If you have data for y coordinate only, this
program can not work properly. You need to add
sequence number to each y data. Please goto
next page
Add line number; Delete line end white;
Fill ' ' at line end.
http://freeman2.com/jslnwln2.htm
Put y data in jslnwln2.htm>box1,
click select next line
[Line number like " 1" regular style.]
then click [** RUN **] button,
goto jslnwln2.htm>box2 get data. Now data
added line number which is
alternative-x-coordinate.
2006-06-29-10-31 stop
First time Upload 2006-06-26
Update 2006-06-30 add box4,5,6 allow statistic data curve.
Update 2006-07-01 correct at [9507012038] allow curve2
line color/width/solid-dash be defined.
Update 2006-07-02 correct at [9507012325] allow graph
ten examples re-appear. (9507012041 forget 'else')
Update 2006-07-09 add output for x,y coordinates ONLY.
Older version output to t,x,y coordinates.9507091207
Update 2006-07-13 modify document (see "950713").
Update 2006-07-21 add [del ALL] button,
add step function stepf()
add gamma function gamma() 9507211218
Update 2006-07-22 add sawtooth wave and allow
user change number of terms. 9507220640
JavaScript program list
http://freeman2.com/jsindex2.htm
Great Circle page (JavaScript program)
http://freeman2.com/jscircle.htm
Small Circle page (JavaScript program)
http://freeman2.com/jscircl2.htm
You specify city Longitude/Latitude value.
Circle program output the circle equation
in spherical coordinate which pass the
cities you specified. Circle locus printed.

For math curve, click
fill data, then
[Draw] button get x,y coordinate from mathematics equation.
For statistic data, how many curves to draw?
(1 to 5)
Still click
fill data, then click
[SDraw] button get x,y coordinate from input box1 to box5.
Statistic data example 1-3