[dygraphs.git] / tests / plotter.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="../dist/dygraph.css">
    <title>dygraphs Equation Plotter</title>
    <script type="text/javascript" src="../dist/dygraph.js"></script>

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