4 <link rel=
"stylesheet" href=
"../css/dygraph.css">
5 <title>dygraphs Equation Plotter
</title>
7 For production (minified) code, use:
8 <script type=
"text/javascript" src=
"dygraph-combined.js"></script>
10 <script type=
"text/javascript" src=
"../dist/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++) {
39 if (data[
0].length ==
2) {
42 for (var i =
1; i < data[
0].length; i++) {
43 labels.push('Y' + (
1 + i));
47 g = new Dygraph(graph, data, {
53 var sel = document.getElementById(
"presets").selectedIndex;
54 var id = document.getElementById(
"presets").options[sel].id;
56 'id': [ -
10,
10, 'function(x) {
\n return x;
\n}' ],
57 'sine': [ -
10,
10, 'function(x) {
\n return Math.sin(x);
\n}' ],
58 'taylor': [ -
3,
3, 'function(x) {
\n return [Math.cos(x),
1 - x*x/
2 + x*x*x*x/
24];
\n}' ],
59 '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}' ]
62 if (id ==
"custom") { return; }
63 document.getElementById(
"x1").value = presets[id][
0];
64 document.getElementById(
"x2").value = presets[id][
1];
65 document.getElementById(
"eq").value = presets[id][
2];
70 <body onload=
"preset()">
71 <p><b>Equation:
</b><br/>
72 <textarea cols=
"40" rows=
"10" id=
"eq">function(x) {
73 return [
0.1 * x,
0.1 * x + Math.sin(x),
0.1*x + Math.cos(x)];
75 <b>Preset functions:
</b> <select id=presets
onchange=
"preset()">
76 <option id=custom
>(custom)
</option>
77 <option id=id
>Identity
</option>
78 <option id=sine
>Sine Wave
</option>
79 <option id=taylor
>Taylor series
</option>
80 <option selected id=sawtooth
>Sawtooth
</option>
84 <p><b>x range:
</b> <input type=text
width=
"5" id=
"x1" value=
"-10" />
85 to
<input type=text
width=
"5" id=
"x2" value=
"10" /></p>
86 <p><input type=button
value=
"Plot" onClick=
"plot()" /></p>
88 <div id=
"graph_div" style=
"width:1024px; height:400px;"></div>