{{ block title }}Observed Prices - Dinner{{ endblock }}
{{ block content }}

<p>With your friends, you are planning to go to a one-star Michelin restaurant for a dinner in three weeks from now. In this occasion, you will have the opportunity to taste delicious dishes prepared by a starred chef.</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: 'Dinner Prices',
        data: dataList[vector]
    }],

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

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




{{ endblock }}