[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>
    <script type="text/javascript" src="../extras/stars.js"></script>

  </head>
  <body>
    <h2>Custom circles and hover circles</h2>

    <script type="text/javascript">
      // Simple version
      var div = document.createElement('div');
      document.body.appendChild(div);

      var data = 'x,A,B\n' +
        '1,1,2\n' +
        '2,2,4\n' +
        '3,3,6\n' +
        '4,4,8\n' +
        '5,5,7\n';
      var g = new Dygraph(div, data, {
            drawPoints : true,
            pointSize : 5,
            highlightCircleSize: 8,
            series : {
              A : {
                drawPointCallback : Dygraph.Circles.TRIANGLE,
                drawHighlightPointCallback : Dygraph.Circles.TRIANGLE
              },
              B : {
                drawPointCallback : Dygraph.Circles.HEXAGON,
                drawHighlightPointCallback : Dygraph.Circles.HEXAGON
              }
            }
        });


      // Fancy demos
      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 makeGraph = function(title, yFunc, extraOpts) {
        var opts = {
            drawPoints : true,
            pointSize : 5
        };

        var shapes = [];
        var addShape = function(name, pointFn, highlightPointFn) {
          shapes.push(name);
          opts[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);

        for (var key in extraOpts) {
          if (extraOpts.hasOwnProperty(key)) {
            opts[key] = extraOpts[key];
          }
        };

        var header = document.createElement('h3');
        header.appendChild(document.createTextNode(title));
        document.body.appendChild(header);

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

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

        makeGraph(
          "Gallery of predefined shapes, adding a custom shape:",
          function(x, c, n) {
            return x / 3 + c * 10;
          }, {
            highlightCircleSize : 8
          });
        makeGraph(
          "With interactive per-series highlighting:",
          function(x, c, n) {
            return Math.sin(x * c / n);
          }, {
            strokeBorderWidth: 2,
            highlightSeriesOpts: {
              pointSize: 6,
              highlightCircleSize: 10,
              strokeWidth: 2,
            }});
    </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>
464b5f50	14	<script type="text/javascript" src="../extras/stars.js"></script>
773d1312 RK	15
	16	</head>
	17	<body>
240c0b11	18	<h2>Custom circles and hover circles</h2>
773d1312 RK	19
773d1312 RK	20	<script type="text/javascript">
a7803eea KW	21	// Simple version
	22	var div = document.createElement('div');
	23	document.body.appendChild(div);
	24
	25	var data = 'x,A,B\n' +
	26	'1,1,2\n' +
	27	'2,2,4\n' +
	28	'3,3,6\n' +
	29	'4,4,8\n' +
	30	'5,5,7\n';
	31	var g = new Dygraph(div, data, {
	32	drawPoints : true,
	33	pointSize : 5,
	34	highlightCircleSize: 8,
30abcfb6 RK	35	series : {
	36	A : {
	37	drawPointCallback : Dygraph.Circles.TRIANGLE,
	38	drawHighlightPointCallback : Dygraph.Circles.TRIANGLE
	39	},
	40	B : {
	41	drawPointCallback : Dygraph.Circles.HEXAGON,
	42	drawHighlightPointCallback : Dygraph.Circles.HEXAGON
	43	}
a7803eea KW	44	}
	45	});
	46
	47
	48	// Fancy demos
240c0b11 RK	49	var smile = function(g, series, ctx, cx, cy, color, radius) {
240c0b11 RK	50	mouthlessFace(g, series, ctx, cx, cy, color, radius);
773d1312	51
240c0b11 RK	52	ctx.fillStyle = "#000000";
	53	ctx.beginPath();
	54	ctx.arc(cx, cy, radius - 2, .3, Math.PI - .3, false);
	55	ctx.stroke();
	56	};
	57
	58	var frown = function(g, series, ctx, cx, cy, color, radius) {
	59	mouthlessFace(g, series, ctx, cx, cy, color, radius);
	60
a8ef67a8	61	ctx.lineWidth = 1;
240c0b11 RK	62	ctx.fillStyle = "#000000";
240c0b11 RK	63	ctx.beginPath();
4ab51f75	64	ctx.arc(cx, cy + radius, radius - 2, Math.PI + .3, -.3, false);
240c0b11 RK	65	ctx.stroke();
240c0b11 RK	66	};
773d1312	67
240c0b11	68	var mouthlessFace = function(g, series, ctx, cx, cy, color, radius) {
a8ef67a8	69	ctx.lineWidth = 1;
240c0b11 RK	70	ctx.strokeStyle = "#000000";
	71	ctx.fillStyle = "#FFFF00";
	72	ctx.beginPath();
	73	ctx.arc(cx, cy, radius, Math.PI * 2, false);
	74	ctx.closePath();
	75	ctx.stroke();
	76	ctx.fill();
773d1312	77
240c0b11 RK	78	ctx.fillStyle = "#000000";
	79	ctx.beginPath();
	80	ctx.arc(cx - (radius / 3) , cy - (radius / 4), 1, Math.PI * 2, false);
	81	ctx.closePath();
	82	ctx.stroke();
	83	ctx.fill();
773d1312	84
240c0b11 RK	85	ctx.beginPath();
	86	ctx.arc(cx + (radius / 3) , cy - (radius / 4), 1, Math.PI * 2, false);
	87	ctx.closePath();
	88	ctx.stroke();
	89	ctx.fill();
	90	};
	91
a7803eea	92	var makeGraph = function(title, yFunc, extraOpts) {
30b2bf7d KW	93	var opts = {
	94	drawPoints : true,
	95	pointSize : 5
	96	};
	97
	98	var shapes = [];
a7803eea	99	var addShape = function(name, pointFn, highlightPointFn) {
30b2bf7d KW	100	shapes.push(name);
30b2bf7d KW	101	opts[name] = {
a7803eea KW	102	drawPointCallback: pointFn,
a7803eea KW	103	drawHighlightPointCallback: highlightPointFn
30b2bf7d KW	104	};
	105	};
	106
	107	for (var shape in Dygraph.Circles) {
	108	if (!Dygraph.Circles.hasOwnProperty(shape)) continue;
	109	var fn = Dygraph.Circles[shape];
	110	if (typeof fn !== 'function') continue;
	111	addShape(shape.toLowerCase(), fn, fn);
	112	};
	113	addShape('custom', frown, smile);
	114
	115	for (var key in extraOpts) {
	116	if (extraOpts.hasOwnProperty(key)) {
	117	opts[key] = extraOpts[key];
	118	}
	119	};
773d1312	120
a7803eea KW	121	var header = document.createElement('h3');
	122	header.appendChild(document.createTextNode(title));
	123	document.body.appendChild(header);
	124
30b2bf7d KW	125	var div = document.createElement('div');
30b2bf7d KW	126	document.body.appendChild(div);
a7803eea	127
30b2bf7d KW	128	var g = new Dygraph(
	129	div,
	130	function() {
	131	var r = "xval," + shapes.join(',') + "\n";
	132	var n = shapes.length;
240c0b11 RK	133	for (var i=1; i<=20; i++) {
240c0b11 RK	134	r += i;
30b2bf7d KW	135	for (var j = 0; j < n; j++) {
30b2bf7d KW	136	r += "," + yFunc(i, j, n);
240c0b11 RK	137	}
	138	r += "\n";
	139	}
	140	return r;
30b2bf7d KW	141	}, opts);
	142	};
	143
	144	makeGraph(
a7803eea	145	"Gallery of predefined shapes, adding a custom shape:",
30b2bf7d KW	146	function(x, c, n) {
	147	return x / 3 + c * 10;
	148	}, {
	149	highlightCircleSize : 8
	150	});
	151	makeGraph(
a7803eea	152	"With interactive per-series highlighting:",
30b2bf7d KW	153	function(x, c, n) {
	154	return Math.sin(x * c / n);
	155	}, {
	156	strokeBorderWidth: 2,
	157	highlightSeriesOpts: {
	158	pointSize: 6,
	159	highlightCircleSize: 10,
	160	strokeWidth: 2,
	161	}});
773d1312 RK	162	</script>
773d1312 RK	163	</body>
3fdc648d	164	</html>