{% load otree %}

    <div id="container">
        <p>Graph results of all players: <br/></p>
        {% 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>
            document.addEventListener('DOMContentLoaded', function() {
                drawChart(); 
            }, false);
            function drawChart() {            
                $('#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 %}
    </div>