{{ extends 'global/Page.html' }}
{{ block title }}Results{{ endblock }}

{{ block content }}

<p>Your cumulative score is {{ cumulativescore | to0 }}. Our simulations show that the lowest
    score could be as low as {{ lowscore | to0 }}. {{ lowscoretext }}</p>
<p>{{ controllimitbreachtext }}</p>

<center>
    <div id="chartContainer" style="height: 200px; width: 70%;"></div>
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</center>

{{ next_button }}



{{ endblock }}

{{ block scripts }}
<script>
window.onload = function () {

var datapointsy = [{y: js_vars.allycoord[0], label: 1}]
var rounds = js_vars.roundi
for (var i=1; i<rounds; i++) {
    var yy = js_vars.allycoord
    datapointsy.push({y: yy[i], label: i+1})
}

var datapointsx = [{y: js_vars.allxcoord[0], label: 1}]
for (i=1; i<rounds; i++) {
    var yy = js_vars.allxcoord
    datapointsx.push({y: yy[i], label: i+1})
}

var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    theme: "theme1",
    colorSet: "customColorSet1",
    axisY: {
        title: "Deviation",
        stripLines: [
            {
                value: 3*js_vars.stdev,
                label: "UCL"
            },
            {
            value: -3*js_vars.stdev,
            label: "LCL"
            }
        ]

    },
    data: [{
        type: "line",
        name: "Y coordinate",
        showInLegend: true,
        dataPoints: datapointsy,
    },
    {
        type: "line",
        name: "X coordinate",
        showInLegend: true,
        dataPoints: datapointsx,
    }]
});
chart.render();

}

</script>
{{ endblock }}