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