Added bar chart for games played per year

static/javascript/statistics.js

@@ -2,13 +2,13 @@ document.body.onload=loadStatistics()
 document.getElementById('statistics_nav').classList.add('active')
 
 async function loadStatistics(){
-    const overtimechart = document.getElementById("overtimechart")
+    const gamesovertimechart = document.getElementById("gamesovertimechart")
     
-    games_over_time_statistic = await makeRequest(api_url + '/statistics/amount_of_games_over_time?day_step=30')
+    let 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')
+    let 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')
+    let 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, {
+    new Chart(gamesovertimechart, {
         type: 'bar',
         data: {
           labels: Object.keys(games_over_time_statistic.result),
@@ -41,4 +41,45 @@ async function loadStatistics(){
 
     $("#overtimechartname").text(games_over_time_statistic.name)
 
+
+    const gamesperyearchart = document.getElementById('gamesperyear')
+
+    let games_played_per_year_statistic = await makeRequest(api_url + '/statistics/games_played_per_year?filter_expansions_out=true')
+    
+    let years_played = []
+
+    for (date_index in Object.keys(games_played_per_year_statistic.result)){
+      const current_date = Object.keys(games_played_per_year_statistic.result)[date_index]
+      const year = current_date.substring(0, current_date.indexOf("-"));
+      years_played.push(year)
+    }
+
+    new Chart(gamesperyearchart, {
+      plugins: [ChartDataLabels],
+      type: 'bar',
+      data: {
+        labels: years_played    ,
+        datasets: [{
+          label: games_played_per_year_statistic.name,
+          data: Object.values(games_played_per_year_statistic.result),
+          borderWidth: 1  
+        }
+      ]
+      },
+      options: {
+        scales: {
+          y: {
+            beginAtZero: true,
+            max: Math.ceil((Math.max(...Object.values(games_played_per_year_statistic.result)))/ 250) * 250
+          }
+        },
+        plugins: {
+          datalabels: {
+              anchor: 'end',
+            align: 'end'
+          }
+        }
+      }
+    });
+
 }

templates/base.jinja

@@ -13,7 +13,8 @@
 
     <script src="{{ url_for('static', filename='javascript/jquery/jquery-3.7.1.min.js')  }}" defer></script>
     <script src="{{ url_for('static', filename='javascript/datatables/datatables.min.js')  }}" defer></script>
-    <script src="{{ url_for('static', filename='javascript/chart/chart.js')  }}"></script>
+    <script src="{{ url_for('static', filename='javascript/chart/chart.js')  }}" defer></script>
+    <script src="{{ url_for('static', filename='javascript/chart/chartjs-plugin-datalabels.min.js')  }}" defer></script>
     
 </head> 
 

templates/statistics.jinja

@@ -6,7 +6,7 @@
         <div class="row">
                 <div class="col">
                         <div class="card">
-                                <canvas id="overtimechart"></canvas>
+                                <canvas id="gamesovertimechart"></canvas>
                                 <div class="card-body">
                                         <h4 class="card-title" id="overtimechartname"></h4>
                                 </div>
@@ -14,7 +14,7 @@
                 </div>
                 <div class="col">
                         <div class="card">                                
-                                <canvas id="overtimechart"></canvas>
+                                <canvas id="gamesperyear"></canvas>
                                 <div class="card-body">
                                         <h4 class="card-title" id="overtimechartname"></h4>
                                 </div>