{% extends "global/Page.html" %}
{% load staticfiles otree_tags %}

{% block title %}Results for all periods{% endblock title %}

{% block content %}
    <p>
        You have finished all periods of the game. Below you see a summary of the number of runs by round:
    </p>
    <div id="container"
         style="min-width: 310px; height: 400px; margin: 0 auto"></div>
     {% next_button %}

{% endblock %}

{% block scripts %}
    <script src="//code.highcharts.com/highcharts.js"></script>
    <script src="//code.highcharts.com/highcharts-3d.js"></script>
    <script src="//code.highcharts.com/modules/exporting.js"></script>

    <script>
  $(function () {

$('#container').highcharts({
                title: {
                    text: 'Results',
                },
                xAxis: {
                    categories: {{ categories|safe }},
                },
                yAxis: {
                    title: {
                        text: ''
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    valueSuffix: ''
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                series: [{
                    name: '{{ name }}',
                    data: {{ series|json }}
                }]
            });
        });

     </script>
{% endblock %}