Support stroke patterns (i.e. dashed/dotted lines).

[dygraphs.git] / tests / per-series.html
diff --git a/tests/per-series.html b/tests/per-series.html

index c1b400a..98501ac 100644 (file)
--- a/tests/per-series.html
+++ b/tests/per-series.html
@@ -16,23 +16,26 @@
    <body>
      <h2>Chart with per-series properties</h2>
      <div id="demodiv"></div>
-
+    <h2>Chart with per-series properties with legend.</h2>
+    <div id="demodiv2"></div>
      <script type="text/javascript">
+      data = function() {
+        var zp = function(x) { if (x < 10) return "0"+x; else return x; };
+        var r = "date,parabola,line,another line,sine wave,sine wave2\n";
+        for (var i=1; i<=31; i++) {
+          r += "200610" + zp(i);
+          r += "," + 10*(i*(31-i));
+          r += "," + 10*(8*i);
+          r += "," + 10*(250 - 8*i);
+          r += "," + 10*(125 + 125 * Math.sin(0.3*i));
+          r += "," + 10*(125 + 125 * Math.sin(0.3*i+Math.PI));
+          r += "\n";
+        }
+        return r;
+      };
        g = new Dygraph(
                document.getElementById("demodiv"),
-              function() {
-                var zp = function(x) { if (x < 10) return "0"+x; else return x; };
-                var r = "date,parabola,line,another line,sine wave\n";
-                for (var i=1; i<=31; i++) {
-                r += "200610" + zp(i);
-                r += "," + 10*(i*(31-i));
-                r += "," + 10*(8*i);
-                r += "," + 10*(250 - 8*i);
-                r += "," + 10*(125 + 125 * Math.sin(0.3*i));
-                r += "\n";
-                }
-                return r;
-              },
+              data,
                {
                  strokeWidth: 2,
                  'parabola': {
@@ -49,9 +52,48 @@
                  'sine wave': {
                    strokeWidth: 3,
                    highlightCircleSize: 10
+                },
+                'sine wave2': {
+                  strokePattern: [10, 2, 5, 2],
+                  strokeWidth: 2,
+                  highlightCircleSize: 3
+                }
+              }
+          );
+      g2 = new Dygraph(
+              document.getElementById("demodiv2"),
+              data,
+              {
+                legend: 'always',
+                strokeWidth: 2,
+                'parabola': {
+                  strokePattern: null,
+                  drawPoints: true,
+                  pointSize: 4,
+                  highlightCircleSize: 6
+                },
+                'line': {
+                  strokePattern: Dygraph.DASHED_LINE,
+                  strokeWidth: 1.0,
+                  drawPoints: true,
+                  pointSize: 1.5
+                },
+                'another line': {
+                  strokePattern: [25, 5]
+                },
+                'sine wave': {
+                  strokePattern: Dygraph.DOTTED_LINE,
+                  strokeWidth: 3,
+                  highlightCircleSize: 10
+                },
+                'sine wave2': {
+                  strokePattern: Dygraph.DOT_DASH_LINE,
+                  strokeWidth: 2,
+                  highlightCircleSize: 3
                  }
                }
            );
+
      </script>
  </body>
  </html>