[Summary view] [Print] [Text view]

   1  /**
   2   * @provides javelin-behavior-line-chart
   3   * @requires javelin-behavior
   4   *           javelin-dom
   5   *           javelin-vector
   6   */
   7  
   8  JX.behavior('line-chart', function(config) {
   9  
  10    var h = JX.$(config.hardpoint);
  11    var p = JX.$V(h);
  12    var d = JX.Vector.getDim(h);
  13    var mx = 60;
  14    var my = 30;
  15  
  16    var r = Raphael(p.x, p.y, d.x, d.y);
  17  
  18    var l = r.linechart(
  19      mx, my,
  20      d.x - (2 * mx), d.y - (2 * my),
  21      config.x,
  22      config.y,
  23      {
  24        nostroke: false,
  25        axis: '0 0 1 1',
  26        shade: true,
  27        gutter: 1,
  28        colors: config.colors || ['#d06']
  29      });
  30  
  31    function format(value, type) {
  32      switch (type) {
  33        case 'epoch':
  34          return new Date(parseInt(value, 10) * 1000).toLocaleDateString();
  35        case 'int':
  36          return parseInt(value, 10);
  37        default:
  38          return value;
  39      }
  40    }
  41  
  42    // Format the X axis.
  43  
  44    var n = 2;
  45    var ii = 0;
  46    var text = l.axis[0].text.items;
  47    for (var k in text) {
  48      if (ii++ % n) {
  49        text[k].attr({text: ''});
  50      } else {
  51        var cur = text[k].attr('text');
  52        str = format(cur, config.xformat);
  53        text[k].attr({text: str});
  54      }
  55    }
  56  
  57    // Show values on hover.
  58  
  59    l.hoverColumn(function() {
  60      this.tags = r.set();
  61      for (var yy = 0; yy < config.y.length; yy++) {
  62        var yvalue = 0;
  63        for (var ii = 0; ii < config.x[0].length; ii++) {
  64          if (config.x[0][ii] > this.axis) {
  65            break;
  66          }
  67          yvalue = format(config.y[yy][ii], config.yformat);
  68        }
  69  
  70        var xvalue = format(this.axis, config.xformat);
  71  
  72        var tag = r.tag(
  73          this.x,
  74          this.y[yy],
  75          [xvalue, yvalue].join('\n'),
  76          180,
  77          24);
  78        tag
  79          .insertBefore(this)
  80          .attr([{fill : '#fff'}, {fill: '#000'}]);
  81  
  82        this.tags.push(tag);
  83      }
  84    }, function() {
  85      this.tags && this.tags.remove();
  86    });
  87  
  88  });