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             A : {
  35               drawPointCallback : Dygraph.Circles.TRIANGLE,
  36               drawHighlightPointCallback : Dygraph.Circles.TRIANGLE
  37             },
  38             B : {
  39               drawPointCallback : Dygraph.Circles.HEXAGON,
  40               drawHighlightPointCallback : Dygraph.Circles.HEXAGON
  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           opts[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>