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