tests/custom-circles.html

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