Merge pull request #736 from danvk/issue-pr-templates

[dygraphs.git] / tests / custom-circles.html
diff --git a/tests/custom-circles.html b/tests/custom-circles.html

index 7129179..55cc0bb 100644 (file)
--- a/tests/custom-circles.html
+++ b/tests/custom-circles.html
@@ -1,22 +1,47 @@
  <!DOCTYPE html>
  <html>
    <head>
-    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
      <title>Custom Circles</title>
-    <!--[if IE]>
-    <script type="text/javascript" src="../excanvas.js"></script>
-    <![endif]-->
      <!--
      For production (minified) code, use:
      <script type="text/javascript" src="dygraph-combined.js"></script>
      -->
-    <script type="text/javascript" src="../dygraph-dev.js"></script>
+    <script type="text/javascript" src="../dist/dygraph.js"></script>
+    <script type="text/javascript" src="../src/extras/shapes.js"></script>
  
    </head>
    <body>
      <h2>Custom circles and hover circles</h2>
  
      <script type="text/javascript">
+      // Simple version
+      var div = document.createElement('div');
+      document.body.appendChild(div);
+
+      var data = 'x,A,B\n' +
+        '1,1,2\n' +
+        '2,2,4\n' +
+        '3,3,6\n' +
+        '4,4,8\n' +
+        '5,5,7\n';
+      var g = new Dygraph(div, data, {
+            drawPoints : true,
+            pointSize : 5,
+            highlightCircleSize: 8,
+            series : {
+              A : {
+                drawPointCallback : Dygraph.Circles.TRIANGLE,
+                drawHighlightPointCallback : Dygraph.Circles.TRIANGLE
+              },
+              B : {
+                drawPointCallback : Dygraph.Circles.HEXAGON,
+                drawHighlightPointCallback : Dygraph.Circles.HEXAGON
+              }
+            }
+        });
+
+
+      // Fancy demos
        var smile = function(g, series, ctx, cx, cy, color, radius) {
          mouthlessFace(g, series, ctx, cx, cy, color, radius);
  
@@ -60,18 +85,19 @@
          ctx.fill();
        };
  
-      var makeGraph = function(yFunc, extraOpts) {
+      var makeGraph = function(title, yFunc, extraOpts) {
          var opts = {
              drawPoints : true,
              pointSize : 5
          };
  
          var shapes = [];
-        var addShape = function(name, fn) {
+        var addShape = function(name, pointFn, highlightPointFn) {
            shapes.push(name);
-          opts[name] = {
-            drawPointCallback: fn,
-            drawHighlightPointCallback: fn
+          if (!opts['series']) opts['series'] = {};
+          opts.series[name] = {
+            drawPointCallback: pointFn,
+            drawHighlightPointCallback: highlightPointFn
            };
          };
  
@@ -89,8 +115,13 @@
            }
          };
  
+        var header = document.createElement('h3');
+        header.appendChild(document.createTextNode(title));
+        document.body.appendChild(header);
+
          var div = document.createElement('div');
          document.body.appendChild(div);
+
          var g = new Dygraph(
            div,
            function() {
@@ -108,12 +139,14 @@
          };
  
          makeGraph(
+          "Gallery of predefined shapes, adding a custom shape:",
            function(x, c, n) {
              return x / 3 + c * 10;
            }, {
              highlightCircleSize : 8
            });
          makeGraph(
+          "With interactive per-series highlighting:",
            function(x, c, n) {
              return Math.sin(x * c / n);
            }, {