this.assertGraphExistence(g, graph);
};
+RangeSelectorTestCase.prototype.testAdditionalRangeSelectorOptions = function() {
+ var opts = {
+ width: 480,
+ height: 320,
+ showRangeSelector: true,
+ rangeSelectorHeight: 30,
+ rangeSelectorBGStrokeColor: 'blue',
+ rangeSelectorBGLineWidth: 3,
+ rangeSelectorPlotLineWidth: 0.5,
+ rangeSelectorPlotGradientColor: 'gray',
+ rangeSelectorFGStrokeColor: 'red',
+ rangeSelectorFGLineWidth: 2,
+ rangeSelectorAlpha: 0.8,
+ labels: ['X', 'Y']
+ };
+ var data = [
+ [1, 10],
+ [2, 15],
+ [3, 10],
+ [4, 15],
+ [5, 10],
+ [6, 15],
+ [7, 10],
+ [8, 15],
+ [9, 10]
+ ];
+ var graph = document.getElementById("graph");
+ var g = new Dygraph(graph, data, opts);
+ this.assertGraphExistence(g, graph);
+};
+
RangeSelectorTestCase.prototype.testRangeSelectorEnablingAfterCreation = function() {
var opts = {
width: 480,
];
var graph = document.getElementById("graph");
var g = new Dygraph(graph, data, opts);
-
+
//assert, that the range selector is at top position 70 since the 30px of the
// xAxis shouldn't be reserved since it isn't drawn.
this.assertGraphExistence(g, graph);
"type": "string",
"description": "The range selector mini plot fill color. This can be of the form \"#AABBCC\" or \"rgb(255,100,200)\" or \"yellow\". You can also specify null or \"\" to turn off fill."
},
+ "rangeSelectorBGStrokeColor": {
+ "default": "gray",
+ "labels": ["Interactive Elements"],
+ "type": "string",
+ "description": "The color of the lines below and on both sides of the range selector mini plot. This can be of the form \"#AABBCC\" or \"rgb(255,100,200)\" or \"yellow\"."
+ },
+ "rangeSelectorBGLineWidth": {
+ "default": "1",
+ "labels": ["Interactive Elements"],
+ "type": "float",
+ "description": "The width of the lines below and on both sides of the range selector mini plot."
+ },
+ "rangeSelectorPlotLineWidth": {
+ "default": "1.5",
+ "labels": ["Interactive Elements"],
+ "type": "float",
+ "description": "The width of the range selector mini plot line."
+ },
+ "rangeSelectorPlotGradientColor": {
+ "default": "white",
+ "labels": ["Interactive Elements"],
+ "type": "string",
+ "description": "The color that along with rangeSelectorPlotFillColor defines the linear gradient in the range selector mini plot. This can be of the form \"#AABBCC\" or \"rgb(255,100,200)\" or \"yellow\". You can also specify \"\" to turn off gradient."
+ },
+ "rangeSelectorFGStrokeColor": {
+ "default": "black",
+ "labels": ["Interactive Elements"],
+ "type": "string",
+ "description": "The color of the lines in the interactive layer of the range selector. This can be of the form \"#AABBCC\" or \"rgb(255,100,200)\" or \"yellow\"."
+ },
+ "rangeSelectorFGLineWidth": {
+ "default": "1",
+ "labels": ["Interactive Elements"],
+ "type": "float",
+ "description": "The width the lines in the interactive layer of the range selector."
+ },
+ "rangeSelectorAlpha": {
+ "default": "0.6",
+ "labels": ["Interactive Elements"],
+ "type": "float (0.0 - 1.0)",
+ "description": "The transparency of the veil that is drawn over the unselected portions of the range selector mini plot. A value of 0 represents full transparency and the unselected portions of the mini plot will appear as normal. A value of 1 represents full opacity and the unselected portions of the mini plot will be hidden."
+ },
"showInRangeSelector": {
"default": "null",
"labels": ["Interactive Elements"],
};
/**
- * Date accessors to get the parts of a calendar date (year, month,
+ * Date accessors to get the parts of a calendar date (year, month,
* day, hour, minute, second and millisecond) according to local time,
* and factory method to call the Date constructor with an array of arguments.
*/
};
/**
- * Date accessors to get the parts of a calendar date (year, month,
+ * Date accessors to get the parts of a calendar date (year, month,
* day of month, hour, minute, second and millisecond) according to UTC time,
* and factory method to call the Date constructor with an array of arguments.
*/
'pointSize': true,
'rangeSelectorPlotFillColor': true,
'rangeSelectorPlotStrokeColor': true,
+ 'rangeSelectorBGStrokeColor': true,
+ 'rangeSelectorBGLineWidth': true,
+ 'rangeSelectorPlotLineWidth': true,
+ 'rangeSelectorPlotGradientColor': true,
+ 'rangeSelectorFGStrokeColor': true,
+ 'rangeSelectorFGLineWidth': true,
+ 'rangeSelectorAlpha': true,
'showLabelsOnHighlight': true,
'showRoller': true,
'strokeWidth': true,
/**
* Convert a JS date to a string appropriate to display on an axis that
- * is displaying values at the stated granularity. This respects the
+ * is displaying values at the stated granularity. This respects the
* labelsUTC option.
* @param {Date} date The date to format
* @param {number} granularity One of the Dygraph granularity constants
Dygraph.dateAxisFormatter = Dygraph.dateAxisLabelFormatter;
/**
- * Return a string version of a JS date for a value label. This respects the
+ * Return a string version of a JS date for a value label. This respects the
* labelsUTC option.
* @param {Date} date The date to be formatted
* @param {Dygraph} opts An options view
rangeSelectorHeight: 40,
rangeSelectorPlotStrokeColor: "#808FAB",
rangeSelectorPlotFillColor: "#A7B1C4",
+ rangeSelectorBGStrokeColor: "gray",
+ rangeSelectorBGLineWidth: 1,
+ rangeSelectorPlotLineWidth:1.5,
+ rangeSelectorPlotGradientColor: "white",
+ rangeSelectorFGStrokeColor: "black",
+ rangeSelectorFGLineWidth: 1,
+ rangeSelectorAlpha: 0.6,
showInRangeSelector: null,
// The ordering here ensures that central lines always appear above any
};
/**
- * Fetch left offset from the specified set index or if not passed, the
+ * Fetch left offset from the specified set index or if not passed, the
* first defined boundaryIds record (see bug #236).
* @private
*/
*/
Dygraph.prototype.predraw_ = function() {
var start = new Date();
-
+
// Create the correct dataHandler
this.dataHandler_ = new (this.getHandlerClass_())();
if (this.rollPeriod_ > 1) {
series = this.dataHandler_.rollingAverage(series, this.rollPeriod_, this.attributes_);
}
-
+
this.rolledSeries_.push(series);
}
var seriesIdx, sampleIdx;
var firstIdx, lastIdx;
var axisIdx;
-
+
// Loop over the fields (series). Go from the last to the first,
// because if they're stacked that's how we accumulate the values.
var num_series = rolledSeries.length - 1;
// TODO(danvk): do binary search instead of linear search.
// TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
- firstIdx = null;
+ firstIdx = null;
lastIdx = null;
for (sampleIdx = 0; sampleIdx < series.length; sampleIdx++) {
if (series[sampleIdx][0] >= low && firstIdx === null) {
if (correctedLastIdx !== lastIdx) {
lastIdx = correctedLastIdx;
}
-
+
boundaryIds[seriesIdx-1] = [firstIdx, lastIdx];
-
+
// .slice's end is exclusive, we want to include lastIdx.
series = series.slice(firstIdx, lastIdx + 1);
} else {
}
var seriesName = this.attr_("labels")[seriesIdx];
- var seriesExtremes = this.dataHandler_.getExtremeYValues(series,
+ var seriesExtremes = this.dataHandler_.getExtremeYValues(series,
dateWindow, this.getBooleanOption("stepPlot",seriesName));
- var seriesPoints = this.dataHandler_.seriesToPoints(series,
+ var seriesPoints = this.dataHandler_.seriesToPoints(series,
seriesName, boundaryIds[seriesIdx-1][0]);
if (this.getBooleanOption("stackedGraph")) {
};
var numAxes = this.attributes_.numAxes();
var ypadCompat, span, series, ypad;
-
+
var p_axis;
// Compute extreme values, a span and tick marks for each axis.
} else {
axis.computedValueRange = axis.extremeRange;
}
-
-
+
+
if (independentTicks) {
axis.independentTicks = independentTicks;
var opts = this.optionsViewForAxis_('y' + (i ? '2' : ''));
// 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 plotArea = this.dygraph_.layout_.getPlotArea();
-
+
var xAxisLabelHeight = 0;
if (this.dygraph_.getOptionForAxis('drawAxis', 'x')) {
xAxisLabelHeight = this.getOption_('xAxisHeight') || (this.getOption_('axisLabelFontSize') + 2 * this.getOption_('axisTickSize'));
img.style.zIndex = 10;
img.style.visibility = 'hidden'; // Initially hidden so they don't show up in the wrong place.
img.style.cursor = 'col-resize';
-
+//TODO: change image to more options
if (/MSIE 7/.test(navigator.userAgent)) { // IE7 doesn't support embedded src data.
img.width = 7;
img.height = 14;
}
var margin = 0.5;
- this.bgcanvas_ctx_.lineWidth = 1;
- ctx.strokeStyle = 'gray';
+ this.bgcanvas_ctx_.lineWidth = this.getOption_('rangeSelectorBGLineWidth');
+ ctx.strokeStyle = this.getOption_('rangeSelectorBGStrokeColor');
ctx.beginPath();
ctx.moveTo(margin, margin);
ctx.lineTo(margin, this.canvasRect_.h-margin);
if (!fillStyle && !strokeStyle) {
return;
}
+ var gradientFillStyle = this.getOption_('rangeSelectorPlotGradientColor');
+ if (!gradientFillStyle) { gradientFillStyle = fillStyle; }
var stepPlot = this.getOption_('stepPlot');
if (fillStyle) {
var lingrad = this.bgcanvas_ctx_.createLinearGradient(0, 0, 0, canvasHeight);
- lingrad.addColorStop(0, 'white');
+ lingrad.addColorStop(0, gradientFillStyle);
lingrad.addColorStop(1, fillStyle);
this.bgcanvas_ctx_.fillStyle = lingrad;
ctx.fill();
if (strokeStyle) {
this.bgcanvas_ctx_.strokeStyle = strokeStyle;
- this.bgcanvas_ctx_.lineWidth = 1.5;
+ this.bgcanvas_ctx_.lineWidth = this.getOption_('rangeSelectorPlotLineWidth');
ctx.stroke();
}
};
if (g.rollPeriod() > 1) {
series = dataHandler.rollingAverage(series, g.rollPeriod(), options);
}
-
+
rolledSeries.push(series);
}
var height = this.canvasRect_.h - margin;
var zoomHandleStatus = this.getZoomHandleStatus_();
- ctx.strokeStyle = 'black';
+ ctx.strokeStyle = this.getOption_('rangeSelectorFGStrokeColor');
+ ctx.lineWidth = this.getOption_('rangeSelectorFGLineWidth');
if (!zoomHandleStatus.isZoomed) {
ctx.beginPath();
ctx.moveTo(margin, margin);
var leftHandleCanvasPos = Math.max(margin, zoomHandleStatus.leftHandlePos - this.canvasRect_.x);
var rightHandleCanvasPos = Math.min(width, zoomHandleStatus.rightHandlePos - this.canvasRect_.x);
- ctx.fillStyle = 'rgba(240, 240, 240, 0.6)';
+ ctx.fillStyle = 'rgba(240, 240, 240, ' + this.getOption_('rangeSelectorAlpha').toString() + ')';
ctx.fillRect(0, 0, leftHandleCanvasPos, this.canvasRect_.h);
ctx.fillRect(rightHandleCanvasPos, 0, this.canvasRect_.w - rightHandleCanvasPos, this.canvasRect_.h);
projects / dygraphs.git / commitdiff