Ajouter exemple avec geochart

0d322d70 · GONZALEZ LORENZO Aldo · 027f87e9 · 0d322d70 · 0d322d70 · 0d322d70
Commit 0d322d70 authored 1 year ago by GONZALEZ LORENZO Aldo
--- a/include/js/geochart.js
+++ b/include/js/geochart.js
+/**
+ * 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
--- 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>

--- a/regions.html
+++ b/regions.html
+<!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