How to use dygraphs - 10 common examples

},
      true /* no need to redraw */
    )
  }
}

function isValidPoint(p, opt_allowNaNY) {
  if (!p) return false // null or undefined object
  if (p.yval === null) return false // missing point
  if (p.x === null || p.x === undefined) return false
  if (p.y === null || p.y === undefined) return false
  if (isNaN(p.x) || (!opt_allowNaNY && isNaN(p.y))) return false
  return true
}

Dygraph.prototype.findClosestPoint = function(domX, domY) {
  if (Dygraph.VERSION !== '2.0.0') {
    console.error(
      `Dygraph version changed to ${Dygraph.VERSION} - re-copy findClosestPoint`
    )
  }
  var minXDist = Infinity
  var minYDist = Infinity
  var xdist, ydist, dx, dy, point, closestPoint, closestSeries, closestRow
  for (var setIdx = this.layout_.points.length - 1; setIdx >= 0; --setIdx) {
    var points = this.layout_.points[setIdx]
    for (var i = 0; i < points.length; ++i) {
      point = points[i]
      if (!isValidPoint(point)) continue

      dx = point.canvasx - domX
      dy = point.canvasy - domY

if (p.yval === null) {
    return false
  } // missing point
  if (p.x === null || p.x === undefined) {
    return false
  }
  if (p.y === null || p.y === undefined) {
    return false
  }
  if (isNaN(p.x) || (!opt_allowNaNY && isNaN(p.y))) {
    return false
  }
  return true
}

Dygraph.prototype.findClosestPoint = function(domX, domY) {
  if (Dygraph.VERSION !== '2.0.0') {
    console.error(
      `Dygraph version changed to ${Dygraph.VERSION} - re-copy findClosestPoint`
    )
  }
  let minXDist = Infinity
  let minYDist = Infinity
  let xdist, ydist, dx, dy, point, closestPoint, closestSeries, closestRow
  for (let setIdx = this.layout_.points.length - 1; setIdx >= 0; --setIdx) {
    const points = this.layout_.points[setIdx]
    for (let i = 0; i < points.length; ++i) {
      point = points[i]
      if (!isValidPoint(point, null)) {
        continue
      }

}
    }

    let balance = account.initialBalance;
    let csv = 'Date,Balance\n';
    for (let [date, amount] of opmap) {
        balance += amount;
        csv += `${date},${round2(balance)}\n`;
    }

    /* eslint-disable no-new */

    // Create the chart
    let chartsColors = getChartsDefaultColors(theme);

    return new Dygraph(document.getElementById(chartId), csv, {
        color: chartsColors.LINES,

        axisLineColor: chartsColors.AXIS,

        axes: {
            x: {
                axisLabelFormatter: date => {
                    // Undefined means the default locale
                    let defaultLocale;
                    return date.toLocaleDateString(defaultLocale, {
                        year: '2-digit',
                        month: 'short'
                    });
                }
            }
        },

Meteor.defer(() => {
      // Note: There's no real need to store the Dygraph instance itself. It's simpler to allow render() to create a new
      // instance each time the graph visibility is set to true.
      const dygraph = new Dygraph(dyDomElement, dyPlotPoints, dyOptions);
      dygraph.ready(() => this.setState({ isLoading: false }));
    });
  }

1: 152.1,
        3: 154.20,
        4: 146.46,
      };

      const calibConstant = boxCalibrationConstants[eventData.box_id] || 1;

      const dyPlotPoints = eventData.waveform.map((val, index) => {
        const timestamp = eventData.event_start + (index * (1.0 / 12.0));
        return [timestamp, val / calibConstant];
      });

      const ctx = template.$('.dygraphEventWaveform').get(0); // Dygraphs requires the raw DOM element.

      // Dygraphs
      template.graph = new Dygraph(ctx, dyPlotPoints, {
        labels: ['Timestamp', 'Voltage'],
        axes: {
          x: {
            valueFormatter: (millis, opts, seriesName, dygraph, row, col) => { // eslint-disable-line no-unused-vars
              // We must separately calculate the microseconds and concatenate it to the date string.
              const dateString = Moment(millis).format('[[]MM-DD-YYYY[]] HH:mm:ss.SSS').toString()
                  + ((row * (1.0 / 12.0)) % 1).toFixed(3).substring(2);
              return dateString;
            },
            axisLabelFormatter: (timestamp) => Moment(timestamp).format('HH:mm:ss.SSS'),
          },
        },
      });

      // Sync Graph
      Template.currentData().dygraphSync(template.graph);

createChart (vnode, options) {
        let startarray = [ ]
        this._plot._options.labels.forEach( (name) => {
            startarray.push(0)
        })

        // Dygraphs is being initialized off of a nested div within the
        // ait-plot tag so that displaying the legend in an external
        // div works as expected. If the external div is nested within the
        // same tag that Dygraph is initialized on then functionality breaks.
        return new Dygraph(vnode.dom.children[0], [ startarray ], options)
    }

// move chart back to last valid display position from previous viewing?
    if ('viewpoint' in metric && metric.viewpoint) {
      this._chartRange = [metric.viewpoint, metric.viewpoint + rangeWidth];
    }

    // init, render, and draw chart!
    options.labelsUTC = true;
    options.dateWindow = this._chartRange;  // update viewport of range selector
    this._previousDataSize = data.length;
    this._dygraph = new CustomDygraph(element, data, options,
                                      this.props.yScaleCalculate);

    // after: track chart viewport position changes
    rangeEl = element.getElementsByClassName(RANGE_SELECTOR_CLASS)[0];
    Dygraph.addEvent(rangeEl, 'mousedown', this._handleMouseDown.bind(this));
    Dygraph.addEvent(element, 'mouseup', this._handleMouseUp.bind(this));
  }

// move chart back to last valid display position from previous viewing?
    if ('viewpoint' in metric && metric.viewpoint) {
      this._chartRange = [metric.viewpoint, metric.viewpoint + rangeWidth];
    }

    // init, render, and draw chart!
    options.labelsUTC = true;
    options.dateWindow = this._chartRange;  // update viewport of range selector
    this._previousDataSize = data.length;
    this._dygraph = new CustomDygraph(element, data, options,
                                      this.props.yScaleCalculate);

    // after: track chart viewport position changes
    rangeEl = element.getElementsByClassName(RANGE_SELECTOR_CLASS)[0];
    Dygraph.addEvent(rangeEl, 'mousedown', this._handleMouseDown.bind(this));
    Dygraph.addEvent(element, 'mouseup', this._handleMouseUp.bind(this));
  }

// FOR A PARTICULAR PURPOSE. See the GNU Affero Public License for more details.
//
// You should have received a copy of the GNU Affero Public License along with
// this program. If not, see http://www.gnu.org/licenses.
//
// http://numenta.org/licenses/

import Dygraph from 'dygraphs';


/**
 * Override default pre-draw of Dygraphs RangeSelector background, so we can
 *  customize the styling (remove RangeSelector outline border).
 * @see node_modules/dygraphs/plugins/range-selector.js
 */
Dygraph.Plugins.RangeSelector.prototype.drawStaticLayer_ = function () {
  let margin = 0.5;
  let ctx = this.bgcanvas_ctx_;
  ctx.clearRect(0, 0, this.canvasRect_.w, this.canvasRect_.h);

  try {
    this.drawMiniPlot_();
  } catch (error) {
    throw new Error(error);
  }

  this.bgcanvas_ctx_.lineWidth = 1;
  ctx.strokeStyle = '#fff';
  ctx.beginPath();
  ctx.moveTo(margin, margin);
  ctx.lineTo(margin, this.canvasRect_.h-margin);
  ctx.lineTo(this.canvasRect_.w-margin, this.canvasRect_.h-margin);

*
 * @param {Element} element - param for Dygraph constructor
 * @param {Array} data - param for Dygraph constructor
 * @param {Object} options - param for Dygraph constructor
 * @param {Function} yAxisRangeCalculate - takes a dygraph
 *                                         returns a [min, max] y axis range
 */
function CustomDygraph(element, data, options, yAxisRangeCalculate) {
  // This code uses prototype syntax rather than class syntax because it needs
  // to set `this.yAxisRangeCalculate_` before calling the Dygraph constructor,
  // which isn't possible with class syntax.
  this.yAxisRangeCalculate_ = yAxisRangeCalculate;
  Dygraph.call(this, element, data, options);
}

CustomDygraph.prototype = Object.create(Dygraph.prototype);
CustomDygraph.prototype.drawGraph_ = function () {
  let yExtentAdjusted = this.yAxisRangeCalculate_(this);

  // Change it directly. Using `updateOptions` won't work. If it causes a
  // redraw, there's a stack overflow. With blockRedraw=true, it doesn't update
  // the axes. Avoid using a valueRange in the options if you're using a
  // CustomDygraph.
  this.axes_[0].valueRange = yExtentAdjusted;
  this.axes_[0].computedValueRange = yExtentAdjusted;
  this.axes_[0].extremeRange = yExtentAdjusted.map(
    (v) => v - yExtentAdjusted[0]
  );

  Dygraph.prototype.drawGraph_.call(this);
};