graphite works with modified histogram panel

src/app/panels/graphite/module.html

@@ -0,0 +1,97 @@
+<div ng-controller='histogram' ng-init="init()" style="min-height:{{panel.height || row.height}}">
+  <style>
+    .histogram-legend {
+      display:inline-block;
+      padding-right:5px
+    }
+    .histogram-legend-dot {
+      display:inline-block;
+      height:10px;
+      width:10px;
+      border-radius:5px;
+    }
+    .histogram-legend-item {
+      display:inline-block;
+    }
+    .histogram-chart {
+      position:relative;
+    }
+    .histogram-options {
+      padding: 5px;
+      margin-right: 15px;
+      margin-bottom: 0px;
+    }
+    .histogram-options label {
+      margin: 0px 0px 0px 10px !important;
+    }
+    .histogram-options span {
+      white-space: nowrap;
+    }
+
+    /* this is actually should be in bootstrap */
+    .form-inline .checkbox {
+        display: inline-block;
+    }
+  </style>
+  <div>
+    <span ng-show='panel.options'>
+      <a class="link underline small" ng-show='panel.options' ng-click="options=!options">
+        <i ng-show="!options" class="icon-caret-right"></i><i ng-show="options" class="icon-caret-down"></i> View
+      </a> |&nbsp
+    </span>
+    <span ng-show='panel.zoomlinks && data'>
+      <!--<a class='small' ng-click='zoom(0.5)'><i class='icon-zoom-in'></i> Zoom In</a>-->
+      <a class='small' ng-click='zoom(2)'><i class='icon-zoom-out'></i> Zoom Out</a>
+    </span>
+  </div>
+  <form class="form-inline bordered histogram-options" ng-show="options">
+    <span>
+      <div class="checkbox">
+        <label class="small">
+          <input type="checkbox" ng-model="panel.bars" ng-checked="panel.bars" ng-change="render()">
+          Bars
+        </label>
+      </div>
+      <div class="checkbox">
+        <label class="small">
+          <input type="checkbox" ng-model="panel.lines" ng-checked="panel.lines" ng-change="render()">
+          Lines
+        </label>
+      </div>
+      <div class="checkbox">
+        <label class="small">
+          <input type="checkbox" ng-model="panel.stack" ng-checked="panel.stack" ng-change="render()">
+          Stack
+        </label>
+      </div>
+    </span>
+    <span ng-show="panel.stack">
+      <div class="checkbox">
+        <label style="white-space:nowrap" class="small">
+          <input type="checkbox"  ng-model="panel.percentage" ng-checked="panel.percentage" ng-change="render()">
+          Percent
+        </label>
+      </div>
+    </span>
+    <span>
+      <div class="checkbox">
+        <label class="small">
+          <input type="checkbox" ng-model="panel.legend" ng-checked="panel.legend" ng-change="render()">
+          Legend
+        </label>
+      </div>
+    </span>
+    <span>
+      <label class="small">Interval</label> <select ng-change="set_interval(panel.interval);get_data();" class="input-small" ng-model="panel.interval" ng-options="interval_label(time) for time in _.union([panel.interval],panel.intervals)"></select>
+    </span>
+  </form>
+  <center><img ng-show='panel.loading && _.isUndefined(data)' src="img/load_big.gif"></center>
+  <div histogram-chart class="pointer histogram-chart" params="{{panel}}"></div>
+  <span ng-show="panel.legend" ng-repeat='series in data' class="histogram-legend">
+      <i class='icon-circle' ng-style="{color: series.info.color}"></i>
+      <span class='small histogram-legend-item'>
+        <span ng-if="panel.show_query">{{series.info.alias || series.info.query}}</span>
+        <span ng-if="!panel.show_query">{{series.info.alias}}</span>
+      </span>
+    </span>
+</div>