{% include "mustachebox/includes/jsheader.html" %}
<link rel="stylesheet"
      href="{{STATIC_URL}}css/cross_filter.css"
      type="text/css" media="screen" />

 <script type="text/javascript"
 src="{{STATIC_URL}}js/crossfilter.js"></script>
 <script type="text/javascript">
  var remote_url = "../monitoring/"
 </script>
 <script type="text/javascript"
 src="{{STATIC_URL}}js/crossfilter_graph.js"></script>


<h3>{{object.name}} rendered by a templatetag</h3>
<script type="text/javascript">
  var data = {% autoescape off %}{{object.data}}{% endautoescape %}

</script>
<script type="text/javascript" src={{STATIC_URL}}js/crossfilter_graph.js>
</script>

  <h1>Cross Filter Test</h1>
  <div class= "container" style="margin-top:40px">
    <div id="filter" class="well span5" >
      <ul>
        <li><a href="javascript:filter([null,
        null,[90,100]])">Records where CPU usage is between 90 and 100
        %</a></li>
        <li><a href="javascript:filter([null,
        [90,100]])">Records where RAM usage is between 90 and 100
        %</a></li>
        <li><a href="javascript:filter([null,
        [90,100],[90,100]])">Records where RAM <b>and</b> CPU usage is between 90 and 100
        %</a></li>
       <li><a href="javascript:filter([null,null,null,[7,10]])">Records
        where Load average is between 7 and 10</a></li>
       <li><a href="javascript:filter([[20,24]])">Records between 20h and 24h</a></li>
      </ul>
    </div>
    <div class="well span5">
      <h2>Filter Form</h2>
      <form>
    <label>CPU</label>
        <div id="slider-cpu">
          
        </div>
<label>RAM</label>
        <div id="slider-ram">
          
        </div>
      </form>
    </div>
</div>
<div id="charts">
  <div id="hour-chart" class="chart">
    <div class="title">Time of Day</div>
  </div>
  <div id="ram-chart" class="chart">
    <div class="title">Ram Usage</div>
  </div>

  <div id="cpu-chart" class="chart">
    <div class="title">CPU Usage</div>
  </div>
  <div id="load-chart" class="chart">
    <div class="title">Load average</div>
  </div>


  <div id="date-chart" class="chart">
    <div class="title">Date</div>
  </div>
</div>

<aside id="totals"><span id="active">-</span> of <span id="total">-</span> records selected.</aside>

<div id="lists">
  <div id="record-list" class="list"></div>
</div>
