functioning demo

diff --git a/dygraph-canvas.js b/dygraph-canvas.js
index 8d3bfe2..20e1f8b 100644 (file)
--- a/dygraph-canvas.js
+++ b/dygraph-canvas.js
@@ -754,14 +754,16 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() {
 
   for (var i = 0; i < setCount; i++) {
     var setName = setNames[i];
+    var setIdx = this.dygraph_.indexFromSetName(setName);
     var color = this.colors[setName];
+    var strokeWidth = this.dygraph_.attr_("strokeWidth", setIdx);
 
     // setup graphics context
     context.save();
     var point = this.layout.points[0];
-    var pointSize = this.dygraph_.attr_("pointSize");
+    var pointSize = this.dygraph_.attr_("pointSize", setIdx);
     var prevX = null, prevY = null;
-    var drawPoints = this.dygraph_.attr_("drawPoints");
+    var drawPoints = this.dygraph_.attr_("drawPoints", setIdx);
     var points = this.layout.points;
     for (var j = 0; j < points.length; j++) {
       var point = points[j];
@@ -779,17 +781,20 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() {
             prevX = point.canvasx;
             prevY = point.canvasy;
           } else {
-            ctx.beginPath();
-            ctx.strokeStyle = color;
-            ctx.lineWidth = this.options.strokeWidth;
-            ctx.moveTo(prevX, prevY);
-            if (stepPlot) {
-              ctx.lineTo(point.canvasx, prevY);
+            // TODO(danvk): figure out why this conditional is necessary.
+            if (strokeWidth) {
+              ctx.beginPath();
+              ctx.strokeStyle = color;
+              ctx.lineWidth = strokeWidth;
+              ctx.moveTo(prevX, prevY);
+              if (stepPlot) {
+                ctx.lineTo(point.canvasx, prevY);
+              }
+              prevX = point.canvasx;
+              prevY = point.canvasy;
+              ctx.lineTo(prevX, prevY);
+              ctx.stroke();
             }
-            prevX = point.canvasx;
-            prevY = point.canvasy;
-            ctx.lineTo(prevX, prevY);
-            ctx.stroke();
           }
 
           if (drawPoints || isIsolated) {

diff --git a/dygraph.js b/dygraph.js
index 517f0c6..56f9319 100644 (file)
--- a/dygraph.js
+++ b/dygraph.js
@@ -1021,11 +1021,18 @@ Dygraph.prototype.mouseMove_ = function(event) {
  */
 Dygraph.prototype.updateSelection_ = function() {
   // Clear the previously drawn vertical, if there is one
-  var circleSize = this.attr_('highlightCircleSize');
   var ctx = this.canvas_.getContext("2d");
   if (this.previousVerticalX_ >= 0) {
+    // Determine the maximum highlight circle size.
+    var maxCircleSize = 0;
+    var num_series = this.attr_('labels').length;
+    for (var i = 1; i < num_series; i++) {
+      var r = this.attr_('highlightCircleSize', i);
+      if (r > maxCircleSize) maxCircleSize = r;
+    }
     var px = this.previousVerticalX_;
-    ctx.clearRect(px - circleSize - 1, 0, 2 * circleSize + 2, this.height_);
+    ctx.clearRect(px - maxCircleSize - 1, 0,
+                  2 * maxCircleSize + 2, this.height_);
   }
 
   var isOK = function(x) { return x && !isNaN(x); };
@@ -1061,6 +1068,8 @@ Dygraph.prototype.updateSelection_ = function() {
     ctx.save();
     for (var i = 0; i < this.selPoints_.length; i++) {
       if (!isOK(this.selPoints_[i].canvasy)) continue;
+      var setIdx = this.indexFromSetName(this.selPoints_[i].name);
+      var circleSize = this.attr_('highlightCircleSize', setIdx);
       ctx.beginPath();
       ctx.fillStyle = this.plotter_.colors[this.selPoints_[i].name];
       ctx.arc(canvasx, this.selPoints_[i].canvasy, circleSize,
@@ -2312,6 +2321,11 @@ Dygraph.prototype.updateOptions = function(attrs) {
   }
 
   // TODO(danvk): validate per-series options.
+  // Supported:
+  // strokeWidth
+  // pointSize
+  // drawPoints
+  // highlightCircleSize
 
   Dygraph.update(this.user_attrs_, attrs);
   Dygraph.update(this.renderOptions_, attrs);
@@ -2427,6 +2441,18 @@ Dygraph.prototype.annotations = function() {
   return this.annotations_;
 };
 
+/**
+ * Get the index of a series (column) given its name. The first column is the
+ * x-axis, so the data series start with index 1.
+ */
+Dygraph.prototype.indexFromSetName = function(name) {
+  var labels = this.attr_("labels");
+  for (var i = 0; i < labels.length; i++) {
+    if (labels[i] == name) return i;
+  }
+  return null;
+};
+
 Dygraph.addAnnotationRule = function() {
   if (Dygraph.addedAnnotationCSS) return;
 

diff --git a/tests/per-series.html b/tests/per-series.html
new file mode 100644 (file)
index 0000000..8ac90df
--- /dev/null
+++ b/tests/per-series.html
@@ -0,0 +1,55 @@
+<html>
+  <head>
+    <title>Per-Series Properties</title>
+    <!--[if IE]>
+    <script type="text/javascript" src="excanvas.js"></script>
+    <![endif]-->
+    <script type="text/javascript" src="../strftime/strftime-min.js"></script>
+    <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
+    <script type="text/javascript" src="../dygraph-canvas.js"></script>
+    <script type="text/javascript" src="../dygraph.js"></script>
+  </head>
+  <body>
+    <h2>Chart with per-series properties</h2>
+    <div id="demodiv"></div>
+    <br/><br/>
+    <div id="demodiv2"></div>
+
+    <script type="text/javascript">
+      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;
+              },
+              {
+                strokeWidth: 2,
+                1: {
+                  strokeWidth: 0.0,
+                  drawPoints: true,
+                  pointSize: 4,
+                  highlightCircleSize: 6
+                },
+                2: {
+                  strokeWidth: 1.0,
+                  drawPoints: true,
+                  pointSize: 1.5
+                },
+                3: {
+                  strokeWidth: 3,
+                  highlightCircleSize: 10
+                }
+              }
+          );
+    </script>
+</body>
+</html>