Support for coloring axes, and automatic tick color selection

git-svn-id: https://flot.googlecode.com/svn/trunk@257 1e0a6537-2640-0410-bfb7-f154510ff394

API.txt

@@ -174,6 +174,10 @@ Customizing the axes
   xaxis, yaxis: {
     position: "bottom" or "top" or "left" or "right"
     mode: null or "time"
+
+    color: null or color spec
+    tickColor: null or color spec
+    
     min: null or number
     max: null or number
     autoscaleMargin: null or number
@@ -203,17 +207,23 @@ how the data is interpreted, the default of null means as decimal
 numbers. Use "time" for time series data, see the time series data
 section.
 
+The "color" option determines the color of the labels and ticks for
+the axis (default is the grid color). For more fine-grained control
+you can also set the color of the ticks separately with "tickColor"
+(otherwise it's autogenerated as the base color with some
+transparency).
+
 The options "min"/"max" are the precise minimum/maximum value on the
 scale. If you don't specify either of them, a value will automatically
 be chosen based on the minimum/maximum data values.
 
 The "autoscaleMargin" is a bit esoteric: it's the fraction of margin
 that the scaling algorithm will add to avoid that the outermost points
-ends up on the grid border. Note that this margin is only applied
-when a min or max value is not explicitly set. If a margin is
-specified, the plot will furthermore extend the axis end-point to the
-nearest whole tick. The default value is "null" for the x axis and
-0.02 for the y axis which seems appropriate for most cases.
+ends up on the grid border. Note that this margin is only applied when
+a min or max value is not explicitly set. If a margin is specified,
+the plot will furthermore extend the axis end-point to the nearest
+whole tick. The default value is "null" for the x axes and 0.02 for y
+axes which seems appropriate for most cases.
 
 "transform" and "inverseTransform" are callbacks you can put in to
 change the way the data is drawn. You can design a function to
@@ -591,7 +601,6 @@ Customizing the grid
     aboveData: boolean
     color: color
     backgroundColor: color/gradient or null
-    tickColor: color
     labelMargin: number
     axisMargin: number
     markings: array of markings or (fn: axes -> array of markings)
@@ -603,9 +612,10 @@ Customizing the grid
     mouseActiveRadius: number
   }
 
-The grid is the thing with the axes and a number of ticks. "color" is
-the color of the grid itself whereas "backgroundColor" specifies the
-background color inside the grid area. The default value of null means
+The grid is the thing with the axes and a number of ticks. Many of the
+things in the grid are configured under the individual axes, but not
+all. "color" is the color of the grid itself whereas "backgroundColor"
+specifies the background color inside the grid area, here null means
 that the background is transparent. You can also set a gradient, see
 the gradient documentation below.
 
@@ -613,14 +623,13 @@ You can turn off the whole grid including tick labels by setting
 "show" to false. "aboveData" determines whether the grid is drawn
 above the data or below (below is default).
 
-"tickColor" is the color of the ticks, "labelMargin" is the space in
-pixels between tick labels and axis line, and "axisMargin" is the
-space in pixels between axes when there are two next to each other.
-Note that you can style the tick labels with CSS, e.g. to change the
-color. They have class "tickLabel". "borderWidth" is the width of the
-border around the plot. Set it to 0 to disable the border. You can
-also set "borderColor" if you want the border to have a different
-color than the grid lines.
+"labelMargin" is the space in pixels between tick labels and axis
+line, and "axisMargin" is the space in pixels between axes when there
+are two next to each other. Note that you can style the tick labels
+with CSS, e.g. to change the color. They have class "tickLabel".
+"borderWidth" is the width of the border around the plot. Set it to 0
+to disable the border. You can also set "borderColor" if you want the
+border to have a different color than the grid lines.
 
 "markings" is used to draw simple lines and rectangular areas in the
 background of the plot. You can either specify an array of ranges on

NEWS.txt

@@ -25,6 +25,12 @@ arrays). Plugins touching the axes must be ported to take the extra
 axes into account, a couple of helper functions have been added for
 that purpose, check the source.
 
+"tickColor" on the grid options is now deprecated in favour of a
+corresponding option on the axes, so { grid: { tickColor: "#000" }}
+becomes { xaxis: { tickColor: "#000"}, yaxis: { tickColor: "#000"} },
+but if you just configure a base color Flot will now autogenerate a
+tick color by adding transparency. Backwards-compatibility hooks are
+in place.
 
 Changes:
 
@@ -48,8 +54,13 @@ Changes:
   www.flightdataservices.com).
 - New setting on axes, "tickLength", to control the size of ticks or
   turn them off without turning off the labels.
-- Axes are now put in container divs with classes, for instance labels
-  in the x axes can be reached via ".xAxis .tickLabels".
+- Axis labels are now put in container divs with classes, for instance
+  labels in the x axes can be reached via ".xAxis .tickLabel".
+- Support for setting the color of an axis (sponsored by Flight Data
+  Services, www.flightdataservices.com).
+- Tick color is now auto-generated as the base color with some
+  transparency (unless you override it).
+
 - New hooks: drawSeries
 
 Bug fixes:

