tests/custom-circles.html

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