kberg/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="http://dygraphs.com/dygraph-combined-dev.js"></script>
    <script type="text/javascript" src="http://dygraphs.com/extras/shapes.js"></script>
  </head>
  <style>
    body {
      margin-top:40px;
    }
  </style>
  <body>
    <script type="text/javascript">
      var smile = function(g, series, ctx, cx, cy, color, radius) {
        mouthlessFace(g, series, ctx, cx, cy, color, radius);

        ctx.fillStyle = "#000000";
        ctx.beginPath();
        ctx.arc(cx, cy, radius - 2, .3, Math.PI - .3, false);
        ctx.stroke();
      };

      var frown = function(g, series, ctx, cx, cy, color, radius) {
        mouthlessFace(g, series, ctx, cx, cy, color, radius);

        ctx.lineWidth = 1;
        ctx.fillStyle = "#000000";
        ctx.beginPath();
        ctx.arc(cx, cy + radius, radius - 2, Math.PI + .3, -.3, false);
        ctx.stroke();
      };

      var mouthlessFace = function(g, series, ctx, cx, cy, color, radius) {
        ctx.lineWidth = 1;
        ctx.strokeStyle = "#000000";
        ctx.fillStyle = "#FFFF00";
        ctx.beginPath();
        ctx.arc(cx, cy, radius, Math.PI * 2, false);
        ctx.closePath();
        ctx.stroke();
        ctx.fill();

        ctx.fillStyle = "#000000";
        ctx.beginPath();
        ctx.arc(cx - (radius / 3) , cy - (radius / 4), 1, Math.PI * 2, false);
        ctx.closePath();
        ctx.stroke();
        ctx.fill();

        ctx.beginPath();
        ctx.arc(cx + (radius / 3) , cy - (radius / 4), 1, Math.PI * 2, false);
        ctx.closePath();
        ctx.stroke();
        ctx.fill();
      };

      var opts = {
          drawPoints : true,
          pointSize : 5,
          highlightCircleSize : 8,
          width: 800,
          height: 400
      };

      var shapes = [];
      var addShape = function(name, pointFn, highlightPointFn) {
        shapes.push(name);
        if (!opts['series']) opts['series'] = {};
        opts.series[name] = {
          drawPointCallback: pointFn,
          drawHighlightPointCallback: highlightPointFn
        };
      };

      for (var shape in Dygraph.Circles) {
        if (!Dygraph.Circles.hasOwnProperty(shape)) continue;
        var fn = Dygraph.Circles[shape];
        if (typeof fn !== 'function') continue;
        addShape(shape.toLowerCase(), fn, fn);
      };
      addShape('custom', frown, smile);

      var div = document.createElement('div');
      document.body.appendChild(div);

      var yFunc = function(x, c, n) {
        return x / 3 + c * 10;
      };

      var g = new Dygraph(
        div,
        function() {
          var r = "xval," + shapes.join(',') + "\n";
          var n = shapes.length;
          for (var i=1; i<=20; i++) {
            r += i;
            for (var j = 0; j < n; j++) {
              r += "," + yFunc(i, j, n);
            }
            r += "\n";
          }
          return r;
        }, opts);

    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="http://dygraphs.com/dygraph-combined-dev.js"></script>
	<script type="text/javascript" src="http://dygraphs.com/extras/shapes.js"></script>
	</head>
	<style>
	body {
	margin-top:40px;
	}
	</style>
	<body>
	<script type="text/javascript">
	var smile = function(g, series, ctx, cx, cy, color, radius) {
	mouthlessFace(g, series, ctx, cx, cy, color, radius);

	ctx.fillStyle = "#000000";
	ctx.beginPath();
	ctx.arc(cx, cy, radius - 2, .3, Math.PI - .3, false);
	ctx.stroke();
	};

	var frown = function(g, series, ctx, cx, cy, color, radius) {
	mouthlessFace(g, series, ctx, cx, cy, color, radius);

	ctx.lineWidth = 1;
	ctx.fillStyle = "#000000";
	ctx.beginPath();
	ctx.arc(cx, cy + radius, radius - 2, Math.PI + .3, -.3, false);
	ctx.stroke();
	};

	var mouthlessFace = function(g, series, ctx, cx, cy, color, radius) {
	ctx.lineWidth = 1;
	ctx.strokeStyle = "#000000";
	ctx.fillStyle = "#FFFF00";
	ctx.beginPath();
	ctx.arc(cx, cy, radius, Math.PI * 2, false);
	ctx.closePath();
	ctx.stroke();
	ctx.fill();

	ctx.fillStyle = "#000000";
	ctx.beginPath();
	ctx.arc(cx - (radius / 3) , cy - (radius / 4), 1, Math.PI * 2, false);
	ctx.closePath();
	ctx.stroke();
	ctx.fill();

	ctx.beginPath();
	ctx.arc(cx + (radius / 3) , cy - (radius / 4), 1, Math.PI * 2, false);
	ctx.closePath();
	ctx.stroke();
	ctx.fill();
	};

	var opts = {
	drawPoints : true,
	pointSize : 5,
	highlightCircleSize : 8,
	width: 800,
	height: 400
	};

	var shapes = [];
	var addShape = function(name, pointFn, highlightPointFn) {
	shapes.push(name);
	if (!opts['series']) opts['series'] = {};
	opts.series[name] = {
	drawPointCallback: pointFn,
	drawHighlightPointCallback: highlightPointFn
	};
	};

	for (var shape in Dygraph.Circles) {
	if (!Dygraph.Circles.hasOwnProperty(shape)) continue;
	var fn = Dygraph.Circles[shape];
	if (typeof fn !== 'function') continue;
	addShape(shape.toLowerCase(), fn, fn);
	};
	addShape('custom', frown, smile);

	var div = document.createElement('div');
	document.body.appendChild(div);

	var yFunc = function(x, c, n) {
	return x / 3 + c * 10;
	};

	var g = new Dygraph(
	div,
	function() {
	var r = "xval," + shapes.join(',') + "\n";
	var n = shapes.length;
	for (var i=1; i<=20; i++) {
	r += i;
	for (var j = 0; j < n; j++) {
	r += "," + yFunc(i, j, n);
	}
	r += "\n";
	}
	return r;
	}, opts);

	</script>
	</body>
	</html>