stepPlot: false,
avoidMinZero: false,
+ // Sizes of the various chart labels.
+ titleHeight: 28,
+ xLabelHeight: 18,
+ yLabelWidth: 18,
+
interactionModel: null // will be set to Dygraph.defaultInteractionModel.
};
};
/**
- * Position the labels div so that its right edge is flush with the right edge
- * of the charting area.
+ * Position the labels div so that:
+ * - its right edge is flush with the right edge of the charting area
+ * - its top edge is flush with the top edge of the charting area
*/
Dygraph.prototype.positionLabelsDiv_ = function() {
// Don't touch a user-specified labelsDiv.
var area = this.plotter_.area;
var div = this.attr_("labelsDiv");
div.style.left = area.x + area.w - this.attr_("labelsDivWidth") - 1 + "px";
+ div.style.top = area.y + "px";
};
/**
var display = this.attr_('showRoller') ? 'block' : 'none';
+ var area = this.plotter_.area;
var textAttr = { "position": "absolute",
"zIndex": 10,
- "top": (this.plotter_.area.h - 25) + "px",
- "left": (this.plotter_.area.x + 1) + "px",
+ "top": (area.y + area.h - 25) + "px",
+ "left": (area.x + 1) + "px",
"display": display
};
this.roller_.size = "2";
context.initialLeftmostDate = null;
context.dateRange = null;
context.valueRange = null;
+ context.boundedDates = null;
+ context.boundedValues = null;
}
// Called in response to an interaction model operation that
if (i % year_mod != 0) continue;
for (var j = 0; j < months.length; j++) {
var date_str = i + "/" + zeropad(1 + months[j]) + "/01";
- var t = Date.parse(date_str);
+ var t = Dygraph.dateStrToMillis(date_str);
if (t < start_time || t > end_time) continue;
ticks.push({ v:t, label: formatter(new Date(t), granularity) });
}
seriesForAxis[idx].push(series);
}
+ // If no series are defined or visible then fill in some reasonable defaults.
+ if (seriesForAxis.length == 0) {
+ var axis = this.axes_[0];
+ axis.computedValueRange = [0, 1];
+ var ret =
+ Dygraph.numericTicks(axis.computedValueRange[0],
+ axis.computedValueRange[1],
+ this,
+ axis);
+ axis.ticks = ret.ticks;
+ this.numYDigits_ = ret.numDigits;
+ return;
+ }
+
// Compute extreme values, a span and tick marks for each axis.
for (var i = 0; i < this.axes_.length; i++) {
var axis = this.axes_[i];
while (dateStrSlashed.search("-") != -1) {
dateStrSlashed = dateStrSlashed.replace("-", "/");
}
- d = Date.parse(dateStrSlashed);
+ d = Dygraph.dateStrToMillis(dateStrSlashed);
} else if (dateStr.length == 8) { // e.g. '20090712'
// TODO(danvk): remove support for this format. It's confusing.
dateStrSlashed = dateStr.substr(0,4) + "/" + dateStr.substr(4,2)
+ "/" + dateStr.substr(6,2);
- d = Date.parse(dateStrSlashed);
+ d = Dygraph.dateStrToMillis(dateStrSlashed);
} else {
// Any format that Date.parse will accept, e.g. "2009/07/12" or
// "2009/07/12 12:34:56"
- d = Date.parse(dateStr);
+ d = Dygraph.dateStrToMillis(dateStr);
}
if (!d || isNaN(d)) {
annotations.push(ann);
}
}
+
+ // Strip out infinities, which give dygraphs problems later on.
+ for (var j = 0; j < row.length; j++) {
+ if (!isFinite(row[j])) row[j] = null;
+ }
} else {
for (var j = 0; j < cols - 1; j++) {
row.push([ data.getValue(i, 1 + 2 * j), data.getValue(i, 2 + 2 * j) ]);
if (ret.length > 0 && row[0] < ret[ret.length - 1][0]) {
outOfOrder = true;
}
-
- // Strip out infinities, which give dygraphs problems later on.
- for (var j = 0; j < row.length; j++) {
- if (!isFinite(row[j])) row[j] = null;
- }
ret.push(row);
}
}
}
+// This is identical to JavaScript's built-in Date.parse() method, except that
+// it doesn't get replaced with an incompatible method by aggressive JS
+// libraries like MooTools or Joomla.
+Dygraph.dateStrToMillis = function(str) {
+ return new Date(str).getTime();
+};
+
// These functions are all based on MochiKit.
Dygraph.update = function (self, o) {
if (typeof(o) != 'undefined' && o !== null) {
"sigma": {
"default": "2.0",
"labels": ["Error Bars"],
- "type": "integer",
+ "type": "float",
"description": "When errorBars is set, shade this many standard deviations above/below each point."
},
"customBars": {
"type": "float",
"default": "null",
"description": "A value representing the farthest a graph may be panned, in percent of the display. For example, a value of 0.1 means that the graph can only be panned 10% pased the edges of the displayed values. null means no bounds."
+ },
+ "title": {
+ "labels": ["Chart labels"],
+ "type": "string",
+ "default": "null",
+ "description": "Text to display above the chart. You can supply any HTML for this value, not just text. If you wish to style it using CSS, use the 'dygraph-label' or 'dygraph-title' classes."
+ },
+ "titleHeight": {
+ "default": "18",
+ "labels": ["Chart labels"],
+ "type": "integer",
+ "description": "Height of the chart title, in pixels. This also controls the default font size of the title. If you style the title on your own, this controls how much space is set aside above the chart for the title's div."
+ },
+ "xlabel": {
+ "labels": ["Chart labels"],
+ "type": "string",
+ "default": "null",
+ "description": "Text to display below the chart's x-axis. You can supply any HTML for this value, not just text. If you wish to style it using CSS, use the 'dygraph-label' or 'dygraph-xlabel' classes."
+ },
+ "xLabelHeight": {
+ "labels": ["Chart labels"],
+ "type": "integer",
+ "default": "18",
+ "description": "Height of the x-axis label, in pixels. This also controls the default font size of the x-axis label. If you style the label on your own, this controls how much space is set aside below the chart for the x-axis label's div."
+ },
+ "ylabel": {
+ "labels": ["Chart labels"],
+ "type": "string",
+ "default": "null",
+ "description": "Text to display to the left of the chart's y-axis. You can supply any HTML for this value, not just text. If you wish to style it using CSS, use the 'dygraph-label' or 'dygraph-ylabel' classes. The text will be rotated 90 degrees by default, so CSS rules may behave in unintuitive ways. No additional space is set aside for a y-axis label. If you need more space, increase the width of the y-axis tick labels using the yAxisLabelWidth option. If you need a wider div for the y-axis label, either style it that way with CSS (but remember that it's rotated, so width is controlled by the 'height' property) or set the yLabelWidth option."
+ },
+ "yLabelWidth": {
+ "labels": ["Chart labels"],
+ "type": "integer",
+ "default": "18",
+ "description": "Width of the div which contains the y-axis label. Since the y-axis label appears rotated 90 degrees, this actually affects the height of its div."
}
}
; // </JSON>
// NOTE: in addition to parsing as JS, this snippet is expected to be valid
// JSON. This assumption cannot be checked in JS, but it will be checked when
-// documentation is generated by the generate-documentation.py script.
+// documentation is generated by the generate-documentation.py script. For the
+// most part, this just means that you should always use double quotes.
// Do a quick sanity check on the options reference.
(function() {
var valid_cats = [
'Annotations',
'Axis display',
+ 'Chart labels',
'CSV parsing',
'Callbacks',
'Data Line display',
projects / dygraphs.git / blobdiff