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

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

{% block content %}
    <p>
        You have finished all  periods. Below you see a summary of the average price charged 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|json }},
                    title:{text:'Round'}
                },
                yAxis: {
                    title: {
                        text: ''
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    valueSuffix: ''
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                series:{{ price|json }}
            });
        });

     </script>
{% endblock %}