cleanup
[dygraphs.git] / tests / plotter.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
5 <title>dygraphs Equation Plotter</title>
6 <!--[if IE]>
7 <script type="text/javascript" src="../excanvas.js"></script>
8 <![endif]-->
9 <!--
10 For production (minified) code, use:
11 <script type="text/javascript" src="dygraph-combined.js"></script>
12 -->
13 <script type="text/javascript" src="../dygraph-dev.js"></script>
14
15 <script type="text/javascript">
16 function plot() {
17 var eq = document.getElementById("eq").value;
18 eval("fn = " + eq);
19
20 var graph = document.getElementById("graph_div");
21 var width = parseInt(graph.style.width);
22 var x1 = parseFloat(document.getElementById("x1").value);
23 var x2 = parseFloat(document.getElementById("x2").value);
24 var xs = 1.0 * (x2 - x1) / width;
25
26 var data = [];
27 for (var i = 0; i < width; i++) {
28 var x = x1 + i * xs;
29 var y = fn(x);
30 var row = [x];
31 if (y.length > 0) {
32 for (var j = 0; j < y.length; j++) {
33 row.push(y[j]);
34 }
35 } else {
36 row.push(y);
37 }
38 data.push(row);
39 }
40
41 var labels = ['X'];
42 if (data[0].length == 2) {
43 labels.push('Y');
44 } else {
45 for (var i = 1; i < data[0].length; i++) {
46 labels.push('Y' + (1 + i));
47 }
48 }
49
50 g = new Dygraph(graph, data, {
51 labels: labels
52 });
53 }
54
55 function preset() {
56 var sel = document.getElementById("presets").selectedIndex;
57 var id = document.getElementById("presets").options[sel].id;
58 var presets = {
59 'id': [ -10, 10, 'function(x) {\n return x;\n}' ],
60 'sine': [ -10, 10, 'function(x) {\n return Math.sin(x);\n}' ],
61 'taylor': [ -3, 3, 'function(x) {\n return [Math.cos(x), 1 - x*x/2 + x*x*x*x/24];\n}' ],
62 '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}' ]
63 };
64
65 if (id == "custom") { return; }
66 document.getElementById("x1").value = presets[id][0];
67 document.getElementById("x2").value = presets[id][1];
68 document.getElementById("eq").value = presets[id][2];
69 plot();
70 }
71 </script>
72 </head>
73 <body onload="preset()">
74 <p><b>Equation: </b><br/>
75 <textarea cols="40" rows="10" id="eq">function(x) {
76 return [0.1 * x, 0.1 * x + Math.sin(x), 0.1*x + Math.cos(x)];
77 }</textarea><br/>
78 <b>Preset functions:</b> <select id=presets onchange="preset()">
79 <option id=custom>(custom)</option>
80 <option id=id>Identity</option>
81 <option id=sine>Sine Wave</option>
82 <option id=taylor>Taylor series</option>
83 <option selected id=sawtooth>Sawtooth</option>
84 </select>
85 </p>
86
87 <p><b>x range: </b> <input type=text width="5" id="x1" value="-10" />
88 to <input type=text width="5" id="x2" value="10" /></p>
89 <p><input type=button value="Plot" onClick="plot()" /></p>
90
91 <div id="graph_div" style="width:1024px; height:400px;"></div>
92 </body>
93 </html>