diff --git a/html/projet_detail.html b/html/projet_detail.html
index 2ebe6ac..168703c 100644
--- a/html/projet_detail.html
+++ b/html/projet_detail.html
@@ -34,16 +34,13 @@
       </div>
       <div class="row">
         <div class="col-md-6">
-          <table class="table table-striped" id="table-metrics">
-            <thead>
-              <tr>
-                <th>date</th>
-                <th>Hygrométrie</th>
-                <th>température</th>
-              </tr>
-            </thead>
-            <tbody></tbody>
-          </table>
+          <select name="metriques" id="metric_selector">
+            <option value="hygrometry">hygrométrie</option>
+            <option value="temperature">Température</option>
+          </select>
+          <div id="metric_viewer_placeholder">
+            <canvas id="metric_viewer"></canvas>
+          </div>
         </div>
         <div class="col-md-6">
           <div id="content1" class="hiddenTable">
@@ -79,6 +76,7 @@
     <footer>
       <p>&copy; 2024 Timelapse. All rights reserved.</p>
     </footer>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="../js/globals.js"></script>
     <script src="../js/projet_detail.js"></script>
diff --git a/js/projet_detail.js b/js/projet_detail.js
index 86b1f0f..312b53f 100644
--- a/js/projet_detail.js
+++ b/js/projet_detail.js
@@ -1,18 +1,7 @@
-function display_metrics(metrics_datas) {
-  // Get data from API and then generate HTML code to display the data in a table
-  const table = document.getElementById("table-metrics");
-  let datas = `
-    <tr><th>Date</th> <th>Température</th> <th>Hygrométrie</th>
-    </tr>`;
-  for (let i = 0; i < metrics_datas.length; i++) {
-    datas += `
-      <tr>
-        <th>${formatDate(metrics_datas[i].date_metrique)}</th>
-        <th>${metrics_datas[i].temperature}</th>
-        <th>${metrics_datas[i].hygrometrie}</th>
-      </tr>`;
-  }
-  table.innerHTML = datas;
+let myChart; // Declare a global variable to hold the chart instance
+
+function display_metrics() {
+  // Implementation for display_metrics function
 }
 
 document.addEventListener("DOMContentLoaded", () => {
@@ -33,6 +22,12 @@ document.addEventListener("DOMContentLoaded", () => {
   document.getElementById("name_project").innerHTML =
     global_project_list[projectId - 1].titre;
 
+  generateViewMetric();
+
+  document.getElementById("metric_selector").addEventListener("change", () => {
+    generateViewMetric();
+  });
+
   fetch("https://timelapse.kerboul.me/api/smile")
     .then((response) => response.blob())
     .then((blob) => {
@@ -63,11 +58,42 @@ document.addEventListener("DOMContentLoaded", () => {
     if (tableImage.classList.contains("hiddenTable")) {
       tableImage.classList.remove("hiddenTable");
       tableImage.classList.add("full-view");
-      document.getElementById("toggle-view").innerHTML="See first images"
+      document.getElementById("toggle-view").innerHTML = "See first images";
     } else {
       tableImage.classList.remove("full-view");
       tableImage.classList.add("hiddenTable");
-      document.getElementById("toggle-view").innerHTML="See all images"
+      document.getElementById("toggle-view").innerHTML = "See all images";
     }
   });
 });
+
+function generateViewMetric() {
+  const ctx = document.getElementById("metric_viewer").getContext("2d");
+
+  // Destroy the existing chart instance if it exists
+  if (myChart) {
+    myChart.destroy();
+  }
+
+  // Create a new chart instance
+  myChart = new Chart(ctx, {
+    type: "bar",
+    data: {
+      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+      datasets: [
+        {
+          label: "# of Votes",
+          data: [12, 19, 3, 5, 2, 3],
+          borderWidth: 1,
+        },
+      ],
+    },
+    options: {
+      scales: {
+        y: {
+          beginAtZero: true,
+        },
+      },
+    },
+  });
+}