diff --git a/dashboards.js b/dashboards.js
index 9bf25c4..a675bfa 100644
--- a/dashboards.js
+++ b/dashboards.js
@@ -112,8 +112,9 @@ var dashboards =
         "alias": "proc mem prod",
         "targets": ["aliasByNode(derivative(servers.system.cpu.user),4)",  // targets array can include strings, 
                                                                            // functions or dictionaries
-                   {target: 'alias(derivative(servers.system.cpu.system,"system utilization")',
-                    alias: 'system utilization',                           // if you use a graphite alias, specify it here
+                   // an example of a target object
+                    {target: 'alias(derivative(servers.system.cpu.system,"system utilization")',
+                    alias: 'system utilization',                           // this alias *must* match the graphite alias.
                     color: '#f00'}],                                       // you can also specify a target color this way
                                                                            // (note that these values are ignored on the demo)
         // annotator can also be a dictionary of target and description.
@@ -136,6 +137,28 @@ var dashboards =
         "max": 150,  // you can specify max value for the y-axis
         "min": 20,   // and also min
       },
+      {
+        "alias": "System Load (Multi Renderer)",
+        // an example of a multi renderer. When renderer is set to multi
+        // each target can have its own renderer. E.g. to mix between a line and bar charts.
+        "renderer": 'multi',
+        "target": "aliasByNode(derivative(servers.system.cpu.*),4)",  // target can use any graphite-supported wildcards
+        "targets": [
+            {'target': 'aliasByNode(servers.server06.system.load.load,1)',
+             'color': '#A99', 'renderer': 'bar', 'alias': 'server06'},
+            {'target':
+             'alias(movingAverage(servers.server06.system.load.load,"-5min"),' +
+             '"Moving Average of 5 segments")', 'color': '#F00',
+             'alias': 'Moving Average of 5 segments',
+             'renderer': 'line'}
+        ],
+        "interpolation": "linear",
+        "description": "multi renderer (line and bars on the same chart)",
+        "annotator": {'target' : 'events.deployment',
+                      'description' : 'deploy'},
+        "max": 150,
+        "colspan": 3
+      },
     ]
   },
   { "name": "Setup",
diff --git a/js/giraffe.js b/js/giraffe.js
index fa1d1ba..aefffa2 100644
--- a/js/giraffe.js
+++ b/js/giraffe.js
@@ -1,4 +1,4 @@
-// Generated by CoffeeScript 1.3.3
+// Generated by CoffeeScript 1.7.1
 var auth, changeDashboard, createGraph, dashboard, dataPoll, default_graphite_url, default_period, description, generateDataURL, generateEventsURL, generateGraphiteTargets, getTargetColor, getTargetRenderer, graphScaffold, graphite_url, graphs, init, metrics, period, refresh, refreshSummary, refreshTimer, scheme, toggleCss, _avg, _formatBase1024KMGTP, _last, _max, _min, _sum,
   __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
 
@@ -339,44 +339,45 @@ Rickshaw.Graph.JSONP.Graphite = Rickshaw.Class.create(Rickshaw.Graph.JSONP, {
     return this.refreshGraph(period);
   },
   refreshGraph: function(period) {
-    var deferred,
-      _this = this;
+    var deferred;
     deferred = this.getAjaxData(period);
-    return deferred.done(function(result) {
-      var annotations, el, i, result_data, series, _i, _len;
-      if (result.length <= 0) {
-        return;
-      }
-      result_data = _.filter(result, function(el) {
-        var _ref;
-        return el.target !== ((_ref = _this.args.annotator_target) != null ? _ref.replace(/["']/g, '') : void 0);
-      });
-      result_data = _this.preProcess(result_data);
-      if (!_this.graph) {
-        _this.success(_this.parseGraphiteData(result_data, _this.args.null_as));
-      }
-      series = _this.parseGraphiteData(result_data, _this.args.null_as);
-      if (_this.args.annotator_target) {
-        annotations = _this.parseGraphiteData(_.filter(result, function(el) {
-          return el.target === _this.args.annotator_target.replace(/["']/g, '');
-        }), _this.args.null_as);
-      }
-      for (i = _i = 0, _len = series.length; _i < _len; i = ++_i) {
-        el = series[i];
-        _this.graph.series[i].data = el.data;
-        _this.addTotals(i);
-      }
-      _this.graph.renderer.unstack = _this.args.unstack;
-      _this.graph.render();
-      if (_this.args.events) {
-        deferred = _this.getEvents(period);
-        deferred.done(function(result) {
-          return _this.addEventAnnotations(result);
+    return deferred.done((function(_this) {
+      return function(result) {
+        var annotations, el, i, result_data, series, _i, _len;
+        if (result.length <= 0) {
+          return;
+        }
+        result_data = _.filter(result, function(el) {
+          var _ref;
+          return el.target !== ((_ref = _this.args.annotator_target) != null ? _ref.replace(/["']/g, '') : void 0);
         });
-      }
-      _this.addAnnotations(annotations, _this.args.annotator_description);
-      return _this.args.onRefresh(_this);
-    });
+        result_data = _this.preProcess(result_data);
+        if (!_this.graph) {
+          _this.success(_this.parseGraphiteData(result_data, _this.args.null_as));
+        }
+        series = _this.parseGraphiteData(result_data, _this.args.null_as);
+        if (_this.args.annotator_target) {
+          annotations = _this.parseGraphiteData(_.filter(result, function(el) {
+            return el.target === _this.args.annotator_target.replace(/["']/g, '');
+          }), _this.args.null_as);
+        }
+        for (i = _i = 0, _len = series.length; _i < _len; i = ++_i) {
+          el = series[i];
+          _this.graph.series[i].data = el.data;
+          _this.addTotals(i);
+        }
+        _this.graph.renderer.unstack = _this.args.unstack;
+        _this.graph.render();
+        if (_this.args.events) {
+          deferred = _this.getEvents(period);
+          deferred.done(function(result) {
+            return _this.addEventAnnotations(result);
+          });
+        }
+        _this.addAnnotations(annotations, _this.args.annotator_description);
+        return _this.args.onRefresh(_this);
+      };
+    })(this));
   },
   addTotals: function(i) {
     var avg, label, max, min, series_data, sum, totals;
@@ -497,20 +498,21 @@ Rickshaw.Graph.JSONP.Graphite = Rickshaw.Class.create(Rickshaw.Graph.JSONP, {
     }));
   },
   getEvents: function(period) {
-    var deferred,
-      _this = this;
+    var deferred;
     this.period = period;
     return deferred = $.ajax({
       dataType: 'json',
       url: generateEventsURL(this.args.events),
-      error: function(xhr, textStatus, errorThrown) {
-        if (textStatus === 'parsererror' && /was not called/.test(errorThrown.message)) {
-          window.json_fallback = true;
-          return _this.refreshGraph(period);
-        } else {
-          return console.log("error loading eventsURL: " + generateEventsURL(_this.args.events));
-        }
-      }
+      error: (function(_this) {
+        return function(xhr, textStatus, errorThrown) {
+          if (textStatus === 'parsererror' && /was not called/.test(errorThrown.message)) {
+            window.json_fallback = true;
+            return _this.refreshGraph(period);
+          } else {
+            return console.log("error loading eventsURL: " + generateEventsURL(_this.args.events));
+          }
+        };
+      })(this)
     });
   },
   getAjaxData: function(period) {
@@ -526,8 +528,7 @@ Rickshaw.Graph.JSONP.Graphite = Rickshaw.Class.create(Rickshaw.Graph.JSONP, {
 
 Rickshaw.Graph.Demo = Rickshaw.Class.create(Rickshaw.Graph.JSONP.Graphite, {
   success: function(data) {
-    var i, palette, _i,
-      _this = this;
+    var i, palette, _i;
     palette = new Rickshaw.Color.Palette({
       scheme: this.args.scheme
     });
@@ -550,38 +551,47 @@ Rickshaw.Graph.Demo = Rickshaw.Class.create(Rickshaw.Graph.JSONP.Graphite, {
         {
           color: palette.color(),
           data: this.seriesData[0],
-          name: 'Moscow'
+          name: 'Moscow',
+          renderer: 'line'
         }, {
           color: palette.color(),
           data: this.seriesData[1],
-          name: 'Shanghai'
+          name: 'Shanghai',
+          renderer: 'line'
         }, {
           color: palette.color(),
           data: this.seriesData[2],
-          name: 'Amsterdam'
+          name: 'Amsterdam',
+          renderer: 'bar'
         }, {
           color: palette.color(),
           data: this.seriesData[3],
-          name: 'Paris'
+          name: 'Paris',
+          renderer: 'line'
         }, {
           color: palette.color(),
           data: this.seriesData[4],
-          name: 'Tokyo'
+          name: 'Tokyo',
+          renderer: 'line'
         }, {
           color: palette.color(),
           data: this.seriesData[5],
-          name: 'London'
+          name: 'London',
+          renderer: 'line'
         }, {
           color: palette.color(),
           data: this.seriesData[6],
-          name: 'New York'
-        }
-      ].map(function(s) {
-        if (_this.args.stroke_fn != null) {
-          s.stroke = _this.args.stroke_fn(d3.rgb(s.color));
+          name: 'New York',
+          renderer: 'line'
         }
-        return s;
-      })
+      ].map((function(_this) {
+        return function(s) {
+          if (_this.args.stroke_fn != null) {
+            s.stroke = _this.args.stroke_fn(d3.rgb(s.color));
+          }
+          return s;
+        };
+      })(this))
     });
     this.graph.renderer.unstack = this.args.unstack;
     this.graph.render();
@@ -608,10 +618,10 @@ Rickshaw.Graph.Demo = Rickshaw.Class.create(Rickshaw.Graph.JSONP.Graphite, {
   }
 });
 
-/*
-#   Events and interaction
-*/
 
+/*
+ *   Events and interaction
+ */
 
 $('.dropdown-menu').on('click', 'a', function() {
   changeDashboard($(this).text());
diff --git a/js/src/giraffe.coffee b/js/src/giraffe.coffee
index a49b93c..a40601d 100644
--- a/js/src/giraffe.coffee
+++ b/js/src/giraffe.coffee
@@ -389,31 +389,38 @@ Rickshaw.Graph.Demo = Rickshaw.Class.create(Rickshaw.Graph.JSONP.Graphite,
           {
               color: palette.color(),
               data: @seriesData[0],
-              name: 'Moscow'
+              name: 'Moscow',
+              renderer: 'line'
           }, {
               color: palette.color(),
               data: @seriesData[1],
-              name: 'Shanghai'
+              name: 'Shanghai',
+              renderer: 'line'
           }, {
               color: palette.color(),
               data: @seriesData[2],
-              name: 'Amsterdam'
+              name: 'Amsterdam',
+              renderer: 'bar'
           }, {
               color: palette.color(),
               data: @seriesData[3],
-              name: 'Paris'
+              name: 'Paris',
+              renderer: 'line'
           }, {
               color: palette.color(),
               data: @seriesData[4],
-              name: 'Tokyo'
+              name: 'Tokyo',
+              renderer: 'line'
           }, {
               color: palette.color(),
               data: @seriesData[5],
-              name: 'London'
+              name: 'London',
+              renderer: 'line'
           }, {
               color: palette.color(),
               data: @seriesData[6],
-              name: 'New York'
+              name: 'New York',
+              renderer: 'line'
           }
       ].map((s) =>
         s.stroke = @args.stroke_fn(d3.rgb(s.color)) if @args.stroke_fn?