huginn/app/assets/javascripts/graphing.js

//= require d3
//= require rickshaw
//= require_self

// This is not included in the core application.js bundle.

window.renderGraph = function ($chart, data, peaks, name) {
  const graph = new Rickshaw.Graph({
    element: $chart.find(".chart").get(0),
    width: 700,
    height: 240,
    series: [
      {
        data,
        name,
        color: "steelblue",
      },
    ],
  });

  const x_axis = new Rickshaw.Graph.Axis.Time({ graph });

  const annotator = new Rickshaw.Graph.Annotate({
    graph,
    element: $chart.find(".timeline").get(0),
  });
  $.each(peaks, function () {
    return annotator.add(this, "Peak");
  });

  const y_axis = new Rickshaw.Graph.Axis.Y({
    graph,
    orientation: "left",
    tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
    element: $chart.find(".y-axis").get(0),
  });

  graph.onUpdate(function () {
    const mean = d3.mean(data, (i) => i.y);
    const standard_deviation = Math.sqrt(
      d3.mean(data.map((i) => Math.pow(i.y - mean, 2)))
    );
    const minX = d3.min(data, (i) => i.x);
    const maxX = d3.max(data, (i) => i.x);
    graph.vis
      .append("svg:line")
      .attr("x1", graph.x(minX))
      .attr("x2", graph.x(maxX))
      .attr("y1", graph.y(mean))
      .attr("y2", graph.y(mean))
      .attr("class", "summary-statistic mean");
    graph.vis
      .append("svg:line")
      .attr("x1", graph.x(minX))
      .attr("x2", graph.x(maxX))
      .attr("y1", graph.y(mean + standard_deviation))
      .attr("y2", graph.y(mean + standard_deviation))
      .attr("class", "summary-statistic one-std");
    graph.vis
      .append("svg:line")
      .attr("x1", graph.x(minX))
      .attr("x2", graph.x(maxX))
      .attr("y1", graph.y(mean + 2 * standard_deviation))
      .attr("y2", graph.y(mean + 2 * standard_deviation))
      .attr("class", "summary-statistic two-std");
    return graph.vis
      .append("svg:line")
      .attr("x1", graph.x(minX))
      .attr("x2", graph.x(maxX))
      .attr("y1", graph.y(mean + 3 * standard_deviation))
      .attr("y2", graph.y(mean + 3 * standard_deviation))
      .attr("class", "summary-statistic three-std");
  });

  return graph.render();
};