How to use the dygraphs function in dygraphs

To help you get started, we’ve selected a few dygraphs examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github kresusapp / kresus / client / components / charts / balance-chart.js View on Github external
}
    }

    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'
                    });
                }
            }
        },
github openpowerquality / opq / view / app / imports / ui / components / WaveformViewer.jsx View on Github external
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 }));
    });
  }
github openpowerquality / opq / view / app / imports / ui / components / eventWaveformChart / eventWaveformChart.js View on Github external
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);
github NASA-AMMOS / AIT-GUI / ait / gui / static / js / ait / gui / Plot.js View on Github external
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)
    }
github freenas / webui / src / app / pages / reportsdashboard / components / lineChart / lineChart.component.ts View on Github external
let converted = this.formatLabelValue(numero, this.inferUnits(this.labelY));
          if(converted.prefix){
            this.yLabelPrefix = converted.prefix;
          } else {
            this.yLabelPrefix = '';
          }
         } else {
          console.warn("axes not found");
         }
       }
     }

     if(option == 'update'){
       this.chart.updateOptions(options);
     } else {
       this.chart = new Dygraph(this.el.nativeElement, data, options);
     }

  }
github keplr-io / hera / client / src / components / Model / index.js View on Github external
this.graphs = this.props.metrics.reduce((graphsMap, metricName) => {
            graphsMap[metricName] = new Dygraph(
                $(this.refs.container).find('.graph-' + metricName)[0],
                this.props.model.metricTimeseries[metricName],
                {
                    drawPoints: true,
                    valueRange: [0, 5],
                    labels: ['batch', metricName]
                }
            );
            return graphsMap;
        }, {});
    }