-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathgraphTutorial.html
135 lines (103 loc) · 4.32 KB
/
graphTutorial.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<html> <head>
<script src="Histo.js"></script>
<script src="Func.js"></script>
<script src="Vector.js"></script>
<script src="Matrix.js"></script>
<script src="distributions.js"></script>
<script src="Plot.js"></script>
<script src="Graph.js"></script>
</head> <body>
<script type="text/JavaScript">
//-----The Graph() Object---------------------------------------
/*Clairvoyant can represent a set of two-dimensional data with
uncertainties as a graph with error bars. A simple example
graph can be created and drawn as follows.*/
//-----The Constructor---------------------------------------------
//Graph(<x>,<y>,<sigma x> <sigma y>)
// <x> Array() containing the values to be plotted horizontally (x-axis)
// <y> Array() containing the corresponding values to be plotted vertically (y-axis)
// <sigma x> (optional) Array() containing one-sided uncertainties for x coordinate (one sided ie enter 1 to represent the uncertainty on 5 +- 1)
// <sigma y> (optional) Array() containing one-sided uncertainties in y.
//A simple Graph():
var x = [];
x[0] = 1;
x[1] = 2;
x[2] = 3;
x[3] = 4;
x[4] = 5;
var y = [];
y[0] = 72.4;
y[1] = 89.1;
y[2] = 74.9;
y[3] = 60.6;
y[4] = 68.8;
var dx = [];
dx[0] = 0.1;
dx[1] = 0.1;
dx[2] = 0;
dx[3] = 0.1;
dx[4] = 0.2;
var dy = [];
dy[0] = 5;
dy[1] = 10;
dy[2] = 1;
dy[3] = 7;
dy[4] = 2;
var firstGraph = new Graph(x,y,dx,dy);
//-----draw() method--------------------------------------------------------------------
//draw(<canvas>, <xmin>, <xmax>, <ymin>, <ymax>, <title>, <x-axis label>, <y-axis label>)
// <canvas> String naming the HTML5 canvas object to draw on
// <xmin> minimum value of x in plot window
// <xmax> maximum value of x ''
// <ymin> minimum value of y ''
// <ymax> maximum value of y ''
// <title> String containing plot title
// <x-axis label> Sting containing x-axis label
// <y-axis label> Sting containing y-axis label
document.write('</br>/////////////////// .draw examples //////////////////////////////////</br>');
</script>
<canvas id="canvas1" width="600" height="450"></canvas>
<script type="text/JavaScript">
//try some PlotStyle() options on Graph() objects:
var style = new PlotStyle();
style.color = 'red';
style.lineWidth = 1;
style.marker = 'square';
firstGraph.draw('canvas1', 0, 6, 50, 100, 'data points', 'x-axis', 'y-axis', style);
//-----add() mehtod------------------------------------------------------------------
//add(<x>, <y>, <sigma x>, <sigma y>)
// <x> number or array containing x-axis values of points to be added
// <y> '' y-axis ''
// <sigma x> (optional)'' x-axis uncertainties of points to be added
// <sigma y> (optional)'' y-axis ''
//add appends more data points onto this Graph:
document.write('</br>/////////////////// .add examples //////////////////////////////////</br>');
firstGraph.add(6, 71, 0.1, 8);
var x2 = []
var y2 = []
var sigx2 = []
var sigy2 = []
x2[0] = 7; x2[1] = 8;
y2[0] = 53; y2[1] = 99;
sigx2[0] = 0.1; sigx2[1] = 0.1;
sigy2[0] = 4; sigy2[1] = 5;
firstGraph.add(x2, y2, sigx2, sigy2);
document.write('</br></br>The same points as above, without the style, and with three extra points added to the end. Notice that uncertainties get clipped if they leave the plot range!</br></br>');
</script>
<canvas id="canvas2" width="600" height="450"></canvas>
<script type="text/JavaScript">
firstGraph.draw('canvas2', 0, 9, 50, 100, 'data points', 'x-axis', 'y-axis');
//-----remove() mehtod------------------------------------------------------------------
//remove(<i>)
// <i> position of element to be removed from this object's member arrays
//remove removes the <i>th data point in the Graph, where i refers to the Array() address
//of that data point in this.x, this.y etc.
document.write('</br>/////////////////// .remove examples //////////////////////////////////</br>');
document.write('</br></br>The point at x=4 is gone:</br>');
firstGraph.remove(3);
</script>
<canvas id="canvas3" width="600" height="450"></canvas>
<script type="text/JavaScript">
firstGraph.draw('canvas3', 0, 9, 50, 100, 'data points', 'x-axis', 'y-axis');
</script>
</body> </html>