/**
* Convert a JS date to a string appropriate to display on an axis that
- * is displaying values at the stated granularity.
+ * is displaying values at the stated granularity. This respects the
+ * labelsDateUTC option.
* @param {Date} date The date to format
* @param {number} granularity One of the Dygraph granularity constants
- * @return {string} The formatted date
+ * @param {Dygraph} opts An options view
+ * @return {string} The date formatted as local time
* @private
*/
-Dygraph.dateAxisFormatter = function(date, granularity) {
+Dygraph.dateAxisLabelFormatter = function(date, granularity, opts) {
+ var utc = opts('labelsDateUTC');
+ var year, month, day, hours, mins, secs, millis;
+ if (utc) {
+ year = date.getUTCFullYear();
+ month = date.getUTCMonth();
+ day = date.getUTCDate();
+ hours = date.getUTCHours();
+ mins = date.getUTCMinutes();
+ secs = date.getUTCSeconds();
+ millis = date.getUTCMilliseconds();
+ } else {
+ year = date.getFullYear();
+ month = date.getMonth();
+ day = date.getDate();
+ hours = date.getHours();
+ mins = date.getMinutes();
+ secs = date.getSeconds();
+ millis = date.getMilliseconds();
+ }
if (granularity >= Dygraph.DECADAL) {
- return '' + date.getFullYear();
+ return '' + year;
} else if (granularity >= Dygraph.MONTHLY) {
- return Dygraph.SHORT_MONTH_NAMES_[date.getMonth()] + ' ' + date.getFullYear();
+ return Dygraph.SHORT_MONTH_NAMES_[month] + ' ' + Dygraph.zeropad(year);
} else {
- var frac = date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds() + date.getMilliseconds();
+ var frac = hours * 3600 + mins * 60 + secs + 1e-3 * millis;
if (frac === 0 || granularity >= Dygraph.DAILY) {
// e.g. '21Jan' (%d%b)
- var nd = new Date(date.getTime() + 3600*1000);
- return Dygraph.zeropad(nd.getDate()) + Dygraph.SHORT_MONTH_NAMES_[nd.getMonth()];
+ return Dygraph.zeropad(day) + Dygraph.SHORT_MONTH_NAMES_[month];
} else {
- return Dygraph.hmsString_(date.getTime());
+ return Dygraph.hmsString_(hours, mins, secs);
}
}
};
/**
+ * Return a string version of a JS date for a value label. This respects the
+ * labelsDateUTC option.
+ * @param {Date} date The date to be formatted
+ * @param {Dygraph} opts An options view
+ * @private
+ */
+Dygraph.dateValueFormatter = function(d, opts) {
+ return Dygraph.dateString_(d, opts('labelsDateUTC'));
+};
+
+/**
* Standard plotters. These may be used by clients.
* Available plotters are:
* - Dygraph.Plotters.linePlotter: draws central lines (most common)
axes: {
x: {
pixelsPerLabel: 60,
- axisLabelFormatter: Dygraph.dateAxisFormatter,
- valueFormatter: Dygraph.dateString_,
+ axisLabelFormatter: Dygraph.dateAxisLabelFormatter,
+ valueFormatter: Dygraph.dateValueFormatter,
drawGrid: true,
drawAxis: true,
independentTicks: true,
if (axis_opts && axis_opts[axis] && axis_opts[axis].hasOwnProperty(opt)) {
return axis_opts[axis][opt];
}
+
+ // I don't like that this is in a second spot.
+ if (axis === 'x' && opt === 'logscale') {
+ // return the default value.
+ // TODO(konigsberg): pull the default from a global default.
+ return false;
+ }
+
// user-specified attributes always trump defaults, even if they're less
// specific.
if (typeof(self.user_attrs_[opt]) != 'undefined') {
var area = this.plotter_.area;
var xRange = this.xAxisRange();
- return xRange[0] + (x - area.x) / area.w * (xRange[1] - xRange[0]);
+
+ if (!this.attributes_.getForAxis("logscale", 'x')) {
+ return xRange[0] + (x - area.x) / area.w * (xRange[1] - xRange[0]);
+ } else {
+ // TODO: remove duplicate code?
+ // Computing the inverse of toDomCoord.
+ var pct = (x - area.x) / area.w;
+
+ // Computing the inverse of toPercentXCoord. The function was arrived at with
+ // the following steps:
+ //
+ // Original calcuation:
+ // pct = (log(x) - log(xRange[0])) / (log(xRange[1]) - log(xRange[0])));
+ //
+ // Multiply both sides by the right-side demoninator.
+ // pct * (log(xRange[1] - log(xRange[0]))) = log(x) - log(xRange[0])
+ //
+ // add log(xRange[0]) to both sides
+ // log(xRange[0]) + (pct * (log(xRange[1]) - log(xRange[0])) = log(x);
+ //
+ // Swap both sides of the equation,
+ // log(x) = log(xRange[0]) + (pct * (log(xRange[1]) - log(xRange[0]))
+ //
+ // Use both sides as the exponent in 10^exp and we're done.
+ // x = 10 ^ (log(xRange[0]) + (pct * (log(xRange[1]) - log(xRange[0])))
+ var logr0 = Dygraph.log10(xRange[0]);
+ var logr1 = Dygraph.log10(xRange[1]);
+ var exponent = logr0 + (pct * (logr1 - logr0));
+ var value = Math.pow(Dygraph.LOG_SCALE, exponent);
+ return value;
+ }
};
/**
// the following steps:
//
// Original calcuation:
- // pct = (logr1 - Dygraph.log10(y)) / (logr1 - Dygraph.log10(yRange[0]));
+ // pct = (log(yRange[1]) - log(y)) / (log(yRange[1]) - log(yRange[0]));
//
- // Move denominator to both sides:
- // pct * (logr1 - Dygraph.log10(yRange[0])) = logr1 - Dygraph.log10(y);
+ // Multiply both sides by the right-side demoninator.
+ // pct * (log(yRange[1]) - log(yRange[0])) = log(yRange[1]) - log(y);
//
- // subtract logr1, and take the negative value.
- // logr1 - (pct * (logr1 - Dygraph.log10(yRange[0]))) = Dygraph.log10(y);
+ // subtract log(yRange[1]) from both sides.
+ // (pct * (log(yRange[1]) - log(yRange[0]))) - log(yRange[1]) = -log(y);
//
- // Swap both sides of the equation, and we can compute the log of the
- // return value. Which means we just need to use that as the exponent in
- // e^exponent.
- // Dygraph.log10(y) = logr1 - (pct * (logr1 - Dygraph.log10(yRange[0])));
-
+ // and multiply both sides by -1.
+ // log(yRange[1]) - (pct * (logr1 - log(yRange[0])) = log(y);
+ //
+ // Swap both sides of the equation,
+ // log(y) = log(yRange[1]) - (pct * (log(yRange[1]) - log(yRange[0])));
+ //
+ // Use both sides as the exponent in 10^exp and we're done.
+ // y = 10 ^ (log(yRange[1]) - (pct * (log(yRange[1]) - log(yRange[0]))));
+ var logr0 = Dygraph.log10(yRange[0]);
var logr1 = Dygraph.log10(yRange[1]);
- var exponent = logr1 - (pct * (logr1 - Dygraph.log10(yRange[0])));
+ var exponent = logr1 - (pct * (logr1 - logr0));
var value = Math.pow(Dygraph.LOG_SCALE, exponent);
return value;
}
var pct;
var logscale = this.attributes_.getForAxis("logscale", axis);
- if (!logscale) {
+ if (logscale) {
+ var logr0 = Dygraph.log10(yRange[0]);
+ var logr1 = Dygraph.log10(yRange[1]);
+ pct = (logr1 - Dygraph.log10(y)) / (logr1 - logr0);
+ } else {
// yRange[1] - y is unit distance from the bottom.
// yRange[1] - yRange[0] is the scale of the range.
// (yRange[1] - y) / (yRange[1] - yRange[0]) is the % from the bottom.
pct = (yRange[1] - y) / (yRange[1] - yRange[0]);
- } else {
- var logr1 = Dygraph.log10(yRange[1]);
- pct = (logr1 - Dygraph.log10(y)) / (logr1 - Dygraph.log10(yRange[0]));
}
return pct;
};
}
var xRange = this.xAxisRange();
- return (x - xRange[0]) / (xRange[1] - xRange[0]);
+ var pct;
+ var logscale = this.attributes_.getForAxis("logscale", 'x') ;
+ if (logscale == true) { // logscale can be null so we test for true explicitly.
+ var logr0 = Dygraph.log10(xRange[0]);
+ var logr1 = Dygraph.log10(xRange[1]);
+ pct = (Dygraph.log10(x) - logr0) / (logr1 - logr0);
+ } else {
+ // x - xRange[0] is unit distance from the left.
+ // xRange[1] - xRange[0] is the scale of the range.
+ // The full expression below is the % from the left.
+ pct = (x - xRange[0]) / (xRange[1] - xRange[0]);
+ }
+ return pct;
};
/**
// TODO(danvk): any other styles that are useful to set here?
this.graphDiv.style.textAlign = 'left'; // This is a CSS "reset"
+ this.graphDiv.style.position = 'relative';
enclosing.appendChild(this.graphDiv);
// Create the canvas for interactive parts of the chart.
// ... and for static parts of the chart.
this.hidden_ = this.createPlotKitCanvas_(this.canvas_);
- this.resizeElements_();
-
this.canvas_ctx_ = Dygraph.getContext(this.canvas_);
this.hidden_ctx_ = Dygraph.getContext(this.hidden_);
+ this.resizeElements_();
+
// The interactive parts of the graph are drawn on top of the chart.
this.graphDiv.appendChild(this.hidden_);
this.graphDiv.appendChild(this.canvas_);
Dygraph.prototype.resizeElements_ = function() {
this.graphDiv.style.width = this.width_ + "px";
this.graphDiv.style.height = this.height_ + "px";
- this.canvas_.width = this.width_;
- this.canvas_.height = this.height_;
+
+ var canvasScale = Dygraph.getContextPixelRatio(this.canvas_ctx_);
+ this.canvas_.width = this.width_ * canvasScale;
+ this.canvas_.height = this.height_ * canvasScale;
this.canvas_.style.width = this.width_ + "px"; // for IE
this.canvas_.style.height = this.height_ + "px"; // for IE
- this.hidden_.width = this.width_;
- this.hidden_.height = this.height_;
+ if (canvasScale !== 1) {
+ this.canvas_ctx_.scale(canvasScale, canvasScale);
+ }
+
+ var hiddenScale = Dygraph.getContextPixelRatio(this.hidden_ctx_);
+ this.hidden_.width = this.width_ * hiddenScale;
+ this.hidden_.height = this.height_ * hiddenScale;
this.hidden_.style.width = this.width_ + "px"; // for IE
this.hidden_.style.height = this.height_ + "px"; // for IE
+ if (hiddenScale !== 1) {
+ this.hidden_ctx_.scale(hiddenScale, hiddenScale);
+ }
};
/**
};
/**
- * Transition function to use in animations. Returns values between 0.0
- * (totally old values) and 1.0 (totally new values) for each frame.
- * @private
- */
-Dygraph.zoomAnimationFunction = function(frame, numFrames) {
- var k = 1.5;
- return (1.0 - Math.pow(k, -frame)) / (1.0 - Math.pow(k, -numFrames));
-};
-
-/**
* Zoom to something containing [minDate, maxDate] values. Don't confuse this
* method with doZoomX which accepts pixel coordinates. This function redraws
* the graph.
* @private
*/
Dygraph.prototype.doZoomXDates_ = function(minDate, maxDate) {
- // TODO(danvk): when yAxisRange is null (i.e. "fit to data", the animation
- // can produce strange effects. Rather than the y-axis transitioning slowly
+ // TODO(danvk): when xAxisRange is null (i.e. "fit to data", the animation
+ // can produce strange effects. Rather than the x-axis transitioning slowly
// between values, it can jerk around.)
var old_window = this.xAxisRange();
var new_window = [minDate, maxDate];
};
/**
+ * Transition function to use in animations. Returns values between 0.0
+ * (totally old values) and 1.0 (totally new values) for each frame.
+ * @private
+ */
+Dygraph.zoomAnimationFunction = function(frame, numFrames) {
+ var k = 1.5;
+ return (1.0 - Math.pow(k, -frame)) / (1.0 - Math.pow(k, -numFrames));
+};
+
+/**
* Reset the zoom to the original view coordinates. This is the same as
* double-clicking on the graph.
*/
ctx.lineWidth = this.getNumericOption('strokeWidth', pt.name);
ctx.strokeStyle = color;
ctx.fillStyle = color;
- callback(this.g, pt.name, ctx, canvasx, pt.canvasy,
+ callback(this, pt.name, ctx, canvasx, pt.canvasy,
color, circleSize, pt.idx);
}
ctx.restore();
this.lastRow_ = row;
for (var setIdx = 0; setIdx < this.layout_.points.length; ++setIdx) {
var points = this.layout_.points[setIdx];
+ // Check if the point at the appropriate index is the point we're looking
+ // for. If it is, just use it, otherwise search the array for a point
+ // in the proper place.
var setRow = row - this.getLeftBoundary_(setIdx);
- if (setRow < points.length) {
+ if (setRow < points.length && points[setRow].idx == row) {
var point = points[setRow];
if (point.yval !== null) this.selPoints_.push(point);
+ } else {
+ for (var pointIdx = 0; pointIdx < points.length; ++pointIdx) {
+ var point = points[pointIdx];
+ if (point.idx == row) {
+ if (point.yval !== null) {
+ this.selPoints_.push(point);
+ }
+ break;
+ }
+ }
}
}
} else {
var actualYval = point.yval;
if (isNaN(actualYval) || actualYval === null) {
- // Interpolate/extend for stacking purposes if possible.
- updateNextPoint(i);
- if (prevPoint && nextPoint && fillMethod != 'none') {
- // Use linear interpolation between prevPoint and nextPoint.
- actualYval = prevPoint.yval + (nextPoint.yval - prevPoint.yval) *
- ((xval - prevPoint.xval) / (nextPoint.xval - prevPoint.xval));
- } else if (prevPoint && fillMethod == 'all') {
- actualYval = prevPoint.yval;
- } else if (nextPoint && fillMethod == 'all') {
- actualYval = nextPoint.yval;
- } else {
+ if(fillMethod == 'none') {
actualYval = 0;
+ } else {
+ // Interpolate/extend for stacking purposes if possible.
+ updateNextPoint(i);
+ if (prevPoint && nextPoint && fillMethod != 'none') {
+ // Use linear interpolation between prevPoint and nextPoint.
+ actualYval = prevPoint.yval + (nextPoint.yval - prevPoint.yval) *
+ ((xval - prevPoint.xval) / (nextPoint.xval - prevPoint.xval));
+ } else if (prevPoint && fillMethod == 'all') {
+ actualYval = prevPoint.yval;
+ } else if (nextPoint && fillMethod == 'all') {
+ actualYval = nextPoint.yval;
+ } else {
+ actualYval = 0;
+ }
}
} else {
prevPoint = point;
var extremes = {}; // series name -> [low, high]
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.
seriesName, boundaryIds[seriesIdx-1][0]);
if (this.getBooleanOption("stackedGraph")) {
- Dygraph.stackPoints_(seriesPoints, cumulativeYval, seriesExtremes,
+ axisIdx = this.attributes_.axisForSeries(seriesName);
+ if (cumulativeYval[axisIdx] === undefined) {
+ cumulativeYval[axisIdx] = [];
+ }
+ Dygraph.stackPoints_(seriesPoints, cumulativeYval[axisIdx], seriesExtremes,
this.getBooleanOption("stackedGraphNaNFill"));
}
Dygraph.prototype.setXAxisOptions_ = function(isDate) {
if (isDate) {
this.attrs_.xValueParser = Dygraph.dateParser;
- this.attrs_.axes.x.valueFormatter = Dygraph.dateString_;
+ this.attrs_.axes.x.valueFormatter = Dygraph.dateValueFormatter;
this.attrs_.axes.x.ticker = Dygraph.dateTicker;
- this.attrs_.axes.x.axisLabelFormatter = Dygraph.dateAxisFormatter;
+ this.attrs_.axes.x.axisLabelFormatter = Dygraph.dateAxisLabelFormatter;
} else {
/** @private (shut up, jsdoc!) */
this.attrs_.xValueParser = function(x) { return parseFloat(x); };
// TODO(danvk): use Dygraph.numberValueFormatter here?
/** @private (shut up, jsdoc!) */
this.attrs_.axes.x.valueFormatter = function(x) { return x; };
- this.attrs_.axes.x.ticker = Dygraph.numericLinearTicks;
+ this.attrs_.axes.x.ticker = Dygraph.numericTicks;
this.attrs_.axes.x.axisLabelFormatter = this.attrs_.axes.x.valueFormatter;
}
};
if (Dygraph.isDateLike(data[0][0])) {
// Some intelligent defaults for a date x-axis.
- this.attrs_.axes.x.valueFormatter = Dygraph.dateString_;
+ this.attrs_.axes.x.valueFormatter = Dygraph.dateValueFormatter;
this.attrs_.axes.x.ticker = Dygraph.dateTicker;
- this.attrs_.axes.x.axisLabelFormatter = Dygraph.dateAxisFormatter;
+ this.attrs_.axes.x.axisLabelFormatter = Dygraph.dateAxisLabelFormatter;
// Assume they're all dates.
var parsedData = Dygraph.clone(data);
// Some intelligent defaults for a numeric x-axis.
/** @private (shut up, jsdoc!) */
this.attrs_.axes.x.valueFormatter = function(x) { return x; };
- this.attrs_.axes.x.ticker = Dygraph.numericLinearTicks;
+ this.attrs_.axes.x.ticker = Dygraph.numericTicks;
this.attrs_.axes.x.axisLabelFormatter = Dygraph.numberAxisLabelFormatter;
return data;
}
var indepType = data.getColumnType(0);
if (indepType == 'date' || indepType == 'datetime') {
this.attrs_.xValueParser = Dygraph.dateParser;
- this.attrs_.axes.x.valueFormatter = Dygraph.dateString_;
+ this.attrs_.axes.x.valueFormatter = Dygraph.dateValueFormatter;
this.attrs_.axes.x.ticker = Dygraph.dateTicker;
- this.attrs_.axes.x.axisLabelFormatter = Dygraph.dateAxisFormatter;
+ this.attrs_.axes.x.axisLabelFormatter = Dygraph.dateAxisLabelFormatter;
} else if (indepType == 'number') {
this.attrs_.xValueParser = function(x) { return parseFloat(x); };
this.attrs_.axes.x.valueFormatter = function(x) { return x; };
- this.attrs_.axes.x.ticker = Dygraph.numericLinearTicks;
+ this.attrs_.axes.x.ticker = Dygraph.numericTicks;
this.attrs_.axes.x.axisLabelFormatter = this.attrs_.axes.x.valueFormatter;
} else {
Dygraph.error("only 'date', 'datetime' and 'number' types are supported " +
projects / dygraphs.git / blobdiff