{% extends 'base.html' %}
{% load static %}

{% block extra_media %}
<script type="text/javascript" src="{% get_static_prefix %}js/Chart.min.js"></script>
{% endblock %}

{% block title %}karma: {{ entry.key }}{% endblock %}

{% block content %}
  <h3>{{ entry.key }}</h3>
  <canvas id="karma_history"></canvas>
  <script type="text/javascript">
    Chart.defaults.global.responsive = true;
    Chart.defaults.global.maintainAspectRatio = true;
    var ctx = $("#karma_history").get(0).getContext("2d");
    var data = {
      labels: [{% for x in entry.history %}"{{ x.0 }}", {% endfor %}],
      datasets: [
        {
          label: "{{ entry.key }}",
          fillColor: "rgba(220,220,220,0.2)",
          strokeColor: "rgba(220,220,220,1)",
          pointColor: "rgba(220,220,220,1)",
          pointStrokeColor: "#fff",
          pointHighlightFill: "#fff",
          pointHighlightStroke: "rgba(220,220,220,1)",
          data: [{% for x in entry.history %}{{ x.2 }}, {% endfor %}]
        }
      ]
    };
    var myLineChart = new Chart(ctx).Line(data);
  </script>
{% endblock %}