{% extends "newbase.html" %}
{% load static %}
{% load rowerfilters %}

{% block title %}Rowsandall Box Plot {% endblock %}

{% block main %}

<script src="https://cdn.pydata.org/bokeh/release/bokeh-3.1.1.min.js"></script>
<script async="true" type="text/javascript">
  Bokeh.set_log_level("info");
</script>

<div id="id_script">
</div>


<h1>Box Chart</h1>
<ul class="main-content">
  <li class="grid_4">
    <div id="id_chart">
      {{ the_div|safe }}
    </div>
  </li>
  <li class="grid_2">
    <form enctype="multipart/form-data" action="" method="post">
      {% csrf_token %}
      <table>
        {{ chartform.as_table }}
      </table>
      <p>
        <input name='workoutselectform' class="button green" type="submit" value="Submit">
      </p>
    </form>
  </li>
  <li class="grid_2">
    <p>
      You can use the form to change the metric or filter the data.
      Set Min SPM and Max SPM to select only strokes in a certain range of
      stroke rates.
      Set Work per Stroke to a minimum value to remove "paddle" strokes or turns.
    </p>
  </li>
</ul>


{% endblock %}

{% block scripts %}
<script type='text/javascript'
        src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'>
</script>

<script>
  $(function($) {
  console.log('loading script');
  $.getJSON(window.location.protocol + '//'+window.location.host + '/rowers/user-boxplot-data/', function(json) {
  var counter=0;
  var script = json.script;
  var div = json.div;
  $("#id_sitready").remove();
  $("#id_chart").append(div);
  console.log(div);
  $("#id_script").append("<script>"+script+"</s"+"cript>");

  });
  });
</script>

{% endblock %}

{% block sidebar %}
{% include 'menu_analytics.html' %}
{% endblock %}