[dygraphs.git] / tests / custom-circles.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
    <title>Custom Circles</title>
    <!--[if IE]>
    <script type="text/javascript" src="../excanvas.js"></script>
    <![endif]-->
    <!--
    For production (minified) code, use:
    <script type="text/javascript" src="dygraph-combined.js"></script>
    -->
    <script type="text/javascript" src="../dygraph-dev.js"></script>

  </head>
  <body>
    <h2>Custom circles and hover circles</h2>
    <div id="demodiv"></div>

    <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.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.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();
      };

      g = new Dygraph(
          document.getElementById("demodiv"),
          function() {

            var r = "xval,default,triangle,square,diamond,pentagon,hexagon,circle,star,plus,ex,custom\n";
            for (var i=1; i<=20; i++) {
              r += i;
              for (var j = 0; j < 11; j++) {
                r += "," + j + (i / 3);
              }
              r += "\n";
            }
            return r;
          },
          {
            drawPoints : true,
            pointSize : 5,
            highlightCircleSize : 8,
            'default' : {
              drawPointCallback : Dygraph.Circles.DEFAULT,
              drawHighlightPointCallback : Dygraph.Circles.DEFAULT
            },
            'triangle' : {
              drawPointCallback : Dygraph.Circles.TRIANGLE,
              drawHighlightPointCallback : Dygraph.Circles.TRIANGLE
            },
            'square' : {
              drawPointCallback : Dygraph.Circles.SQUARE,
              drawHighlightPointCallback : Dygraph.Circles.SQUARE
            },
            'diamond' : {
              drawPointCallback : Dygraph.Circles.DIAMOND,
              drawHighlightPointCallback : Dygraph.Circles.DIAMOND
            },
            'pentagon' : {
              drawPointCallback : Dygraph.Circles.PENTAGON,
              drawHighlightPointCallback : Dygraph.Circles.PENTAGON
            },
            'hexagon' : {
              drawPointCallback : Dygraph.Circles.HEXAGON,
              drawHighlightPointCallback : Dygraph.Circles.HEXAGON
            },
            'circle' : {
              drawPointCallback : Dygraph.Circles.CIRCLE,
              drawHighlightPointCallback : Dygraph.Circles.CIRCLE
            },
            'star' : {
              drawPointCallback : Dygraph.Circles.STAR,
              drawHighlightPointCallback : Dygraph.Circles.STAR
            },
            'plus' : {
              drawPointCallback : Dygraph.Circles.PLUS,
              drawHighlightPointCallback : Dygraph.Circles.PLUS
            },
            'ex' : {
              drawPointCallback : Dygraph.Circles.EX,
              drawHighlightPointCallback : Dygraph.Circles.EX
            },
            'custom' : {
              drawPointCallback : frown,
              drawHighlightPointCallback : smile
            }
          }
      );
    </script>
</body>
</html>
Commit	Line	Data
773d1312 RK	1	<!DOCTYPE html>
	2	<html>
	3	<head>
	4	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
240c0b11	5	<title>Custom Circles</title>
773d1312 RK	6	<!--[if IE]>
	7	<script type="text/javascript" src="../excanvas.js"></script>
	8	<![endif]-->
	9	<!--
	10	For production (minified) code, use:
	11	<script type="text/javascript" src="dygraph-combined.js"></script>
	12	-->
	13	<script type="text/javascript" src="../dygraph-dev.js"></script>
	14
	15	</head>
	16	<body>
240c0b11	17	<h2>Custom circles and hover circles</h2>
773d1312 RK	18	<div id="demodiv"></div>
	19
	20	<script type="text/javascript">
