diff --git a/include/js/geochart.js b/include/js/geochart.js
new file mode 100644
index 0000000000000000000000000000000000000000..d985945ec5d29e86c3c2f821eb29f5378eed5729
--- /dev/null
+++ b/include/js/geochart.js
@@ -0,0 +1,74 @@
+/**
+ * Fonction pour transformer le nom d'une region
+ * dans un objet JavaScript que Google Charts comprend.
+ */
+function formatter_region(region) {
+ const codes = {
+ "Ile-de-France": 'FR-IDF',
+ "Auvergne-Rhône-Alpes": 'FR-ARA',
+ "Grand Est": 'FR-GES',
+ "Occitanie": 'FR-OCC',
+ "Nouvelle-Aquitaine": 'FR-NAQ',
+ "Hauts-de-France": 'FR-HDF',
+ "Normandie": 'FR-NOR',
+ "Provence Alpes Côte d'Azur": 'FR-PAC',
+ "Bretagne": 'FR-BRE',
+ "Bourgogne-Franche-Comté": 'FR-BFC',
+ "Pays de la Loire": 'FR-PDL',
+ "Centre-Val de Loire": 'FR-CVL',
+ "La Réunion": 'FR-974',
+ "Corse": 'FR-20R',
+ "Guadeloupe": 'FR-971',
+ "Guyane": 'FR-973',
+ "Polynésie française": 'FR-PF',
+ "Martinique": 'FR-972',
+ }
+ return {v: codes[region], f: region}
+}
+
+
+const httpRequest = new XMLHttpRequest()
+httpRequest.onreadystatechange = () => {
+ if (httpRequest.readyState === XMLHttpRequest.DONE) {
+ if (httpRequest.status === 200) {
+ const response = JSON.parse(httpRequest.responseText)
+ google.charts.load("current", { "packages": ["geochart"], "language": "fr" })
+ google.charts.setOnLoadCallback(function() {
+ drawChart(response)
+ })
+ } else {
+ console.log("Erreur de connexion au serveur !")
+ }
+ }
+}
+httpRequest.open('POST', 'include/php/data.php', true)
+httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
+const query = 'SELECT region_etab_aff, count(*) AS count FROM parcoursup WHERE fili = "BUT" GROUP BY region_etab_aff ORDER BY count DESC'
+httpRequest.send(`query=${encodeURIComponent(query)}`) // 4. Envoi de la requête
+
+
+/**
+ * Fonction qui fait un geochart avec les régions de la France
+ */
+function drawChart(result) {
+ let data = new google.visualization.DataTable()
+ data.addColumn("string", "Région")
+ data.addColumn("number", "Nombre des BUT")
+ let dataArray = []
+ for (const item of result) {
+ dataArray.push([formatter_region(item.region_etab_aff), item.count])
+ }
+ data.addRows(dataArray)
+
+ let options = {
+ width: 600,
+ height: 500,
+ displayMode: 'regions',
+ region: 'FR',
+ resolution: 'provinces',
+ geochartVersion: 11,
+ }
+
+ let chart = new google.visualization.GeoChart(document.getElementById("geochart_div"))
+ chart.draw(data, options)
+}
\ No newline at end of file
diff --git a/index.php b/index.php
index 3177cc2fff2623642cd84429a35a12c848938a29..3c6485cc7a37cfe5dbef273f3ad47b0500408bda 100644
--- a/index.php
+++ b/index.php
@@ -19,8 +19,13 @@ include 'include/php/functions.php';
Voici quelques exemples d'utilisation de la base de données.
</p>
<p>
- Aussi, vous trouverez <a href="test-charts.html">un exemple</a> qui utilise Google Charts, et <a href="search.php">un autre exemple</a> avec une barre de recherche.
+ Aussi, vous trouverez
</p>
+ <ul>
+ <li><a href="test-charts.html">un exemple</a> avec deux graphiques utilisant Google Charts</li>
+ <li><a href="regions.html">un exemple</a> avec une graphique avec les régions de l'Hexagone</li>
+ <li><a href="search.php">un exemple</a> avec une barre de recherche</li>
+ </ul>
<section>
<h2>Les BUT avec le plus grand nombre de candidats</h2>
diff --git a/regions.html b/regions.html
new file mode 100644
index 0000000000000000000000000000000000000000..613f8eab23a60fa2b864f34a41136f20fb337e95
--- /dev/null
+++ b/regions.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>SAÉ 303</title>
+</head>
+<body>
+ <h1>Formations en BUT par région</h1>
+ <p></p>
+ <div id="geochart_div"></div>
+
+ <script src="https://www.gstatic.com/charts/loader.js"></script>
+ <script src="include/js/geochart.js" defer></script>
+</body>
+</html>
\ No newline at end of file