From 9e906ae6bedb3afb02015d18d0bc2a42d558aea6 Mon Sep 17 00:00:00 2001 From: David Eberlein Date: Fri, 12 Apr 2013 09:34:48 +0200 Subject: [PATCH] FEATURE: Added support for per-axis grid options and added new option: "gridLinePattern" --- dygraph.js | 49 +++++++++++++++++++++++++++++++++++-------------- plugins/grid.js | 57 +++++++++++++++++++++++++++++++++++++++++++-------------- 2 files changed, 78 insertions(+), 28 deletions(-) diff --git a/dygraph.js b/dygraph.js index 0dcc23a..52b7700 100644 --- a/dygraph.js +++ b/dygraph.js @@ -344,18 +344,24 @@ Dygraph.DEFAULT_ATTRS = { pixelsPerLabel: 60, axisLabelFormatter: Dygraph.dateAxisFormatter, valueFormatter: Dygraph.dateString_, + drawGrid: true, + independentTicks: true, ticker: null // will be set in dygraph-tickers.js }, y: { pixelsPerLabel: 30, valueFormatter: Dygraph.numberValueFormatter, axisLabelFormatter: Dygraph.numberAxisLabelFormatter, + drawGrid: true, + independentTicks: true, ticker: null // will be set in dygraph-tickers.js }, y2: { pixelsPerLabel: 30, valueFormatter: Dygraph.numberValueFormatter, axisLabelFormatter: Dygraph.numberAxisLabelFormatter, + drawGrid: false, + independentTicks: false, ticker: null // will be set in dygraph-tickers.js } } @@ -2588,12 +2594,15 @@ Dygraph.prototype.computeYAxisRanges_ = function(extremes) { }; var numAxes = this.attributes_.numAxes(); var ypadCompat, span, series, ypad; + + var p_axis; // Compute extreme values, a span and tick marks for each axis. for (var i = 0; i < numAxes; i++) { var axis = this.axes_[i]; var logscale = this.attributes_.getForAxis("logscale", i); var includeZero = this.attributes_.getForAxis("includeZero", i); + var independentTicks = this.attributes_.getForAxis("independentTicks", i); series = this.attributes_.seriesForAxis(i); // Add some padding. This supports two Y padding operation modes: @@ -2711,20 +2720,32 @@ Dygraph.prototype.computeYAxisRanges_ = function(extremes) { } else { axis.computedValueRange = axis.extremeRange; } - - // Add ticks. By default, all axes inherit the tick positions of the - // primary axis. However, if an axis is specifically marked as having - // independent ticks, then that is permissible as well. - var opts = this.optionsViewForAxis_('y' + (i ? '2' : '')); - var ticker = opts('ticker'); - if (i === 0 || axis.independentTicks) { + + + if(independentTicks){ + axis.independentTicks = independentTicks; + var opts = this.optionsViewForAxis_('y' + (i ? '2' : '')); + var ticker = opts('ticker'); axis.ticks = ticker(axis.computedValueRange[0], - axis.computedValueRange[1], - this.height_, // TODO(danvk): should be area.height - opts, - this); - } else { - var p_axis = this.axes_[0]; + axis.computedValueRange[1], + this.height_, // TODO(danvk): should be area.height + opts, + this); + // Define the first indepentant axis as primary axis. + if(!p_axis) + p_axis = axis; + } + } + + // Add ticks. By default, all axes inherit the tick positions of the + // primary axis. However, if an axis is specifically marked as having + // independent ticks, then that is permissible as well. + for (var i = 0; i < numAxes; i++) { + var axis = this.axes_[i]; + + if (!axis.independentTicks) { + var opts = this.optionsViewForAxis_('y' + (i ? '2' : '')); + var ticker = opts('ticker'); var p_ticks = p_axis.ticks; var p_scale = p_axis.computedValueRange[1] - p_axis.computedValueRange[0]; var scale = axis.computedValueRange[1] - axis.computedValueRange[0]; @@ -2742,7 +2763,7 @@ Dygraph.prototype.computeYAxisRanges_ = function(extremes) { this, tick_values); } - } + } }; /** diff --git a/plugins/grid.js b/plugins/grid.js index 9186dd4..5d9b6c6 100644 --- a/plugins/grid.js +++ b/plugins/grid.js @@ -50,29 +50,55 @@ grid.prototype.willDrawChart = function(e) { var x, y, i, ticks; if (g.getOption('drawYGrid')) { + var axes = ["y","y2"]; + var strokeStyles = [], lineWidths = [], drawGrid = [], stroking = [], strokePattern =[]; + for(var index in axes){ + drawGrid[index] = g.getOptionForAxis("drawGrid",axes[index]); + if(drawGrid[index]){ + strokeStyles[index] = g.getOptionForAxis('gridLineColor',axes[index]); + lineWidths[index] = g.getOptionForAxis('gridLineWidth',axes[index]); + strokePattern[index] = g.getOptionForAxis('gridLinePattern',axes[index]); + stroking[index] = strokePattern[index] && (strokePattern[index].length >= 2); + } + } ticks = layout.yticks; ctx.save(); - ctx.strokeStyle = g.getOption('gridLineColor'); - ctx.lineWidth = g.getOption('gridLineWidth'); + // draw grids for the differen axes for (i = 0; i < ticks.length; i++) { - // TODO(danvk): allow secondary axes to draw a grid, too. - if (ticks[i][0] !== 0) continue; - x = halfUp(area.x); - y = halfDown(area.y + ticks[i][1] * area.h); - ctx.beginPath(); - ctx.moveTo(x, y); - ctx.lineTo(x + area.w, y); - ctx.closePath(); - ctx.stroke(); + var axis = ticks[i][0]; + if(drawGrid[axis]){ + if (stroking[axis]) { + ctx.installPattern(strokePattern[axis]); + } + ctx.strokeStyle = strokeStyles[axis]; + ctx.lineWidth = lineWidths[axis]; + + x = halfUp(area.x); + y = halfDown(area.y + ticks[i][1] * area.h); + ctx.beginPath(); + ctx.moveTo(x, y); + ctx.lineTo(x + area.w, y); + ctx.closePath(); + ctx.stroke(); + + if (stroking[axis]) { + ctx.uninstallPattern(); + } + } } ctx.restore(); } - if (g.getOption('drawXGrid')) { + if (g.getOption('drawXGrid') && g.getOptionForAxis("drawGrid",'x')) { ticks = layout.xticks; ctx.save(); - ctx.strokeStyle = g.getOption('gridLineColor'); - ctx.lineWidth = g.getOption('gridLineWidth'); + var strokePattern = g.getOptionForAxis('gridLinePattern','x'); + var stroking = strokePattern && (strokePattern.length >= 2); + if (stroking) { + ctx.installPattern(strokePattern); + } + ctx.strokeStyle = g.getOptionForAxis('gridLineColor','x'); + ctx.lineWidth = g.getOptionForAxis('gridLineWidth','x'); for (i = 0; i < ticks.length; i++) { x = halfUp(area.x + ticks[i][0] * area.w); y = halfDown(area.y + area.h); @@ -82,6 +108,9 @@ grid.prototype.willDrawChart = function(e) { ctx.closePath(); ctx.stroke(); } + if (stroking) { + ctx.uninstallPattern(); + } ctx.restore(); } }; -- 2.7.4