240c0b11 RK	21	var smile = function(g, series, ctx, cx, cy, color, radius) {
240c0b11 RK	22	mouthlessFace(g, series, ctx, cx, cy, color, radius);
773d1312	23
240c0b11 RK	24	ctx.fillStyle = "#000000";
	25	ctx.beginPath();
	26	ctx.arc(cx, cy, radius - 2, .3, Math.PI - .3, false);
	27	ctx.stroke();
	28	};
	29
	30	var frown = function(g, series, ctx, cx, cy, color, radius) {
	31	mouthlessFace(g, series, ctx, cx, cy, color, radius);
	32
	33	ctx.fillStyle = "#000000";
	34	ctx.beginPath();
4ab51f75	35	ctx.arc(cx, cy + radius, radius - 2, Math.PI + .3, -.3, false);
240c0b11 RK	36	ctx.stroke();
240c0b11 RK	37	};
773d1312	38
240c0b11 RK	39	var mouthlessFace = function(g, series, ctx, cx, cy, color, radius) {
	40	ctx.strokeStyle = "#000000";
	41	ctx.fillStyle = "#FFFF00";
	42	ctx.beginPath();
	43	ctx.arc(cx, cy, radius, Math.PI * 2, false);
	44	ctx.closePath();
	45	ctx.stroke();
	46	ctx.fill();
773d1312	47
240c0b11 RK	48	ctx.fillStyle = "#000000";
	49	ctx.beginPath();
	50	ctx.arc(cx - (radius / 3) , cy - (radius / 4), 1, Math.PI * 2, false);
	51	ctx.closePath();
	52	ctx.stroke();
	53	ctx.fill();
773d1312	54
240c0b11 RK	55	ctx.beginPath();
	56	ctx.arc(cx + (radius / 3) , cy - (radius / 4), 1, Math.PI * 2, false);
	57	ctx.closePath();
	58	ctx.stroke();
	59	ctx.fill();
	60	};
	61
	62	g = new Dygraph(
	63	document.getElementById("demodiv"),
	64	function() {
773d1312	65
240c0b11 RK	66	var r = "xval,default,triangle,square,diamond,pentagon,hexagon,circle,star,plus,ex,custom\n";
	67	for (var i=1; i<=20; i++) {
	68	r += i;
	69	for (var j = 0; j < 11; j++) {
	70	r += "," + j + (i / 3);
	71	}
	72	r += "\n";
	73	}
	74	return r;
	75	},
	76	{
	77	drawPoints : true,
4ab51f75 RK	78	pointSize : 5,
	79	highlightCircleSize : 8,
	80	'default' : {
	81	drawPointCallback : Dygraph.Circles.DEFAULT,
5879307d	82	drawHighlightPointCallback : Dygraph.Circles.DEFAULT
4ab51f75 RK	83	},
	84	'triangle' : {
	85	drawPointCallback : Dygraph.Circles.TRIANGLE,
5879307d	86	drawHighlightPointCallback : Dygraph.Circles.TRIANGLE
4ab51f75 RK	87	},
	88	'square' : {
	89	drawPointCallback : Dygraph.Circles.SQUARE,
5879307d	90	drawHighlightPointCallback : Dygraph.Circles.SQUARE
4ab51f75 RK	91	},
	92	'diamond' : {
	93	drawPointCallback : Dygraph.Circles.DIAMOND,
5879307d	94	drawHighlightPointCallback : Dygraph.Circles.DIAMOND
4ab51f75 RK	95	},
	96	'pentagon' : {
	97	drawPointCallback : Dygraph.Circles.PENTAGON,
5879307d	98	drawHighlightPointCallback : Dygraph.Circles.PENTAGON
4ab51f75 RK	99	},
	100	'hexagon' : {
	101	drawPointCallback : Dygraph.Circles.HEXAGON,
5879307d	102	drawHighlightPointCallback : Dygraph.Circles.HEXAGON
4ab51f75 RK	103	},
	104	'circle' : {
	105	drawPointCallback : Dygraph.Circles.CIRCLE,
5879307d	106	drawHighlightPointCallback : Dygraph.Circles.CIRCLE
4ab51f75 RK	107	},
	108	'star' : {
	109	drawPointCallback : Dygraph.Circles.STAR,
5879307d	110	drawHighlightPointCallback : Dygraph.Circles.STAR
4ab51f75 RK	111	},
	112	'plus' : {
	113	drawPointCallback : Dygraph.Circles.PLUS,
5879307d	114	drawHighlightPointCallback : Dygraph.Circles.PLUS
4ab51f75 RK	115	},
	116	'ex' : {
	117	drawPointCallback : Dygraph.Circles.EX,
5879307d	118	drawHighlightPointCallback : Dygraph.Circles.EX
4ab51f75 RK	119	},
	120	'custom' : {
	121	drawPointCallback : frown,
5879307d	122	drawHighlightPointCallback : smile
3fdc648d	123	}
240c0b11 RK	124	}
240c0b11 RK	125	);
773d1312 RK	126	</script>
773d1312 RK	127	</body>
3fdc648d	128	</html>