<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;
  }

  .histogram-marker {
    display: block;
    width: 20px;
    height: 21px;
    background-image: url('img/annotation-icon.png');
    background-repeat: no-repeat;
  }

</style>
<div>
  <span ng-show='panel.options'>
    <a class="link small" ng-show='panel.options' ng-click="options=!options">
      View <i ng-show="!options" class="icon-caret-right"></i><i ng-show="options" class="icon-caret-down"></i>
    </a> |&nbsp
  </span>
  <span ng-show='panel.zoomlinks'>
    <!--<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> |&nbsp
  </span>
  <span ng-show="panel.legend" ng-repeat='series in legend' class="histogram-legend">
    <i class='icon-circle' ng-style="{color: series.query.color}"></i>
    <span class='small histogram-legend-item'>
      <span ng-if="panel.show_query">{{series.query.alias || series.query.query}}</span>
      <span ng-if="!panel.show_query">{{series.query.alias}}</span>
      <span ng-show="panel.legend_counts"> ({{series.hits}})</span>
    </span>
  </span>
  <span ng-show="panel.legend" class="small"><span ng-show="panel.derivative"> change in </span><span class="strong" ng-show="panel.value_field && panel.mode != 'count'">{{panel.value_field}}</span> {{panel.mode}} per <strong ng-hide="panel.scaleSeconds">{{panel.interval}}</strong><strong ng-show="panel.scaleSeconds">1s</strong> | (<strong>{{hits}}</strong> hits)</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' src="img/load_big.gif"></center>
<div histogram-chart class="pointer histogram-chart" params="{{panel}}"></div>

</div>