prototype new drawing callbacks

var RegularConvex = function(sides, rotation) {
  this.sides = sides;
  this.rotation = rotation ? rotation : 0;
  this.delta = Math.PI * 2 / sides;
}
RegularConvex.prototype.draw = function(ctx, cx, cy, radius) {
   ctx.beginPath();
   var first = true;
   var angle = this.rotation;

   var x = cx + (Math.sin(angle) * radius);
   var y = cy + (-Math.cos(angle) * radius);
   ctx.moveTo(x, y);

   for (var idx = 0; idx < this.sides; idx++) {
     angle = (idx == this.sides - 1) ? this.rotation : (angle + this.delta);
     var x = cx + (Math.sin(angle) * radius);
     var y = cy + (-Math.cos(angle) * radius);
     ctx.lineTo(x, y);
   }
   ctx.stroke();
   ctx.closePath();
}

g = new Dygraph(
        document.getElementById("demodiv"),
        function() {
          var zp = function(x) { if (x < 10) return "0"+x; else return x; };
          var r = "date,parabola,line,another line,sine wave\n";
          for (var i=1; i<=31; i++) {
          r += "200610" + zp(i);
          r += "," + 10*(i*(31-i));
          r += "," + 10*(8*i);
          r += "," + 10*(250 - 8*i);
          r += "," + 10*(125 + 125 * Math.sin(0.3*i));
          r += "\n";
          }
          return r;
        },
        {
          strokeWidth: 2,
          'parabola': {
            strokeWidth: 0.0,
            drawPoints: true,
            pointSize: 4,
            highlightCircleSize: 6,
            drawPointCallback: function(g, series, ctx, cx, cy, color, radius) {
              ctx.strokeStyle = color;
              ctx.lineWidth = 1;
              new RegularConvex(4, Math.PI / 4).draw(ctx, cx, cy, radius);
            },
            highlightCircleCallback:  function(g, series, ctx, cx, cy, color, radius) {
              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.fillStyle = "#000000";
              ctx.beginPath();
              ctx.arc(cx + (radius / 3) , cy - (radius / 4), 1, Math.PI*2, false);
              ctx.closePath();
              ctx.stroke();
              ctx.fill();

              ctx.fillStyle = "#000000";
              ctx.beginPath();
              ctx.arc(cx, cy, radius - 2, .3, Math.PI - .3, false);
              ctx.stroke();
            }
          },
          'line': {
            strokeWidth: 1.0,
            drawPoints: true,
            pointSize: 2.5,
            drawPointCallback: function(g, series, ctx, cx, cy, color, radius) {
              ctx.beginPath();
              ctx.strokeStyle = color;

              ctx.arc(cx, cy, radius, 0, 2 * Math.PI, false);
              ctx.closePath();
              ctx.fillStyle = "#FFF";
              ctx.fill();

              ctx.beginPath();
              ctx.arc(cx, cy, radius, 0, 2 * Math.PI, false);
              ctx.closePath();
              ctx.strokeStyle = color;
              ctx.stroke();
            }
          },
          'sine wave': {
            strokeWidth: 3,
            highlightCircleSize: 10,
            drawPoints: true,
            pointSize: 6,
            drawPointCallback: function(g, series, ctx, cx, cy, color, radius) {
              ctx.lineWidth = 1;
              ctx.strokeStyle = "#f00";
              new RegularConvex(5, Math.PI / 5).draw(ctx, cx, cy, radius);
            },
            highlightCircleCallback:  function(g, series, ctx, cx, cy, color, radius) {
              ctx.lineWidth = 1;
              ctx.strokeStyle = "#444";
              new RegularConvex(5, Math.PI / 5).draw(ctx, cx, cy, radius);
            }
          }
        }
    );