document.body.onload=loadStatistics()

async function loadStatistics(){
    const overtimechart = document.getElementById("overtimechart")
    
    games_over_time_statistic = await makeRequest(api_url + '/statistics/amount_of_games_over_time?day_step=30')
    games_over_time_statistic_no_expanions = await makeRequest(api_url + '/statistics/amount_of_games_over_time?day_step=30&filter_expansions_out=true')
    games_over_time_statistic_only_expanions = await makeRequest(api_url + '/statistics/amount_of_games_over_time?day_step=30&only_expansions=true')

    new Chart(overtimechart, {
        type: 'bar',
        data: {
          labels: Object.keys(games_over_time_statistic.result),
          datasets: [{
            label: games_over_time_statistic.name,
            data: Object.values(games_over_time_statistic.result),
            borderWidth: 1,
            type: 'line'
          },
          {
            label: "Base games",
            data: Object.values(games_over_time_statistic_no_expanions.result),
            borderWidth: 1
          },
          {
            label: "Expansions",
            data: Object.values(games_over_time_statistic_only_expanions.result),
            borderWidth: 1
          }
        ]
        },
        options: {
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });

    $("#overtimechartname").text(games_over_time_statistic.name)

}