- turn on background fading by default, remove extra animation option.
- clarify docstrings for closest-point finding methods.
strokeBorderWidth: 2,
highlightCircleSize: widthNormal * 2,
highlightSeriesBackgroundFade: 0.7,
strokeBorderWidth: 2,
highlightCircleSize: widthNormal * 2,
highlightSeriesBackgroundFade: 0.7,
- highlightSeriesAnimate: true,
highlightSeriesOpts: {
strokeWidth: widthHighlighted,
highlightSeriesOpts: {
strokeWidth: widthHighlighted,
"description": "When set, the options from this object are applied to the timeseries closest to the mouse pointer for interactive highlighting. See also 'highlightCallback'. Example: highlightSeriesOpts: { strokeWidth: 3 }."
},
"highlightSeriesBackgroundFade": {
"description": "When set, the options from this object are applied to the timeseries closest to the mouse pointer for interactive highlighting. See also 'highlightCallback'. Example: highlightSeriesOpts: { strokeWidth: 3 }."
},
"highlightSeriesBackgroundFade": {
"labels": ["Interactive Elements"],
"labels": ["Interactive Elements"],
- "type": "number",
- "description": "When nonzero, dim the background while highlighting series. 0=fully visible, 1=hidden"
- },
- "highlightSeriesAnimate": {
- "default": "false",
- "labels": ["Interactive Elements"],
- "type": "boolean",
- "description": "Animate the background dimming for nonzero highlightSeriesBackgroundFade."
+ "type": "float",
+ "description": "When nonzero, dim the background while highlighting series. 0=fully visible background, 1=hiddden background (show highlighted series only)."
},
"includeZero": {
"default": "false",
},
"includeZero": {
"default": "false",
Dygraph.DEFAULT_ATTRS = {
highlightCircleSize: 3,
highlightSeriesOpts: null,
Dygraph.DEFAULT_ATTRS = {
highlightCircleSize: 3,
highlightSeriesOpts: null,
- highlightSeriesBackgroundFade: 0,
- highlightSeriesAnimated: false,
+ highlightSeriesBackgroundFade: 0.5,
labelsDivWidth: 250,
labelsDivStyles: {
labelsDivWidth: 250,
labelsDivStyles: {
- * Given canvas X,Y coordinates, find the closest point
+ * Given canvas X,Y coordinates, find the closest point.
+ *
+ * This finds the individual data point across all visible series
+ * that's closest to the supplied DOM coordinates using the standard
+ * Euclidean X,Y distance.
+ *
* @param {Number} domX graph-relative DOM X coordinate
* @param {Number} domY graph-relative DOM Y coordinate
* Returns: {row, seriesName, point}
* @param {Number} domX graph-relative DOM X coordinate
* @param {Number} domY graph-relative DOM Y coordinate
* Returns: {row, seriesName, point}
/**
* Given canvas X,Y coordinates, find the touched area in a stacked graph.
/**
* Given canvas X,Y coordinates, find the touched area in a stacked graph.
+ *
+ * This first finds the X data point closest to the supplied DOM X coordinate,
+ * then finds the series which puts the Y coordinate on top of its filled area,
+ * using linear interpolation between adjacent point pairs.
+ *
* @param {Number} domX graph-relative DOM X coordinate
* @param {Number} domY graph-relative DOM Y coordinate
* Returns: {row, seriesName, point}
* @param {Number} domX graph-relative DOM X coordinate
* @param {Number} domY graph-relative DOM Y coordinate
* Returns: {row, seriesName, point}
ctx.clearRect(0, 0, this.width_, this.height_);
var alpha = this.attr_('highlightSeriesBackgroundFade');
if (alpha) {
ctx.clearRect(0, 0, this.width_, this.height_);
var alpha = this.attr_('highlightSeriesBackgroundFade');
if (alpha) {
- if (this.attr_('highlightSeriesAnimate')) {
+ // Activating background fade includes an animation effect for a gradual
+ // fade. TODO(klausw): make this independently configurable if it causes
+ // issues? Use a shared preference to control animations?
+ var animateBackgroundFade = true;
+ if (animateBackgroundFade) {
if (opt_animFraction === undefined) {
// start a new animation
this.animateSelection_(1);
if (opt_animFraction === undefined) {
// start a new animation
this.animateSelection_(1);
{
width: 480,
height: 320,
{
width: 480,
height: 320,
- stackedGraph: isStacked,
+ stackedGraph: isStacked,
+
highlightCircleSize: 2,
strokeWidth: 1,
strokeBorderWidth: isStacked ? null : 1,
highlightCircleSize: 2,
strokeWidth: 1,
strokeBorderWidth: isStacked ? null : 1,
- highlightSeriesBackgroundFade: 0.5,
- highlightSeriesAnimate: true,
highlightSeriesOpts: {
strokeWidth: 3,
strokeBorderWidth: 1,
highlightSeriesOpts: {
strokeWidth: 3,
strokeBorderWidth: 1,