jquery.flot.js

@@ -53,6 +53,8 @@
                 xaxis: {
                     position: "bottom", // or "top"
                     mode: null, // null or "time"
+                    color: null, // base color, labels, ticks
+                    tickColor: null, // possibly different color of ticks, e.g. "rgba(0,0,0,0.15)"
                     transform: null, // null or f: number -> number to transform axis
                     inverseTransform: null, // if transform is set, this should be the inverse function
                     min: null, // min. value to show, null means set automatically
@@ -110,11 +112,11 @@
                     aboveData: false,
                     color: "#545454", // primary color used for outline and labels
                     backgroundColor: null, // null for transparent, else color
-                    tickColor: "rgba(0,0,0,0.15)", // color used for the ticks
+                    borderColor: null, // set if different from the grid color
+                    tickColor: null, // color for the ticks, e.g. "rgba(0,0,0,0.15)"
                     labelMargin: 5, // in pixels
                     axisMargin: 8, // in pixels
                     borderWidth: 2, // in pixels
-                    borderColor: null, // set if different from the grid color
                     markings: null, // array of ranges or fn: axes -> array of ranges
                     markingsColor: "#f4f4f4",
                     markingsLineWidth: 2,
@@ -130,8 +132,6 @@
         overlay = null,     // canvas for interactive stuff on top of plot
         eventHolder = null, // jQuery object that events should be bound to
         ctx = null, octx = null,
-        /*axes = { xaxis: { n: 1 }, yaxis: { n: 1 },
-                 x2axis: { n: 2 }, y2axis: { n: 2 } },*/
         xaxes = [], yaxes = [],
         plotOffset = { left: 0, right: 0, top: 0, bottom: 0},
         canvasWidth = 0, canvasHeight = 0,
@@ -232,8 +232,21 @@
             var i;
             
             $.extend(true, options, opts);
+            
+            if (options.xaxis.color == null)
+                options.xaxis.color = options.grid.color;
+            if (options.yaxis.color == null)
+                options.yaxis.color = options.grid.color;
+            
+            if (options.xaxis.tickColor == null) // backwards-compatibility
+                options.xaxis.tickColor = options.grid.tickColor;
+            if (options.yaxis.tickColor == null) // backwards-compatibility
+                options.yaxis.tickColor = options.grid.tickColor;
+
             if (options.grid.borderColor == null)
                 options.grid.borderColor = options.grid.color;
+            if (options.grid.tickColor == null)
+                options.grid.tickColor = $.color.parse(options.grid.color).scale('a', 0.22).toString();
             
             // fill in defaults in axes, copy at least always the
             // first as the rest of the code assumes it'll be there
@@ -1438,13 +1451,15 @@
             }
             
             // draw the ticks
-            ctx.strokeStyle = options.grid.tickColor;
             var axes = getUsedAxes(), bw = options.grid.borderWidth;
 
             for (var j = 0; j < axes.length; ++j) {
                 var axis = axes[j], box = axis.box,
                     t = axis.tickLength, x, y, xoff, yoff;
 
+                ctx.strokeStyle = axis.options.tickColor || $.color.parse(axis.options.color).scale('a', 0.22).toString();
+                ctx.lineWidth = 1;
+                
                 // find the edges
                 if (axis.direction == "x") {
                     x = 0;
@@ -1461,8 +1476,6 @@
                         x = box.left - plotOffset.left;
                 }
                 
-                ctx.lineWidth = 1;
-                
                 // draw tick bar
                 if (!axis.innermost) {
                     ctx.beginPath();
@@ -1536,13 +1549,13 @@
         function insertAxisLabels() {
             placeholder.find(".tickLabels").remove();
             
-            var html = ['<div class="tickLabels" style="font-size:smaller;color:' + options.grid.color + '">'];
+            var html = ['<div class="tickLabels" style="font-size:smaller">'];
 
             var axes = getUsedAxes();
             for (var j = 0; j < axes.length; ++j) {
                 var axis = axes[j], box = axis.box;
                 //debug: html.push('<div style="position:absolute;opacity:0.10;background-color:red;left:' + box.left + 'px;top:' + box.top + 'px;width:' + box.width +  'px;height:' + box.height + 'px"></div>')
-                html.push('<div class="' + axis.direction + 'Axis ' + axis.direction + axis.n + 'Axis">');
+                html.push('<div class="' + axis.direction + 'Axis ' + axis.direction + axis.n + 'Axis" style="color:' + axis.options.color + '">');
                 for (var i = 0; i < axis.ticks.length; ++i) {
                     var tick = axis.ticks[i];
                     if (!tick.label || tick.v < axis.min || tick.v > axis.max)