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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dygraphs Equation Plotter</title>
<link rel="stylesheet" type="text/css" href="../dist/dygraph.css" />
<link rel="stylesheet" type="text/css" href="../common/vextlnk.css" />
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript"><!--//--><![CDATA[//><!--
function plot() {
var eq = document.getElementById("eq").value;
eval("fn = " + eq);
var graph = document.getElementById("graph_div");
var width = parseInt(graph.style.width);
var x1 = parseFloat(document.getElementById("x1").value);
var x2 = parseFloat(document.getElementById("x2").value);
var xs = 1.0 * (x2 - x1) / width;
var data = [];
for (var i = 0; i < width; i++) {
var x = x1 + i * xs;
var y = fn(x);
var row = [x];
if (y.length > 0) {
for (var j = 0; j < y.length; j++) {
row.push(y[j]);
}
} else {
row.push(y);
}
data.push(row);
}
var labels = ['X'];
if (data[0].length == 2) {
labels.push('Y');
} else {
for (var i = 1; i < data[0].length; i++) {
labels.push('Y' + (1 + i));
}
}
g = new Dygraph(graph, data, {
labels: labels
});
}
function preset() {
var sel = document.getElementById("presets").selectedIndex;
var id = document.getElementById("presets").options[sel].id;
var presets = {
'id': [ -10, 10, 'function(x) {\n return x;\n}' ],
'sine': [ -10, 10, 'function(x) {\n return Math.sin(x);\n}' ],
'taylor': [ -3, 3, 'function(x) {\n return [Math.cos(x), 1 - x*x/2 + x*x*x*x/24];\n}' ],
'sawtooth': [-10, 10, 'function(x) {\n var y = 0;\n for (var i = 1; i < 20; i+=2) {\n y += Math.sin(i * x)/i;\n }\n var final = 1 - 2*(Math.abs(Math.floor(x / Math.PI)) % 2);\n return [4/Math.PI * y, final];\n}' ]
};
if (id == "custom") { return; }
document.getElementById("x1").value = presets[id][0];
document.getElementById("x2").value = presets[id][1];
document.getElementById("eq").value = presets[id][2];
plot();
}
//--><!]]></script>
</head>
<body onload="preset()">
<p><b>Equation: </b><br />
<textarea cols="40" rows="10" id="eq">function(x) {
return [0.1 * x, 0.1 * x + Math.sin(x), 0.1*x + Math.cos(x)];
}</textarea><br />
<b>Preset functions:</b> <select id=presets onchange="preset()">
<option id=custom>(custom)</option>
<option id=id>Identity</option>
<option id=sine>Sine Wave</option>
<option id=taylor>Taylor series</option>
<option selected id=sawtooth>Sawtooth</option>
</select>
</p>
<p><b>x range: </b> <input type=text width="5" id="x1" value="-10" />
to <input type=text width="5" id="x2" value="10" /></p>
<p><input type=button value="Plot" onClick="plot()" /></p>
<div id="graph_div" style="width:1024px; height:400px;"></div>
</body>
</html>
|
