{{ block title }}
Information
{{ endblock }}
{{ block content }}
<p>
    Below is the historical data of the inflation rate from 2001 Q1 to 2010 Q4. When you are ready, please press "Continue"
    and the game will start.
</p>
<div id="highcharts-container"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script>
   $(function () {
    Highcharts.chart('highcharts-container', {
        chart: {
            type: 'line',
        },
        title: {
            text: 'Historical inflation rate over Periods'
        },
        xAxis: {
            title: {
                text: 'Quarter'
            },
            categories: (function () {
                var categories = [];
                for (var i = 1; i <= 40; i++) {
                    categories.push(i.toString());
                }
                return categories;
            }()),
             labels: {
          step: 1,
         style: {
            fontSize: '12px' // Reduce the font size as needed
          },
           rotation: -45 // Optional: Rotate labels (values in degrees, e.g., -45, 45)
         }
        },
        yAxis: {
            title: {
                text: 'Inflation (%) '
            },
            min: {{ chart_min|json }},
            max: {{ chart_max|json }},
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        plotOptions: {
            series: {
                label: {
                    connectorAllowed: false
                },
                pointStart: 0
            }
        },
        series:
            {{ chart_series|json }},
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }
    });
});
</script>

<center><button class="btn btn-primary">Continue</button></center>
{{ endblock }}