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
  19     <script type="text/javascript">
  20       var smile = function(g, series, ctx, cx, cy, color, radius) {
  21         mouthlessFace(g, series, ctx, cx, cy, color, radius);
  22
  23         ctx.fillStyle = "#000000";
  24         ctx.beginPath();
  25         ctx.arc(cx, cy, radius - 2, .3, Math.PI - .3, false);
  26         ctx.stroke();
  27       };
  28
  29       var frown = function(g, series, ctx, cx, cy, color, radius) {
  30         mouthlessFace(g, series, ctx, cx, cy, color, radius);
  31
  32         ctx.lineWidth = 1;
  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.lineWidth = 1;
  41         ctx.strokeStyle = "#000000";
  42         ctx.fillStyle = "#FFFF00";
  43         ctx.beginPath();
  44         ctx.arc(cx, cy, radius, Math.PI * 2, false);
  45         ctx.closePath();
  46         ctx.stroke();
  47         ctx.fill();
  48
  49         ctx.fillStyle = "#000000";
  50         ctx.beginPath();
  51         ctx.arc(cx - (radius / 3) , cy - (radius / 4), 1, Math.PI * 2, false);
  52         ctx.closePath();
  53         ctx.stroke();
  54         ctx.fill();
  55
  56         ctx.beginPath();
  57         ctx.arc(cx + (radius / 3) , cy - (radius / 4), 1, Math.PI * 2, false);
  58         ctx.closePath();
  59         ctx.stroke();
  60         ctx.fill();
  61       };
  62
  63       var makeGraph = function(yFunc, extraOpts) {
  64         var opts = {
  65             drawPoints : true,
  66             pointSize : 5
  67         };
  68
  69         var shapes = [];
  70         var addShape = function(name, fn) {
  71           shapes.push(name);
  72           opts[name] = {
  73             drawPointCallback: fn,
  74             drawHighlightPointCallback: fn
  75           };
  76         };
  77
  78         for (var shape in Dygraph.Circles) {
  79           if (!Dygraph.Circles.hasOwnProperty(shape)) continue;
  80           var fn = Dygraph.Circles[shape];
  81           if (typeof fn !== 'function') continue;
  82           addShape(shape.toLowerCase(), fn, fn);
  83         };
  84         addShape('custom', frown, smile);
  85
  86         for (var key in extraOpts) {
  87           if (extraOpts.hasOwnProperty(key)) {
  88             opts[key] = extraOpts[key];
  89           }
  90         };
  91
  92         var div = document.createElement('div');
  93         document.body.appendChild(div);
  94         var g = new Dygraph(
  95           div,
  96           function() {
  97             var r = "xval," + shapes.join(',') + "\n";
  98             var n = shapes.length;
  99             for (var i=1; i<=20; i++) {
 100               r += i;
 101               for (var j = 0; j < n; j++) {
 102                 r += "," + yFunc(i, j, n);
 103               }
 104               r += "\n";
 105             }
 106             return r;
 107           }, opts);
 108         };
 109
 110         makeGraph(
 111           function(x, c, n) {
 112             return x / 3 + c * 10;
 113           }, {
 114             highlightCircleSize : 8
 115           });
 116         makeGraph(
 117           function(x, c, n) {
 118             return Math.sin(x * c / n);
 119           }, {
 120             strokeBorderWidth: 2,
 121             highlightSeriesOpts: {
 122               pointSize: 6,
 123               highlightCircleSize: 10,
 124               strokeWidth: 2,
 125             }});
 126     </script>
 127 </body>
 128 </html>