tests/custom-circles.html

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