grafana/panels/histogram/editor.html

<div>
  <div class="row-fluid">
    <div class="span3">
      <label class="small">Mode</label> 
      <select ng-change="set_refresh(true)" class="input-small" ng-model="panel.mode" ng-options="f for f in ['count','min','mean','max','total']"></select>
    </div>
    <div class="span3" ng-show="panel.mode != 'count'">
      <label class="small">Field</label>
      <form>
        <input ng-change="set_refresh(true)" placeholder="Start typing" bs-typeahead="fields.list" type="text" class="input-small" ng-model="panel.value_field">
      </form>
    </div>
    <div class="span5" ng-show="panel.mode != 'count'">
      <label class="small">Note</label><small> In <strong>{{panel.mode}}</strong> mode the configured field <strong>must</strong> be a numeric type</small>
    </div>
  </div>
  <div class="row-fluid">
    <div class="span3">
      <form style="margin-bottom: 0px">
        <label class="small">Label</label>
        <input type="text" placeholder="New Label" style="width:70%" ng-model="newlabel">
      </form>
    </div>
    <div class="span8">
      <label class="small">Query</label>
      <form class="input-append" style="margin-bottom: 0px">
        <input type="text" placeholder="New Query" style="width:80%" ng-model="newquery">
        <button class="btn" ng-click="add_query(newlabel,newquery);newlabel='';newquery='';set_refresh(true)"><i class="icon-plus"></i></button>
      </form>
    </div>
    <div class="span1">
    </div>
  </div>
  <div class="row-fluid" ng-repeat="q in panel.query">        
    <div class="span3">
      <form style="margin-bottom: 0px">
        <input type="text" style="width:70%" ng-model="q.label" ng-change="set_refresh(true)">
      </form>
    </div>
    <div class="span8">
      <form style="margin-bottom: 0px">
        <input type="text" style="width:80%" ng-model="q.query" ng-change="set_refresh(true)">
      </form>
    </div>
    <div class="span1">
      <i class="icon-remove pointer" ng-click="remove_query(q)"></i>
    </div>
  </div>
  <h5>Chart Options</h5>
  <div class="row-fluid" style="margin-bottom:10px;">
    <div class="span1"> <label class="small">Bars</label><input type="checkbox" ng-model="panel.bars" ng-checked="panel.bars"></div>
    <div class="span1"> <label class="small">Lines</label><input type="checkbox" ng-model="panel.lines" ng-checked="panel.lines"></div>
    <div class="span1"> <label class="small">Points</label><input type="checkbox" ng-model="panel.points" ng-checked="panel.points"></div>
    <div class="span1"> <label class="small">Stack</label><input type="checkbox" ng-model="panel.stack" ng-checked="panel.stack"></div>
    <div class="span1" ng-show="panel.stack"> <label class="small" bs-tooltip="'Stack as a percentage of total'">Percent</label><input type="checkbox"  ng-model="panel.percentage" ng-checked="panel.percentage"></div>
    <div class="span1"> <label class="small">Legend</label><input type="checkbox" ng-model="panel.legend" ng-checked="panel.legend"></div>
    <div class="span1"> <label class="small">xAxis</label><input type="checkbox" ng-model="panel['x-axis']" ng-checked="panel['x-axis']"></div>
    <div class="span1"> <label class="small">yAxis</label><input type="checkbox" ng-model="panel['y-axis']" ng-checked="panel['y-axis']"></div>
    <div class="span2" ng-show="panel.lines">
      <label class="small">Line Fill</label> 
      <select class="input-mini" ng-model="panel.fill" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"></select>
    </div>
    <div class="span2" ng-show="panel.lines">
      <label class="small">Line Width</label> 
      <select class="input-mini" ng-model="panel.linewidth" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"></select>
    </div>
  </div> 
  <div class="row-fluid">  
    <div class="span2">
      <label class="small">Time correction</label> 
      <select ng-model="panel.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
    </div>
    <div class="span1"> <label class="small">Selectable</label><input type="checkbox" ng-model="panel.interactive" ng-checked="panel.interactive"></div>
    <div class="span2"> 
      <label class="small">Zoom Links</label><input type="checkbox" ng-model="panel.zoomlinks" ng-checked="panel.zoomlinks" />
    </div>
    <div class="span2"> 
      <label class="small">Auto-interval</label><input type="checkbox" ng-model="panel.auto_int" ng-checked="panel.auto_int" />
    </div>
    <div class="span2" ng-show='panel.auto_int'> 
      <label class="small">Resolution</label><input type="number" class='input-mini' ng-model="panel.resolution" ng-change='set_refresh(true)'/>
    </div>
    <div class="span3" ng-show='panel.auto_int'> 
      <label class="small">Shoot for this many data points, rounding to sane intervals</label>
    </div>
    <div class="span2" ng-hide='panel.auto_int'> 
      <label class="small">Interval</label><input type="text" class='input-mini' ng-model="panel.interval" ng-change='set_refresh(true)'/>
    </div>
    <div class="span3" ng-hide='panel.auto_int'> 
      <label class="small">Use Elasticsearch date math format (eg 1m, 5m, 1d, 2w, 1y)</label>
    </div>
  </div>
  <h5>Panel Spy</h5>
  <div class="row-fluid">
    <div class="span2"> 
      <label class="small">Spyable</label><input type="checkbox" ng-model="panel.spyable" ng-checked="panel.spyable">
    </div>
    <div class="span9 small">
      The panel spy shows 'behind the scenes' information about a panel. It can
      be accessed by clicking the <i class='icon-eye-open'></i> in the top right
      of the panel.
    </div>
  </div>
</div>