Merge branch 'master' into plotter
[dygraphs.git] / docs / plotter.html
CommitLineData
6bef45dc
DV
1<html>
2 <head>
3 <title>dygraphs Equation Plotter</title>
4 <!--[if IE]>
5 <script type="text/javascript" src="excanvas.js"></script>
6 <![endif]-->
7 <script type="text/javascript" src="../dygraph-combined.js"></script>
8 <script type="text/javascript" src="../dygraph-canvas.js"></script>
9 <script type="text/javascript" src="../dygraph.js"></script>
10 <script type="text/javascript">
11 function plot() {
12 var eq = document.getElementById("eq").value;
13 eval("fn = " + eq);
14
15 var graph = document.getElementById("graph");
16 var width = parseInt(graph.style.width);
17 var x1 = parseFloat(document.getElementById("x1").value);
18 var x2 = parseFloat(document.getElementById("x2").value);
19 var xs = 1.0 * (x2 - x1) / width;
20
21 var data = [];
22 for (var i = 0; i < width; i++) {
23 var x = x1 + i * xs;
24 var y = fn(x);
25 data.push([x, y]);
26 }
27
28 g = new Dygraph(graph, data, { labels: ["x", "y"] });
29 }
30 </script>
31 </head>
32 <body>
33 <p><b>Equation: </b><br/>
34 <textarea cols="40" rows="10" id="eq">function(x) {
35 return Math.sin(x);
36}</textarea>
37 </p>
38 <p><b>x range: </b> <input type=text width="5" id="x1" value="-10" />
39 to <input type=text width="5" id="x2" value="10" /></p>
40 <p><input type=button value="Plot" onClick="plot()" /></p>
41
42 <div id=graph style="width:1024px; height:400px;"></div>
43 </body>
44</html>