{% extends "global/Page.html" %}
{% load otree %}

{% block title %}
    Graph2
{% endblock %}


{% block content %}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">

    </p>
</figure>

{% next_button %}

{% endblock %}

{% block scripts %}

    <script src="https://code.highcharts.com/highcharts.js"></script>

    <script>
   $(function () {
       Highcharts.chart('container', {
           chart: {
               type: 'column'
           },
           title: {
               text: 'Mean Offer'
           },
           xAxis: {
               categories: [
                   'Control',
                   'Ingroup Rounds',
                   'Outgroup Rounds'

               ],
               crosshair: true
           },
           yAxis: {
               min: 0,
               title: {
                   text: 'Amount in Rupees'
               }
           },
           tooltip: {
               headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
               pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                   '<td style="padding:0"><b>{point.y:.1f} Rupees</b></td></tr>',
               footerFormat: '</table>',
               shared: true,
               useHTML: true
           },
           plotOptions: {
               column: {
                   pointPadding: 0.2,
                   borderWidth: 0
               }
           },
           series: [{

               data: [{{ offer_control|json }},{{ offer_ingroup|json }},{{ offer_outgroup|json }}]
           }]
       });
   })


   </script>

{% endblock %}