dygraph.js を使って関数を描画

ここでいう関数とは、数学の関数のこと。

headタグ内

<script type="text/javascript" src="js/dygraph-combined.js"></script>
<script type="text/javascript">
  function plot(graphArea, fromX, toX, fn) {
    var graph = document.getElementById(graphArea);
    var width = parseInt(graph.style.width);
    var xs = 1.0 * (toX - fromX) / width;

    var data = [];
    for (var i = 0; i < width; i++) {
      var x = fromX + 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);
    }

    g = new Dygraph(graph, data);
  }
</script>

bodyタグ内

<div id="graph" style="margin: 10px auto; width:512px; height:400px;"></div>
<script type="text/javascript">
  plot("graph", -1.5, 1.5, function(x){
    return Math.cos(x);
  });
</script>

これを使ってグラフを描くと…