document_stats_formlang.html

{% load origin %}{% origin %}
<div id="chart"></div>

<script>
 var chartConf = {
     chart: {
         type: 'column'
     },
     plotOptions: {
         column: {
             animation: false
         }
     },
     title: {
         text: '{{ stats_title|escapejs }}'
     },
     xAxis: {
         type: "category",
         title: {
             text: 'Formal language'
         }
     },
     yAxis: {
         title: {
             text: 'Number of {{ doc_label }}s'
         }
     },
     tooltip: {
         formatter: function () {
             console.log(this);
             var s = '<b>' + this.points[0].key + '</b>';

             $.each(this.points, function () {
                 s += '<br/>' + chartConf.yAxis.title.text + ': ' + this.y;
             });

             return s;
         },
         shared: true
     },
     series: {{ chart_data }}
 };
</script>

<h3>Data</h3>

<table class="table table-condensed stats-data">
  <thead>
    <tr>
      <th>Formal language</th>
      <th>Percentage of {{ doc_label }}s</th>
      <th>{{ doc_label|capfirst }}s</th>
    </tr>
  </thead>
  <tbody>
    {% for formal_language, percentage, count, names in table_data %}
      <tr>
        <td>{{ formal_language }}</td>
        <td>{{ percentage|floatformat:2 }}%</td>
        <td>{% include "stats/includes/number_with_details_cell.html" %}</td>
      </tr>
    {% endfor %}
  </tbody>
</table>