diff --git a/static/javascript/statistics.js b/static/javascript/statistics.js
index cf512ef..f3cad01 100644
--- a/static/javascript/statistics.js
+++ b/static/javascript/statistics.js
@@ -1,6 +1,8 @@
 document.body.onload=loadStatistics()
 document.getElementById('statistics_nav').classList.add('active')
 
+const important_player_name_colors = {'Yarne':'black', 'Lore':'green', 'Lucas':'red','Louize':'blue','Ruben':'purple'}
+
 function create_statistic_card(){
   function create_statistic_card_col(){
     const col = document.createElement('col')
@@ -26,13 +28,24 @@ function create_statistic_card(){
 }
 
 async function create_games_over_time_chart(){
-  const gamesovertimechart = document.getElementById("gamesovertimechart")
     
   let games_over_time_statistic = await makeRequest(api_url + '/statistics/amount_of_games_over_time?day_step=30')
   let 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_only_expanions = await makeRequest(api_url + '/statistics/amount_of_games_over_time?day_step=30&only_expansions=true')
 
-  new Chart(gamesovertimechart, {
+  const card_to_fill = create_statistic_card()
+  const chart_canvas_container = document.createElement('div')
+  chart_canvas_container.classList.add('card-body')
+  chart_canvas_container.classList.add('card-img-top')
+
+  const chart_canvas = document.createElement('canvas')
+  chart_canvas.classList.add('chart_visual')
+
+  chart_canvas_container.appendChild(chart_canvas)
+
+
+
+  new Chart(chart_canvas, {
       type: 'bar',
       data: {
         labels: Object.keys(games_over_time_statistic.result),
@@ -63,13 +76,158 @@ async function create_games_over_time_chart(){
       }
     });
 
-  $("#overtimechartname").text(games_over_time_statistic.name)
+  const card_footer = document.createElement('div')
+  card_footer.classList.add('card-header')
+  card_footer.classList.add('text-muted')
+  card_footer.innerHTML = games_over_time_statistic.name
+  
+  card_to_fill.appendChild(card_footer)
+  card_to_fill.appendChild(chart_canvas_container)
+}
+
+async function create_line_chart(statistic_data, name=''){
+  if (name == ""){
+    statistic_name = statistic_data.name
+  }else{
+    statistic_name = name
+  }
+
+  const card_to_fill = create_statistic_card()
+
+  const chart_canvas_container = document.createElement('div')
+  chart_canvas_container.classList.add('card-body')
+  chart_canvas_container.classList.add('card-img-top')
+
+  const chart_canvas = document.createElement('canvas')
+  chart_canvas.classList.add('chart_visual')
+
+  chart_canvas_container.appendChild(chart_canvas)
+  
+  const highest_bar_value = Math.max(...Object.values(statistic_data.result))
+
+  let grid_offset = 0
+
+  if (highest_bar_value > 10000){
+    grid_offset = 25000
+  }else if(highest_bar_value > 1000){
+    grid_offset = 2500
+  }else if(highest_bar_value > 100){
+    grid_offset = 250
+  }else if(highest_bar_value > 10){
+    grid_offset = 25
+  }else if(highest_bar_value > 2){
+    grid_offset = 2.5
+  }else{
+    grid_offset = 1.25
+  }
+    
+  new Chart(chart_canvas, {
+    type: 'line',
+    data: {
+      labels: Object.keys(statistic_data.result),
+      datasets: [{
+        label: statistic_data.name,
+        data: Object.values(statistic_data.result),
+        borderWidth: 1  
+      }
+    ]
+    },
+    options: {
+      scales: {
+        y: {
+          beginAtZero: true,
+          max: Math.ceil((highest_bar_value) / grid_offset) * grid_offset
+        }
+      }
+    }
+  });
+
+  const card_footer = document.createElement('div')
+  card_footer.classList.add('card-header')
+  card_footer.classList.add('text-muted')
+  card_footer.innerHTML = statistic_name
+  
+  card_to_fill.appendChild(card_footer)
+  card_to_fill.appendChild(chart_canvas_container)
+}
+
+async function create_multi_line_chart(statistic_data, name=''){
+  if (name == ""){
+    statistic_name = statistic_data.name
+  }else{
+    statistic_name = name
+  }
+
+  const card_to_fill = create_statistic_card()
+
+  const chart_canvas_container = document.createElement('div')
+  chart_canvas_container.classList.add('card-body')
+  chart_canvas_container.classList.add('card-img-top')
+
+  const chart_canvas = document.createElement('canvas')
+  chart_canvas.classList.add('chart_visual')
+
+  chart_canvas_container.appendChild(chart_canvas)
+
+  let own_datasets = []
+  let all_results = []
+  let all_dates = []
+
+  for (key in statistic_data){
+    if (!Object.keys(important_player_name_colors).includes(key)){
+      dataset = {
+        label: key,
+        data: Object.values(statistic_data[key].result)
+      }
+    }else{
+      dataset = {
+        label: key,
+        data: Object.values(statistic_data[key].result),
+        borderColor: important_player_name_colors[key]
+      }
+    }
+    
+    own_datasets.push(dataset)
+    for (result_value in Object.values(statistic_data[key].result)){
+      all_results.push(result_value)
+    }
+    for (date in statistic_data[key].result){
+      if (!all_dates.includes(date)){
+        all_dates.push(date)
+      }
+    }
+  }
+    
+  new Chart(chart_canvas, {
+    type: 'line',
+    data: {
+      labels: all_dates,
+      datasets: own_datasets
+    },
+    options: {
+      scales: {
+        y: {
+          beginAtZero: true,
+          offset: true
+        },
+        x: {
+          offset: true
+        }
+      }
+    }
+  });
+
+  const card_footer = document.createElement('div')
+  card_footer.classList.add('card-header')
+  card_footer.classList.add('text-muted')
+  card_footer.innerHTML = statistic_name
+  
+  card_to_fill.appendChild(card_footer)
+  card_to_fill.appendChild(chart_canvas_container)
 }
 
 async function create_bar_chart(statistic_data, name=''){
 
-  statistic_data = await statistic_data
-
   if (name == ""){
     statistic_name = statistic_data.name
   }else{
@@ -209,8 +367,6 @@ async function create_multiple_boardgame_chart(statistic_data, name = '', footer
     return footer_attribute_to_value(obj[properties.shift()], properties.join('.'))
   }
 
-  statistic_data = await statistic_data
-
   if (name == ""){
     statistic_name = statistic_data.name
   }else{
@@ -261,8 +417,6 @@ async function create_multiple_boardgame_chart(statistic_data, name = '', footer
 
 async function create_basic_statistic_chart(statistic_data, name=''){
 
-  statistic_data = await statistic_data
-
   if (name == ""){
     statistic_name = statistic_data.name
   }else{
@@ -294,33 +448,49 @@ async function create_basic_statistic_chart(statistic_data, name=''){
 
 async function loadStatistics(){   
 
-  const names_to_show = ['Yarne', 'Lore', 'Lucas', 'Louize', 'Ruben']
+  const amount_of_games_statistic_data = await makeRequest(api_url+'/statistics/amount_of_games')
+  create_basic_statistic_chart(amount_of_games_statistic_data, 'Spellen in bezit')
+
+  const total_collection_cost_statistic_data = await makeRequest(api_url+'/statistics/total_collection_cost')
+  create_basic_statistic_chart(total_collection_cost_statistic_data, 'Totale kost van spellen in bezit')
+
+  
+
+  //Seperate because of multiple data
+  await create_games_over_time_chart()
+
+  const games_played_per_year_statistic_data = await makeRequest(api_url + '/statistics/games_played_per_year?filter_expansions_out=true')
+  create_bar_chart(games_played_per_year_statistic_data, 'Spellen gespeeld per jaar')
+
+  const most_expensive_games_statistic_data = await makeRequest(api_url+'/statistics/most_expensive_games?top_amount=6')
+  create_multiple_boardgame_chart(most_expensive_games_statistic_data, 'Duurste spellen', 'owned_info.price_paid', '\u20AC ')
+
+  const shelf_of_shame_statistic_data = await makeRequest(api_url + '/statistics/shelf_of_shame')
+  create_multiple_boardgame_chart(shelf_of_shame_statistic_data)
+
   const winrate_statistic_data = await makeRequest(api_url + '/statistics/winrate')
   for (let player_name in winrate_statistic_data.result){
-    if (!names_to_show.includes(player_name)){
+    if (!Object.keys(important_player_name_colors).includes(player_name)){
       delete winrate_statistic_data.result[player_name]
     }else{
       winrate_statistic_data.result[player_name] *= 100
     }
   }
+
   create_bar_chart(winrate_statistic_data, 'Winrate van spelers')
 
-  //Seperate because of multiple data
-  create_games_over_time_chart()
 
-  const games_played_per_year_statistic_data_promise = makeRequest(api_url + '/statistics/games_played_per_year?filter_expansions_out=true')
-  create_bar_chart(games_played_per_year_statistic_data_promise, 'Spellen gespeeld per jaar')
-
-  const total_collection_cost_statistic_data_promise = makeRequest(api_url+'/statistics/total_collection_cost')
-  create_basic_statistic_chart(total_collection_cost_statistic_data_promise, 'Totale kost van spellen in bezit')
-
-  const amount_of_games_statistic_data_promise = makeRequest(api_url+'/statistics/amount_of_games')
-  create_basic_statistic_chart(amount_of_games_statistic_data_promise, 'Spellen in bezit')
-
-  const most_expensive_games_statistic_data_promise = makeRequest(api_url+'/statistics/most_expensive_games?top_amount=6')
-  create_multiple_boardgame_chart(most_expensive_games_statistic_data_promise, 'Duurste spellen', 'owned_info.price_paid', '\u20AC ')
-
-  const shelf_of_shame_statistic_data_promise = makeRequest(api_url + '/statistics/shelf_of_shame')
-  create_multiple_boardgame_chart(shelf_of_shame_statistic_data_promise)
+  const winrate_over_time_statistic_data = await makeRequest(api_url + '/statistics/winrate_over_time?day_step=30')
+  for (let player_name in winrate_over_time_statistic_data){
+      if (!Object.keys(important_player_name_colors).includes(player_name)){
+        delete winrate_over_time_statistic_data[player_name]
+      }else{
+        for (date_key in winrate_over_time_statistic_data[player_name].result)
+          winrate_over_time_statistic_data[player_name].result[date_key] *= 100
+      }
+    }
+  
+  console.log(winrate_over_time_statistic_data)
+  create_multi_line_chart(winrate_over_time_statistic_data)
 
 }
\ No newline at end of file
diff --git a/templates/statistics.jinja b/templates/statistics.jinja
index ba4a0ff..a6e4cef 100644
--- a/templates/statistics.jinja
+++ b/templates/statistics.jinja
@@ -5,16 +5,6 @@
 
         <div class="container"> 
                 <div id="statistic_row" class="row row-cols-1 row-cols-md-2 g-4 ">
-                        <div class="col">
-                                <div class="card h-100">
-                                        <div id="overtimechartname" class="card-header text-muted">
-                                        </div>
-                                        <div class="card-img-top card-body">
-                                                <canvas class="chart_visual" id="gamesovertimechart"></canvas>
-                                        </div>
-                                        
-                                </div>
-                        </div>
                 </div>
         </div>