{% load sekizai_tags static i18n %}

{% addtoblock "css" %}
  <link href="{% static 'c3/c3.min.css' %}" rel="stylesheet" type="text/css">
{% endaddtoblock %}

<h3 class="mt-4">{% trans "Characteristics of Series Registrations" %}</h3>

<p>{% blocktrans %}This chart indicates the proportion of series registrations that receive the student discount, the proportion of series registrations that are paid for at the door, etc.{% endblocktrans %}</p>

<div class="card">

  <div class="card-body">
    <div id="RegistrationTypeAverages"></div>
  </div>

</div>

{% addtoblock "js" %}
  <script src="{% static 'd3/d3.min.js' %}"></script>
{% endaddtoblock %}
{% addtoblock "js" %}
  <script src="{% static 'c3/c3.min.js' %}"></script>
{% endaddtoblock %}
{% addtoblock "js" %}
<script type="text/javascript">
$(document).ready(function(){

  var registrationTypeAveragesChart = c3.generate({
      bindto: '#RegistrationTypeAverages',
    data: {
      url: "{% url 'RegistrationTypeAveragesJSON' %}",
      mimeType: 'json',
      type: 'bar',
      hide: ['DropIn','Cancelled'],
      keys: {
        x: 'year',
        value: ['Student','Door','DropIn','Cancelled']
      }
    },
    axis: {
        x: {
            type: 'category', // this needed to load string x value
        },
    }
  });

});
</script>
{% endaddtoblock %}
