todos + improved timeline widget

-> numbers_widget: count down

-> timeline+numbers_widget: colored labels for series

-> timeline-widget: moving avg option

-> timeline-widget: tick button active states

-> timeline-widget: render with add. offset / cmp. w/yesterday

-> timeline-widget: synchronize ticks

-> realtime gauge (medium, fast, insane) (5,10,15min avg)

-> punchcard gauge

-> active users gauge

-> value correlation / scatter plot (2d) gauge

etc.

-> numbers_widget: count down

-> timeline+numbers_widget: colored labels for series

# TODO

#  -> timeline-widget: tick button active states

# -> port numbers style from scala-experiment

#  -> gauge api: render with add. offset

# -> toplist-widget: tick+range selector

# -> toplist-widget: display trends

#  -> timeline-widget: compare with yesterday

#  -> numeric-gauge view: add numbers

#  -> store per-session-data

#  -> callback on session-flush

#  -> backport sidebar css from 0.7?

FnordMetric.widgets._numbersWidget = function(){

  var max_per_row = 6;

  var max_per_row = 8;

  var opts;

  function render(_opts){

    var widget_uid = FnordMetric.util.getNextWidgetUID();

    var width, height, canvas, series, opts, xtick;

    var xticks = 30;

    var xticks = 100;

    var running_request = false;

    var series_paths = {};

      opts = _opts;

      //if(!silent){ $(opts.elem).css('opacity', 0.5); }

      if(opts.xticks){ xticks = opts.xticks; }

      if(!opts.draw_points){ opts.draw_points = true; }

      if(!opts.draw_path){ opts.draw_path = true; }

      if(!opts.draw_ygrid){ opts.draw_ygrid = true; }

    function updateChart(){

      var _ticks = [];

      var _miss = [];

      var _max = [];

      var _rndr = [];

      for(sind in opts.series){

        var _last = opts.start_timestamp + opts.tick;

          _last += _delta;

        }

        drawSeries(opts.series[sind], _sdata);

        _max.push(Math.max.apply(Math, _sdata));       

        _rndr.push([opts.series[sind], _sdata]);

      }

      _max = Math.max.apply(Math, _max)*1.1;

      if(_max == 0){ _max = 1; }

      for(rind in _rndr){

        drawSeries(_rndr[rind][0], _rndr[rind][1], _max);

      }

      if(_miss.length > 0)

        series_values[_series] = {};

      }

      updateRange(true);

      updateRange();

      updateChart();

    }

    function drawSeries(series, series_data){

    function drawSeries(series, series_data, _max){

        //var path_string = "M0,"+height;

        var path_string = "";

        var _max;

        var _color = '0066CC';

        if (series_paths[series]){

    function moveRange(direction){

      v = opts.tick*direction*8;

      if(((opts.end_timestamp + v)*1000) < new Date().getTime()){

        opts.start_timestamp += v;

        opts.end_timestamp += v;  

      }

      updateChart();

    }