jquery.epochchart.js

// Generated by CoffeeScript 1.3.3
(function() {
  var $, defaults, tallestPoint;

  $ = jQuery;

  tallestPoint = function(lines, x) {
    var computedValues, ret;
    computedValues = $.map(lines, function(line) {
      var prevPoint, ret;
      prevPoint = null;
      ret = null;
      $.map(line['data'], function(datum, i) {
        var slope, xdiff;
        if (x >= datum['x']) {
          prevPoint = datum;
          return;
        }
        if (x < datum['x']) {
          if (prevPoint === null) {
            ret = datum['y'];
            return;
          }
          xdiff = x - prevPoint['x'];
          slope = (datum['y'] - prevPoint['y']) / (datum['x'] - prevPoint['x']);
          ret = prevPoint['y'] + slope * (x - prevPoint['x']);
        }
      });
      return ret;
    });
    ret = null;
    $.each(computedValues, function(i, v) {
      if ((v != null) && (!(ret != null) || ret < v)) {
        return ret = v;
      }
    });
    return ret;
  };

  defaults = {
    marker: 'url(marker.png)',
    dateFormat: '%b %e',
    tooltip: {
      x: 30,
      y: 10
    }
  };

  $.fn.epochchart = function(lines, markers, opts) {
    var chart, defaultHighchartsOpts, highchartsOpts, markerData, markerLine, maxY;
    if (opts == null) {
      opts = {};
    }
    opts = $.extend(true, {}, defaults, opts);
    if (Object.prototype.toString.call(lines) !== '[object Array]') {
      lines = [lines];
    }
    defaultHighchartsOpts = {
      title: {
        text: null
      },
      xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
          day: opts.dateFormat,
          year: '%b'
        }
      },
      yAxis: {
        title: {
          text: null
        },
        plotLines: [
          {
            value: 0,
            width: 1,
            color: '#808080'
          }
        ]
      },
      tooltip: {
        formatter: function() {
          var date, s;
          date = Highcharts.dateFormat(opts.dateFormat, this.x);
          s = '<b>' + date + '</b><br />';
          if (this.point.name != null) {
            s += this.point.name;
          } else {
            s += "" + this.series.name + ": " + this.y;
          }
          return s;
        },
        positioner: function() {
          return {
            x: opts.tooltip.x,
            y: opts.tooltip.y
          };
        }
      },
      plotOptions: {
        scatter: {
          marker: {
            symbol: opts['marker'],
            states: {
              hover: {
                enabled: true,
                lineColor: 'rgb(100,100,100)'
              }
            }
          },
          states: {
            hover: {
              marker: {
                enabled: false
              }
            }
          }
        },
        spline: {
          marker: {
            enabled: false
          }
        }
      },
      legend: {
        enabled: false
      }
    };
    highchartsOpts = $.extend(true, defaultHighchartsOpts, opts['highchartsOpts']);
    maxY = null;
    lines = $.map(lines, function(line) {
      var lineData;
      lineData = $.map(line.data, function(data) {
        if (maxY === null || data[1] > maxY) {
          maxY = data[1];
        }
        return {
          x: new Date(data[0]),
          y: data[1]
        };
      });
      return {
        type: 'spline',
        name: line.name,
        data: lineData
      };
    });
    markerData = $.map(markers, function(marker) {
      return {
        x: new Date(marker[0]),
        y: tallestPoint(lines, marker[0]),
        name: marker[1]
      };
    });
    markerLine = {
      type: 'scatter',
      name: 'Markers',
      data: markerData
    };
    lines.push(markerLine);
    chart = $.extend(true, highchartsOpts, {
      series: lines
    });
    return $(this).highcharts(chart);
  };

}).call(this);