diff --git a/site/coa/stats/index.html b/site/coa/stats/index.html
index e06272d..1dc927b 100644
--- a/site/coa/stats/index.html
+++ b/site/coa/stats/index.html
@@ -2,6 +2,7 @@
     <head>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>        
+        <script src="stats.js"></script>
     </head>
     <body>
         Statistiques du <a href="https://coa.crapaud-fou.org">chat</a> (aussi connu sous le nom de mare aux crapauds) :
@@ -9,157 +10,5 @@
         <canvas id="byTsunamy"></canvas>
         <canvas id="usersByChannel"></canvas>
         <canvas id="usersGlobal"></canvas>
-        <script>
-        
-        $.getJSON("../../data/chat_stat_monthly.json", function (datas){
-            updated = datas['updated']
-        
-            labels = datas['labels'];
-        
-            var ctx = $('#byChannel');
-            var chart = new Chart(ctx, {
-                // The type of chart we want to create
-                type: 'bar',
-        
-                // The data for our dataset
-                data: {
-                    labels: labels,
-                    datasets: datas['messagesByChannel'],
-                },
-        
-                // Configuration options go here
-                options: {
-                    legend: {
-                        display: false
-                    },
-                    title: {
-                        display: true,
-                        text: "Nombre de message par canaux (" + updated + ")",
-                        position: "top"
-                    },
-                    responsive: true,
-                    scales: {
-                        xAxes: [{
-                            stacked: true
-                        }],
-                        yAxes: [{
-                            stacked: true,
-                            ticks: {
-                                stepSize: 500
-                            }
-                        }]
-                    }
-                }
-            });
-        
-            var ctx2 = $("#byTsunamy");
-            var chart2 = new Chart(ctx2, {
-                // The type of chart we want to create
-                type: 'bar',
-        
-                // The data for our dataset
-                data: {
-                    labels: labels,
-                    datasets: datas['messagesByTsunamy'],
-                },
-        
-                // Configuration options go here
-                options: {
-                    legend: {
-                        display: false
-                    },
-                    title: {
-                        display: true,
-                        text: "Nombre de message par Tsunami (" + updated + ")",
-                        position: "top"
-                    },
-                    responsive: true,
-                    scales: {
-                        xAxes: [{
-                            stacked: true
-                        }],
-                        yAxes: [{
-                            stacked: true,
-                            ticks: {
-                                stepSize: 500
-                            }
-                        }]
-                    }
-                }
-            });
-        
-            var ctx3 = $("#usersByChannel");
-            var chart3 = new Chart(ctx3, {
-                // The type of chart we want to create
-                type: 'bar',
-        
-                // The data for our dataset
-                data: {
-                    labels: labels,
-                    datasets: datas['usersByChannel'],
-                },
-        
-                // Configuration options go here
-                options: {
-                    legend: {
-                        display: false
-                    },
-                    title: {
-                        display: true,
-                        text: "Nombre d'utilisateur actifs par canaux (" + updated + ")",
-                        position: "top"
-                    },
-                    responsive: true,
-                    scales: {
-                        xAxes: [{
-                            stacked: true
-                        }],
-                        yAxes: [{
-                            stacked: true,
-                            ticks: {
-                                stepSize: 50
-                            }
-                        }]
-                    }
-                }
-            });
-        
-            var ctx4 = $("#usersGlobal");
-            var chart4 = new Chart(ctx4, {
-                // The type of chart we want to create
-                type: 'bar',
-        
-                // The data for our dataset
-                data: {
-                    labels: labels,
-                    datasets: datas['usersGlobal'],
-                },
-        
-                // Configuration options go here
-                options: {
-                    legend: {
-                        display: false
-                    },
-                    title: {
-                        display: true,
-                        text: "Nombre d'utilisateur actifs (" + updated + ")",
-                        position: "top"
-                    },
-                    responsive: true,
-                    scales: {
-                        xAxes: [{
-                            stacked: true
-                        }],
-                        yAxes: [{
-                            stacked: true,
-                            ticks: {
-                                stepSize: 50
-                            }
-                        }]
-                    }
-                }
-            });
-        });
-        </script>
     </body>
 </html>
diff --git a/site/coa/stats/stats.js b/site/coa/stats/stats.js
new file mode 100644
index 0000000..162f39b
--- /dev/null
+++ b/site/coa/stats/stats.js
@@ -0,0 +1,52 @@
+$(document).ready(function () {
+    $.getJSON("../../data/chat_stat_monthly.json", function (datas) {
+        updated = datas['updated']
+
+        labels = datas['labels'];
+
+        graphDisplay($('#byChannel'), datas['messagesByChannel'], "Nombre de message par canaux (" + updated + ")");
+        
+        graphDisplay($('#byTsunamy'), datas['messagesByTsunamy'], "Nombre de message par Tsunami (" + updated + ")");
+
+        graphDisplay($("#usersByChannel"), datas['usersByChannel'], "Nombre d'utilisateur actifs par canaux (" + updated + ")");
+
+        graphDisplay($("#usersGlobal"), datas['usersGlobal'], "Nombre d'utilisateur actifs (" + updated + ")");
+    });
+});
+
+function graphDisplay(ctx, datas, title) {
+    var chart = new Chart(ctx, {
+        // The type of chart we want to create
+        type: 'bar',
+
+        // The data for our dataset
+        data: {
+            labels: labels,
+            datasets: datas,
+        },
+
+        // Configuration options go here
+        options: {
+            legend: {
+                display: false
+            },
+            title: {
+                display: true,
+                text: title,
+                position: "top"
+            },
+            responsive: true,
+            scales: {
+                xAxes: [{
+                    stacked: true
+                }],
+                yAxes: [{
+                    stacked: true,
+                    ticks: {
+                        stepSize: 500
+                    }
+                }]
+            }
+        }
+    });
+}
\ No newline at end of file
