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.lineWidth = 1;
  34         ctx.fillStyle = "#000000";
  35         ctx.beginPath();
  36         ctx.arc(cx, cy + radius, radius - 2, Math.PI + .3, -.3, false);
  37         ctx.stroke();
  38       };
  39
  40       var mouthlessFace = function(g, series, ctx, cx, cy, color, radius) {
  41         ctx.lineWidth = 1;
  42         ctx.strokeStyle = "#000000";
  43         ctx.fillStyle = "#FFFF00";
  44         ctx.beginPath();
  45         ctx.arc(cx, cy, radius, Math.PI * 2, false);
  46         ctx.closePath();
  47         ctx.stroke();
  48         ctx.fill();
  49
  50         ctx.fillStyle = "#000000";
  51         ctx.beginPath();
  52         ctx.arc(cx - (radius / 3) , cy - (radius / 4), 1, Math.PI * 2, false);
  53         ctx.closePath();
  54         ctx.stroke();
  55         ctx.fill();
  56
  57         ctx.beginPath();
  58         ctx.arc(cx + (radius / 3) , cy - (radius / 4), 1, Math.PI * 2, false);
  59         ctx.closePath();
  60         ctx.stroke();
  61         ctx.fill();
  62       };
  63
  64       g = new Dygraph(
  65           document.getElementById("demodiv"),
  66           function() {
  67
  68             var r = "xval,default,triangle,square,diamond,pentagon,hexagon,circle,star,plus,ex,custom\n";
  69             for (var i=1; i<=20; i++) {
  70               r += i;
  71               for (var j = 0; j < 11; j++) {
  72                 r += "," + j + (i / 3);
  73               }
  74               r += "\n";
  75             }
  76             return r;
  77           },
  78           {
  79             drawPoints : true,
  80             pointSize : 5,
  81             highlightCircleSize : 8,
  82             'default' : {
  83               drawPointCallback : Dygraph.Circles.DEFAULT,
  84               drawHighlightPointCallback : Dygraph.Circles.DEFAULT
  85             },
  86             'triangle' : {
  87               drawPointCallback : Dygraph.Circles.TRIANGLE,
  88               drawHighlightPointCallback : Dygraph.Circles.TRIANGLE
  89             },
  90             'square' : {
  91               drawPointCallback : Dygraph.Circles.SQUARE,
  92               drawHighlightPointCallback : Dygraph.Circles.SQUARE
  93             },
  94             'diamond' : {
  95               drawPointCallback : Dygraph.Circles.DIAMOND,
  96               drawHighlightPointCallback : Dygraph.Circles.DIAMOND
  97             },
  98             'pentagon' : {
  99               drawPointCallback : Dygraph.Circles.PENTAGON,
 100               drawHighlightPointCallback : Dygraph.Circles.PENTAGON
 101             },
 102             'hexagon' : {
 103               drawPointCallback : Dygraph.Circles.HEXAGON,
 104               drawHighlightPointCallback : Dygraph.Circles.HEXAGON
 105             },
 106             'circle' : {
 107               drawPointCallback : Dygraph.Circles.CIRCLE,
 108               drawHighlightPointCallback : Dygraph.Circles.CIRCLE
 109             },
 110             'star' : {
 111               drawPointCallback : Dygraph.Circles.STAR,
 112               drawHighlightPointCallback : Dygraph.Circles.STAR
 113             },
 114             'plus' : {
 115               drawPointCallback : Dygraph.Circles.PLUS,
 116               drawHighlightPointCallback : Dygraph.Circles.PLUS
 117             },
 118             'ex' : {
 119               drawPointCallback : Dygraph.Circles.EX,
 120               drawHighlightPointCallback : Dygraph.Circles.EX
 121             },
 122             'custom' : {
 123               drawPointCallback : frown,
 124               drawHighlightPointCallback : smile
 125             }
 126           }
 127       );
 128     </script>
 129 </body>
 130 </html>