graphite.js

(function($) {
  var elCount = {};
  var finishedCount = {};

  $.fn.graphite = function(options) {
    for(var i=0; i < $(this).length; i++){
      $this = $(this[i]);
      elCount[$this.attr('id')] = 0;
      finishedCount[$this.attr('id')] = 0;
      params = $.fn.graphite.initParams($this, options);
			$this.data('data-graphite', { values: (new Array()), serie: (new Array()) });
      if($this.attr('class') == 'graphite_data_graph'){
        $.fn.graphite.getGraphData($this, params);
      } else {
        $.fn.graphite.getGaugeData($this, params);
      }
    }
  };

  $.fn.graphite.initParams = function(obj, options) {
    obj.opts = $.extend({}, $.fn.graphite.defaults, options);
    var target = obj.attr('data-target');
    var periodFrom = $this.attr('data-period-from') || '-7days';
    var periodTo = $this.attr('data-period-to') || 'today';
    var params = '?target=' + target + '&from=' + periodFrom + '&until=' + periodTo + '&';
    elCount[obj.attr('id')] += 1;

    for(key in obj.opts) {
      value = obj.opts[key];
      params = params + "" + key + "=" + value + "&";
    }
    return params;
  };

  $.fn.graphite.getGraphData = function(obj, params) {
    var url = "http://" + graphite_server + "/render/" + params + "jsonp=?";
    var response = $.getJSON(url, function(data){
	 		for(var i = 0; i < data.length; i++) {
				$.fn.graphite.formatGraphData(obj, data[i],  data.length);
			}
		});
    return response;
  };

  $.fn.graphite.getGaugeData = function(obj, params) {
    var url = "http://" + graphite_server + "/render/" + params + "jsonp=?";
    var response = $.getJSON(url, function(data){ $.fn.graphite.formatGaugeData(obj, data[0].datapoints); });
    return response;
  };

  $.fn.graphite.formatGraphData = function(obj, params, fullSize) {
    for(var i = 0; i < params.datapoints.length; i++){
      if(params.datapoints[i][0] == null){ params.datapoints[i][0] = 0.0; }
    }
    return $.fn.graphite.renderGraphData(obj, params, fullSize);
  };

  $.fn.graphite.formatGaugeData = function(obj, params) {
    if(obj.attr('class') == 'graphite_data_number_range'){
      var first = params[0][0] || 0;
      var last = params[params.length - 2][0] || 0;
      var value = last - first < 0 ? 0 : last - first;
    } else {
      var value = params[params.length - 2][0];
    }
    return $.fn.graphite.renderGaugeData(obj, value);
  };

  $.fn.graphite.renderGraphData = function(obj, params, fullSize) {
		var datapoint = $(obj).data('data-graphite').values;
	 	var seriesName = $(obj).data('data-graphite').serie;
		datapoint.push(params.datapoints);
		seriesName.push(params.target);
		if (fullSize == datapoint.length){
			finishedCount[obj.attr('id')] += 1;
			return $.fn.graphite.sendGraphToElement(obj);
		}
  };

  $.fn.graphite.renderGaugeData = function(obj, value) {
    $(obj).attr('data-graphite', value);
    finishedCount[obj.attr('id')] += 1;
    return $.fn.graphite.sendGaugeToElement(obj);
  };

  $.fn.graphite.sendGraphToElement = function(obj) {
   	 if(elCount[obj.attr('id')] == finishedCount[obj.attr('id')]){
	      $(obj).trigger($.Event('finished'));
	    }
  };

  $.fn.graphite.sendGaugeToElement = function(obj) {
    $(obj).trigger($.Event('finished'));
  };

  return $.fn.graphite.defaults = {
    format: 'json'
  };

})(jQuery);