tests/custom-circles.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
   5     <title>Custom Circles</title>
   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>
  17     <h2>Custom circles and hover circles</h2>
  18     <div id="demodiv"></div>
  19
  20     <script type="text/javascript">
  21       var smile = function(g, series, ctx, cx, cy, color, radius) {
  22         mouthlessFace(g, series, ctx, cx, cy, color, radius);
  23
  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();
  35         ctx.arc(cx, cy + radius, radius - 2, Math.PI + .3, -.3, false);
  36         ctx.stroke();
  37       };
  38
  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();
  47
  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();
  54
  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() {
  65
  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,
  78             pointSize : 5,
  79             highlightCircleSize : 8,
  80             'default' : {
  81               drawPointCallback : Dygraph.Circles.DEFAULT,
  82               drawHighlightPointCallback : Dygraph.Circles.DEFAULT
  83             },
  84             'triangle' : {
  85               drawPointCallback : Dygraph.Circles.TRIANGLE,
  86               drawHighlightPointCallback : Dygraph.Circles.TRIANGLE
  87             },
  88             'square' : {
  89               drawPointCallback : Dygraph.Circles.SQUARE,
  90               drawHighlightPointCallback : Dygraph.Circles.SQUARE
  91             },
  92             'diamond' : {
  93               drawPointCallback : Dygraph.Circles.DIAMOND,
  94               drawHighlightPointCallback : Dygraph.Circles.DIAMOND
  95             },
  96             'pentagon' : {
  97               drawPointCallback : Dygraph.Circles.PENTAGON,
  98               drawHighlightPointCallback : Dygraph.Circles.PENTAGON
  99             },
 100             'hexagon' : {
 101               drawPointCallback : Dygraph.Circles.HEXAGON,
 102               drawHighlightPointCallback : Dygraph.Circles.HEXAGON
 103             },
 104             'circle' : {
 105               drawPointCallback : Dygraph.Circles.CIRCLE,
 106               drawHighlightPointCallback : Dygraph.Circles.CIRCLE
 107             },
 108             'star' : {
 109               drawPointCallback : Dygraph.Circles.STAR,
 110               drawHighlightPointCallback : Dygraph.Circles.STAR
 111             },
 112             'plus' : {
 113               drawPointCallback : Dygraph.Circles.PLUS,
 114               drawHighlightPointCallback : Dygraph.Circles.PLUS
 115             },
 116             'ex' : {
 117               drawPointCallback : Dygraph.Circles.EX,
 118               drawHighlightPointCallback : Dygraph.Circles.EX
 119             },
 120             'custom' : {
 121               drawPointCallback : frown,
 122               drawHighlightPointCallback : smile
 123             }
 124           }
 125       );
 126     </script>
 127 </body>
 128 </html>