showRangeSelector: true,
rangeSelectorHeight: 30,
rangeSelectorPlotFillColor: 'lightyellow',
+ rangeSelectorPlotFillGradientColor: 'rgba(200, 200, 42, 10)',
labels: ['X', 'Y']
};
var data = [
];
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."
},
+ "rangeSelectorPlotFillGradientColor": {
+ "default": "white",
+ "labels": ["Interactive Elements"],
+ "type": "string",
+ "description": "The top color for the range selector mini plot fill color gradient. This can be of the form \"#AABBCC\" or \"rgb(255,100,200)\" or \"rgba(255,100,200,42)\" or \"yellow\". You can also specify null or \"\" to disable the gradient and fill with one single color."
+ },
"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.
*/
'pointClickCallback': true,
'pointSize': true,
'rangeSelectorPlotFillColor': true,
+ 'rangeSelectorPlotFillGradientColor': true,
'rangeSelectorPlotStrokeColor': true,
'showLabelsOnHighlight': true,
'showRoller': 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
showRangeSelector: false,
rangeSelectorHeight: 40,
rangeSelectorPlotStrokeColor: "#808FAB",
+ rangeSelectorPlotFillGradientColor: "white",
rangeSelectorPlotFillColor: "#A7B1C4",
showInRangeSelector: null,
};
/**
- * 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');
"<div id='noroll' style='width:600px; height:300px;'></div>",
"",
"<p>Roll period of 14 timesteps, custom range selector height and plot color.</p>",
- "<div id='roll14' style='width:600px; height:300px;'></div>"].join("\n");
+ "<div id='roll14' style='width:600px; height:300px;'></div>",
+ "",
+ "<div style='background-color: #101015; color: white'>",
+ "<p>Dark background, custom range selector gradient color.</p>",
+ "<div id='darkbg' style='width:600px; height:300px;'></div>",
+ "</div>"].join("\n");
},
run: function() {
new Dygraph(
rangeSelectorHeight: 30,
rangeSelectorPlotStrokeColor: 'yellow',
rangeSelectorPlotFillColor: 'lightyellow'
- });
+ }
+ );
+ new Dygraph(
+ document.getElementById("darkbg"),
+ data_temp,
+ {
+ rollPeriod: 14,
+ showRoller: true,
+ customBars: true,
+ title: 'Nightly Temperatures in New York vs. San Francisco',
+ ylabel: 'Temperature (F)',
+ legend: 'always',
+ labelsDivStyles: { 'textAlign': 'right', 'backgroundColor': '#101015' },
+ showRangeSelector: true,
+ rangeSelectorPlotFillColor: 'MediumSlateBlue',
+ rangeSelectorPlotFillGradientColor: 'rgba(123, 104, 238, 0)',
+ axisLabelColor: 'white',
+ colorValue: 0.9,
+ fillAlpha: 0.4
+ }
+ );
}
});
}
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'));
*/
rangeSelector.prototype.drawMiniPlot_ = function() {
var fillStyle = this.getOption_('rangeSelectorPlotFillColor');
+ var fillGradientStyle = this.getOption_('rangeSelectorPlotFillGradientColor');
var strokeStyle = this.getOption_('rangeSelectorPlotStrokeColor');
if (!fillStyle && !strokeStyle) {
return;
if (fillStyle) {
var lingrad = this.bgcanvas_ctx_.createLinearGradient(0, 0, 0, canvasHeight);
- lingrad.addColorStop(0, 'white');
+ if (fillGradientStyle) {
+ lingrad.addColorStop(0, fillGradientStyle);
+ }
lingrad.addColorStop(1, fillStyle);
this.bgcanvas_ctx_.fillStyle = lingrad;
ctx.fill();
if (g.rollPeriod() > 1) {
series = dataHandler.rollingAverage(series, g.rollPeriod(), options);
}
-
+
rolledSeries.push(series);
}
#bordered {
border: 1px solid red;
}
+ #dark-background {
+ background-color: #101015;
+ color: white;
+ }
</style>
</head>
<body>
Demo of range selecor without the chart. (interesting if multiple charts should be synced with one range selector).
</p>
<div id="nochart" style="width:800px; height:30px;"></div>
+ <div id="dark-background">
+ <p>Demo of range selector on dark background, with (left) and without (right) custom range selector gradient color.</p>
+ <div id="darkbg1" style="width:400px; height:300px;display:inline-block;"></div>
+ <div id="darkbg2" style="width:400px; height:300px;display:inline-block;"></div>
+ </div>
<p>Demo of range selector with stepPlot</p>
<div id="stepplot" style="width:800px; height:320px;"></div>
rangeSelectorHeight: 30
}
);
- g5 = new Dygraph(document.getElementById("stepplot"),
+ g5 = new Dygraph(
+ document.getElementById("darkbg1"),
+ data_temp,
+ {
+ rollPeriod: 14,
+ showRoller: true,
+ customBars: true,
+ title: 'Nightly Temperatures in NY vs. SF',
+ ylabel: 'Temperature (F)',
+ legend: 'always',
+ labelsDivStyles: { 'textAlign': 'right', 'backgroundColor': '#101015' },
+ showRangeSelector: true,
+ rangeSelectorPlotFillColor: 'MediumSlateBlue',
+ rangeSelectorPlotFillGradientColor: 'rgba(123, 104, 238, 0)',
+ axisLabelColor: 'white',
+ colorValue: 0.9,
+ fillAlpha: 0.4
+ }
+ );
+ g6 = new Dygraph(
+ document.getElementById("darkbg2"),
+ data_temp,
+ {
+ rollPeriod: 14,
+ showRoller: true,
+ customBars: true,
+ title: 'Nightly Temperatures in NY vs. SF',
+ ylabel: 'Temperature (F)',
+ legend: 'always',
+ labelsDivStyles: { 'textAlign': 'right', 'backgroundColor': '#101015' },
+ showRangeSelector: true,
+ rangeSelectorPlotFillColor: 'MediumSlateBlue',
+ axisLabelColor: 'white',
+ colorValue: 0.9,
+ fillAlpha: 0.4
+ }
+ );
+ g7 = new Dygraph(document.getElementById("stepplot"),
"Date,Idle,Used\n" +
"2008-05-07,70,30\n" +
"2008-05-08,42,88\n" +
projects / dygraphs.git / commitdiff