energylink/panels/histogram/module.html

<kibana-panel ng-controller='histogram' ng-init="init()" style="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;
    }
  </style>
  <span ng-show="panel.spyable" class='spy panelextra pointer'>
      <i bs-modal="'partials/inspector.html'" class="icon-eye-open"></i>
  </span>
  <div>
    <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>
    <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'>{{series.info.alias}} ({{series.hits}})</span>
    </span>
    <span ng-show="panel.legend" class="small"><span ng-show="panel.value_field && panel.mode != 'count'">{{panel.value_field}}</span> {{panel.mode}} per <strong>{{panel.interval}}</strong> | (<strong>{{hits}}</strong> hits)</span>
  </div>
  <center><img ng-show='panel.loading && _.isUndefined(data)' src="common/img/load_big.gif"></center>
  <div histogram-chart class="histogram-chart" params="{{panel}}"></div>
</kibana-panel>