assert(newXRange[1]+'<'+xRange[1], newXRange[1] < xRange[1]);
};
+
+RangeSelectorTestCase.prototype.testRangeSelectorPositionIfXAxisNotDrawn = function() {
+ var opts = {
+ width: 480,
+ height: 100,
+ xAxisHeight: 30,
+ drawXAxis: false,
+ showRangeSelector: true,
+ rangeSelectorHeight: 30
+ };
+ var data = [
+ [0, 1],
+ [10, 1]
+ ];
+ 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);
+ var bgcanvas = graph.getElementsByClassName('dygraph-rangesel-bgcanvas')[0];
+ assertEquals("Range selector is not at the expected position.","70px", bgcanvas.style.top);
+ var fgcanvas = graph.getElementsByClassName('dygraph-rangesel-fgcanvas')[0];
+ assertEquals("Range selector is not at the expected position.","70px", fgcanvas.style.top);
+};
+
RangeSelectorTestCase.prototype.assertGraphExistence = function(g, graph) {
assertNotNull(g);
var zoomhandles = graph.getElementsByClassName('dygraph-rangesel-zoomhandle');
* The chart canvas has already been created by the Dygraph object. The
* renderer simply gets a drawing context.
*
- * @param {Dyraph} dygraph The chart to which this renderer belongs.
- * @param {Canvas} element The <canvas> DOM element on which to draw.
+ * @param {Dygraph} dygraph The chart to which this renderer belongs.
+ * @param {HTMLCanvasElement} element The <canvas> DOM element on which to draw.
* @param {CanvasRenderingContext2D} elementContext The drawing context.
* @param {DygraphLayout} layout The chart's DygraphLayout object.
*
this.width = this.element.width;
// --- check whether everything is ok before we return
+ // NOTE(konigsberg): isIE is never defined in this object. Bug of some sort.
if (!this.isIE && !(DygraphCanvasRenderer.isSupported(this.element)))
throw "Canvas is not supported.";
/**
* Add canvas Actually draw the lines chart, including error bars.
- * If opt_seriesName is specified, only that series will be drawn.
- * (This is used for expedited redrawing with highlightSeriesOpts)
- * Lines are typically drawn in the non-interactive dygraph canvas. If opt_ctx
- * is specified, they can be drawn elsewhere.
*
* This function can only be called if DygraphLayout's points array has been
* updated with canvas{x,y} attributes, i.e. by
* DygraphCanvasRenderer._updatePoints.
+ *
+ * @param {string=} opt_seriesName when specified, only that series will
+ * be drawn. (This is used for expedited redrawing with highlightSeriesOpts)
+ * @param {CanvasRenderingContext2D} opt_ctx when specified, the drawing
+ * context. However, lines are typically drawn on the object's
+ * elementContext.
* @private
*/
DygraphCanvasRenderer.prototype._renderLineChart = function(opt_seriesName, opt_ctx) {
this.setNames.push(setname);
};
+/**
+ * Returns the box which the chart should be drawn in. This is the canvas's
+ * box, less space needed for the axis and chart labels.
+ *
+ * @return {{x: number, y: number, w: number, h: number}}
+ */
DygraphLayout.prototype.getPlotArea = function() {
return this.area_;
};
"use strict";
/*
- * Interesting member variables:
- * dygraph_ - the graph.
+ * Interesting member variables: (REMOVING THIS LIST AS I CLOSURIZE)
* global_ - global attributes (common among all graphs, AIUI)
* user - attributes set by the user
- * yAxes_ - array of axis index to { series : [ series names ] , options : { axis-specific options. }
- * xAxis_ - { options : { axis-specific options. }
* series_ - { seriesName -> { idx, yAxis, options }}
- * labels_ - used as mapping from index to series name.
*/
/**
* @constructor
*/
var DygraphOptions = function(dygraph) {
+ /**
+ * The dygraph.
+ * @type {!Dygraph}
+ */
this.dygraph_ = dygraph;
- /** @type {Array.<{options: Object, series: string}>} @private */
+ /**
+ * Array of axis index to { series : [ series names ] , options : { axis-specific options. }
+ * @type {Array.<{series : Array.<string>, options : Object}>} @private
+ */
this.yAxes_ = [];
- /** @type {{options: Object}} @private */
- this.xAxis_ = {options: {}};
- /** @type {Object} @private */
+
+ /**
+ * Contains x-axis specific options, which are stored in the options key.
+ * This matches the yAxes_ object structure (by being a dictionary with an
+ * options element) allowing for shared code.
+ * @type {options: Object} @private
+ */
+ this.xAxis_ = {};
this.series_ = {};
// Once these two objects are initialized, you can call get();
this.global_ = this.dygraph_.attrs_;
this.user_ = this.dygraph_.user_attrs_ || {};
+ /**
+ * A list of series in columnar order.
+ * @type {Array.<string>}
+ */
+ this.labels_ = [];
+
this.highlightSeries_ = this.get("highlightSeriesOpts") || {};
this.reparseSeries();
};
-/*
+/**
* Not optimal, but does the trick when you're only using two axes.
* If we move to more axes, this can just become a function.
+ *
+ * @type {Object.<number>}
+ * @private
*/
DygraphOptions.AXIS_STRING_MAPPINGS_ = {
'y' : 0,
if (container === null || containee === null) {
return false;
}
- while (containee && containee !== container) {
- containee = containee.parentNode;
+ var containeeNode = /** @type {Node} */ (containee);
+ while (containeeNode && containeeNode !== container) {
+ containeeNode = containeeNode.parentNode;
}
- return (containee === container);
+ return (containeeNode === container);
};
}
var plotArea = this.dygraph_.layout_.getPlotArea();
- var xAxisLabelHeight = this.getOption_('xAxisHeight') || (this.getOption_('axisLabelFontSize') + 2 * this.getOption_('axisTickSize'));
+
+ var xAxisLabelHeight = 0;
+ if(this.getOption_('drawXAxis')){
+ xAxisLabelHeight = this.getOption_('xAxisHeight') || (this.getOption_('axisLabelFontSize') + 2 * this.getOption_('axisTickSize'));
+ }
this.canvasRect_ = {
x: plotArea.x,
y: plotArea.y + plotArea.h + xAxisLabelHeight + 4,
Roll period of 14 timesteps, custom range selector height and plot color.
</p>
<div id="roll14" style="width:800px; height:320px;"></div>
+ <p>
+ 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>
<script type="text/javascript">
g1 = new Dygraph(
document.getElementById("noroll"),
rangeSelectorPlotFillColor: 'lightyellow'
}
);
+ g3 = new Dygraph(
+ document.getElementById("nochart"),
+ [[0,1],[10,1]],
+ {
+ xAxisHeight: 30,
+ drawXAxis: false,
+ showRangeSelector: true,
+ rangeSelectorHeight: 30,
+ }
+ );
</script>
</body>
</html>
projects / dygraphs.git / commitdiff