Add per-series 'color' option.
authorRobert Konigsberg <konigsberg@google.com>
Thu, 12 Sep 2013 14:31:24 +0000 (10:31 -0400)
committerRobert Konigsberg <konigsberg@google.com>
Thu, 12 Sep 2013 14:41:52 +0000 (10:41 -0400)
auto_tests/tests/per_series.js
dygraph-options-reference.js
dygraph.js

index 1a04496..7289e0c 100644 (file)
@@ -165,3 +165,12 @@ perSeriesTestCase.prototype.testOldAxisSpecInNewSeriesThrows = function() {
 
   assertTrue(threw);
 }
+
+perSeriesTestCase.prototype.testColorOption = function() {
+  var graph = document.getElementById("graph");
+  var data = "X,A,B,C\n0,1,2,3\n";
+  var g = new Dygraph(graph, data, {});
+  assertEquals(['rgb(64,128,0)', 'rgb(64,0,128)', 'rgb(0,128,128)'], g.getColors());
+  g.updateOptions({series : { B : { color : 'purple' }}});
+  assertEquals(['rgb(64,128,0)', 'purple', 'rgb(0,128,128)'], g.getColors());
+}
index 6220750..09ad7c6 100644 (file)
@@ -104,7 +104,14 @@ Dygraph.OPTIONS_REFERENCE =  // <JSON>
     "labels": ["Data Series Colors"],
     "type": "array<string>",
     "example": "['red', '#00FF00']",
-    "description": "List of colors for the data series. These can be of the form \"#AABBCC\" or \"rgb(255,100,200)\" or \"yellow\", etc. If not specified, equally-spaced points around a color wheel are used."
+    "description": "List of colors for the data series. These can be of the form \"#AABBCC\" or \"rgb(255,100,200)\" or \"yellow\", etc. If not specified, equally-spaced points around a color wheel are used. Overridden by the 'color' option."
+  },
+  "colors": {
+    "default": "(see description)",
+    "labels": ["Data Series Colors"],
+    "type": "string",
+    "example": "red",
+    "description": "A per-series color definition. Used in conjunction with, and overrides, the colors option."
   },
   "connectSeparatedPoints": {
     "default": "false",
index effe10d..4e15985 100644 (file)
@@ -1161,14 +1161,41 @@ Dygraph.prototype.setColors_ = function() {
   var num = labels.length - 1;
   this.colors_ = [];
   this.colorsMap_ = {};
+
+  // These are used for when no custom colors are specified.
+  var sat = this.attr_('colorSaturation') || 1.0;
+  var val = this.attr_('colorValue') || 0.5;
+  var half = Math.ceil(num / 2);
+
   var colors = this.attr_('colors');
-  var i;
+  var visibility = this.visibility();
+  for (var i = 0; i < num; i++) {
+    if (!visibility[i]) {
+      continue;
+    }
+    var label = labels[i + 1];
+    var colorStr = this.attributes_.getForSeries('color', label);
+    if (!colorStr) {
+      if (colors) {
+        colorStr = colors[i % colors.length];
+      } else {
+        // alternate colors for high contrast.
+        var idx = i % 2 ? (half + (i + 1)/ 2) : Math.ceil((i + 1) / 2);
+        var hue = (1.0 * idx / (1 + num));
+        colorStr = Dygraph.hsvToRGB(hue, sat, val);
+      }
+    }
+    this.colors_.push(colorStr);
+    this.colorsMap_[label] = colorStr;
+  }
+/*
   if (!colors) {
     var sat = this.attr_('colorSaturation') || 1.0;
     var val = this.attr_('colorValue') || 0.5;
     var half = Math.ceil(num / 2);
     for (i = 1; i <= num; i++) {
       if (!this.visibility()[i-1]) continue;
+      var customColor = this.attributes_.getForSeries('color', labels[i]);
       // alternate colors for high contrast.
       var idx = i % 2 ? Math.ceil(i / 2) : (half + i / 2);
       var hue = (1.0 * idx/ (1 + num));
@@ -1184,6 +1211,8 @@ Dygraph.prototype.setColors_ = function() {
       this.colorsMap_[labels[1 + i]] = colorStr;
     }
   }
+*/
+
 };
 
 /**