{{ block title }}Observed Prices - Football Match{{ endblock }}
{{ block content }}

<p>You are planning to go to the stadium to watch the final Champions League football match. At the moment, you have no information with respect to the final teams. The match will be in three weeks from now.</p>
<p><strong>You have monitored the prices in the past 10 days, and you can observe them in the following graph.</strong></p>
<p><i>By hovering over the graph with the mouse, you will be able to see the spot price for each day of observation.</i></p>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.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>

    {{ formfields }}


<script>

let x = js_vars.a;

let dataList=[
    [Math.round(x*(1+0.1)), Math.round(x*(1+-0.3)), Math.round(x*(1+0.1)), Math.round(x*(1+-0.3)), Math.round(x*(1+0)), Math.round(x*(1+0.3)), Math.round(x*(1+0.1)), Math.round(x*(1+0.3)), Math.round(x*(1-0.1)), Math.round(x*(1+0))],
    [Math.round(x*(1+-0.1)), Math.round(x*(1+-0.1)), Math.round(x*(1+-0.3)), Math.round(x*(1+0)), Math.round(x*(1+-0.1)), Math.round(x*(1+0)), Math.round(x*(1+0.3)), Math.round(x*(1-0.1)), Math.round(x*(1+0.3)), Math.round(x*(1+0.1))],
    [Math.round(x*(1+0)), Math.round(x*(1+-0.3)), Math.round(x*(1+-0.3)), Math.round(x*(1+0.1)), Math.round(x*(1+-0.3)), Math.round(x*(1+0.1)), Math.round(x*(1+0.2)), Math.round(x*(1+0.15)), Math.round(x*(1+0.35)), Math.round(x*(1+0.15))],
    [Math.round(x*(1+-0.1)), Math.round(x*(1+0.2)), Math.round(x*(1+0.1)), Math.round(x*(1+-0.3)), Math.round(x*(1+0)), Math.round(x*(1-0.2)), Math.round(x*(1+0.1)), Math.round(x*(1+0.25)), Math.round(x*(1-0.1)), Math.round(x*(1+0.1))],
    [Math.round(x*(1+0)), Math.round(x*(1+-0.3)), Math.round(x*(1+0.2)), Math.round(x*(1+-0.1)), Math.round(x*(1+0.1)), Math.round(x*(1+0.2)), Math.round(x*(1+0)), Math.round(x*(1+-0.1)), Math.round(x*(1+-0.3)), Math.round(x*(1+-0.05))],
    [Math.round(x*(1+0)), Math.round(x*(1+-0.1)), Math.round(x*(1+-0.1)), Math.round(x*(1+0.3)), Math.round(x*(1+0)), Math.round(x*(1+0.2)), Math.round(x*(1+-0.1)), Math.round(x*(1+0)), Math.round(x*(1+-0.2)), Math.round(x*(1+0.05))],
    [Math.round(x*(1+0.05)), Math.round(x*(1+-0.15)), Math.round(x*(1+0.05)), Math.round(x*(1+-0.15)), Math.round(x*(1+0)), Math.round(x*(1+0.15)), Math.round(x*(1+0.05)), Math.round(x*(1+0.15)), Math.round(x*(1-0.05)), Math.round(x*(1+0))],
    [Math.round(x*(1+-0.05)), Math.round(x*(1+-0.05)), Math.round(x*(1+-0.15)), Math.round(x*(1+0)), Math.round(x*(1+-0.05)), Math.round(x*(1+0)), Math.round(x*(1+0.15)), Math.round(x*(1-0.05)), Math.round(x*(1+0.15)), Math.round(x*(1+0.1))],
    [Math.round(x*(1+0)), Math.round(x*(1+-0.15)), Math.round(x*(1+-0.15)), Math.round(x*(1+0.05)), Math.round(x*(1+-0.15)), Math.round(x*(1+0.05)), Math.round(x*(1+0.1)), Math.round(x*(1+0.075)), Math.round(x*(1+0.175)), Math.round(x*(1+0.15))],
    [Math.round(x*(1+-0.05)), Math.round(x*(1+0.1)), Math.round(x*(1+0.05)), Math.round(x*(1+-0.15)), Math.round(x*(1+0)), Math.round(x*(1-0.1)), Math.round(x*(1+0.05)), Math.round(x*(1+0.125)), Math.round(x*(1-0.05)), Math.round(x*(1+0.1))],
    [Math.round(x*(1+0)), Math.round(x*(1+-0.15)), Math.round(x*(1+0.1)), Math.round(x*(1+-0.05)), Math.round(x*(1+0.05)), Math.round(x*(1+0.1)), Math.round(x*(1+0)), Math.round(x*(1+-0.05)), Math.round(x*(1+-0.15)), Math.round(x*(1+-0.05))],
    [Math.round(x*(1+0)), Math.round(x*(1+-0.05)), Math.round(x*(1+-0.05)), Math.round(x*(1+0.15)), Math.round(x*(1+0)), Math.round(x*(1+0.1)), Math.round(x*(1+-0.05)), Math.round(x*(1+0)), Math.round(x*(1+-0.1)), Math.round(x*(1+0.05))]
]


let vector=js_vars.rand

Highcharts.chart('container', {
    title: {
       text: 'Observed prices in the past 10 days'
    },

    subtitle: {
        text: ''
    },

    yAxis: {
        max: x*1.35,
        min: x*(1-.35),
        title: {
            text: 'Prices in EUR'
        }
    },

    xAxis: {
        accessibility: {
            rangeDescription: 'Range: -9 to '
        }
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: -9
        }
    },

    series: [{
        name: 'Match ticket Prices',
        data: dataList[vector]
    }],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 200
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }

});
</script>
    {{ next_button }}




{{ endblock }}