4 <title>dygraphs Equation Plotter
</title>
6 <script type=
"text/javascript" src=
"../excanvas.js"></script>
8 <script type=
"text/javascript" src=
"../strftime/strftime-min.js"></script>
9 <script type=
"text/javascript" src=
"../rgbcolor/rgbcolor.js"></script>
10 <script type=
"text/javascript" src=
"../dygraph-canvas.js"></script>
11 <script type=
"text/javascript" src=
"../dygraph.js"></script>
12 <script type=
"text/javascript">
14 var eq = document.getElementById(
"eq").value;
17 var graph = document.getElementById(
"graph_div");
18 var width = parseInt(graph.style.width);
19 var x1 = parseFloat(document.getElementById(
"x1").value);
20 var x2 = parseFloat(document.getElementById(
"x2").value);
21 var xs =
1.0 * (x2 - x1) / width;
24 for (var i =
0; i < width; i++) {
29 for (var j =
0; j < y.length; j++) {
38 g = new Dygraph(graph, data);
42 var sel = document.getElementById(
"presets").selectedIndex;
43 var id = document.getElementById(
"presets").options[sel].id;
45 'id': [ -
10,
10, 'function(x) {
\n return x;
\n}' ],
46 'sine': [ -
10,
10, 'function(x) {
\n return Math.sin(x);
\n}' ],
47 'taylor': [ -
3,
3, 'function(x) {
\n return [Math.cos(x),
1 - x*x/
2 + x*x*x*x/
24];
\n}' ],
48 '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}' ]
51 if (id ==
"custom") { return; }
52 document.getElementById(
"x1").value = presets[id][
0];
53 document.getElementById(
"x2").value = presets[id][
1];
54 document.getElementById(
"eq").value = presets[id][
2];
59 <body onload=
"preset()">
60 <p><b>Equation:
</b><br/>
61 <textarea cols=
"40" rows=
"10" id=
"eq">function(x) {
62 return [
0.1 * x,
0.1 * x + Math.sin(x),
0.1*x + Math.cos(x)];
64 <b>Preset functions:
</b> <select id=presets
onchange=
"preset()">
65 <option id=custom
>(custom)
</option>
66 <option id=id
>Identity
</option>
67 <option id=sine
>Sine Wave
</option>
68 <option id=taylor
>Taylor series
</option>
69 <option selected id=sawtooth
>Sawtooth
</option>
73 <p><b>x range:
</b> <input type=text
width=
"5" id=
"x1" value=
"-10" />
74 to
<input type=text
width=
"5" id=
"x2" value=
"10" /></p>
75 <p><input type=button
value=
"Plot" onClick=
"plot()" /></p>
77 <div id=
"graph_div" style=
"width:1024px; height:400px;"></div>