Skip to content
Snippets Groups Projects
Commit 8e0fd1da authored by aldo.gonzalez-lorenzo's avatar aldo.gonzalez-lorenzo
Browse files

Utilisation des nouvelles données

parent a52a02c8
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
include/js/charts.js
+ 5
− 4
View file @ 8e0fd1da
...@@ -8,6 +8,7 @@ httpRequest.onreadystatechange = () => { // 2. Définition de ce qu'il faut fair ...@@ -8,6 +8,7 @@ httpRequest.onreadystatechange = () => { // 2. Définition de ce qu'il faut fair
if (httpRequest.status === 200) { if (httpRequest.status === 200) {
// On a reçu la réponse du serveur, on peut générer la graphique // On a reçu la réponse du serveur, on peut générer la graphique
const response = JSON.parse(httpRequest.responseText) const response = JSON.parse(httpRequest.responseText)
console.debug(response)
google.charts.load("current", { "packages": ["corechart"], "language": "fr" }) google.charts.load("current", { "packages": ["corechart"], "language": "fr" })
google.charts.setOnLoadCallback(function() { google.charts.setOnLoadCallback(function() {
drawChart(response) drawChart(response)
...@@ -20,7 +21,7 @@ httpRequest.onreadystatechange = () => { // 2. Définition de ce qu'il faut fair ...@@ -20,7 +21,7 @@ httpRequest.onreadystatechange = () => { // 2. Définition de ce qu'il faut fair
httpRequest.open('POST', 'include/php/data.php', true) // 3. Ouverture et configuration de la requête httpRequest.open('POST', 'include/php/data.php', true) // 3. Ouverture et configuration de la requête
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// Requête SQL // Requête SQL
const query = "SELECT acad_mies, sum(capa_fin) AS places FROM parcoursup GROUP BY acad_mies ORDER BY places DESC" const query = "SELECT country, COUNT(*) AS medals FROM joparis2024 GROUP BY country ORDER BY medals DESC LIMIT 10"
httpRequest.send(`query=${encodeURIComponent(query)}`) // 4. Envoi de la requête httpRequest.send(`query=${encodeURIComponent(query)}`) // 4. Envoi de la requête
...@@ -30,12 +31,12 @@ httpRequest.send(`query=${encodeURIComponent(query)}`) // 4. Envoi de la requêt ...@@ -30,12 +31,12 @@ httpRequest.send(`query=${encodeURIComponent(query)}`) // 4. Envoi de la requêt
function drawChart(result) { function drawChart(result) {
// Données de la graphique // Données de la graphique
let data = new google.visualization.DataTable() let data = new google.visualization.DataTable()
data.addColumn('string', 'Académie') data.addColumn('string', 'Country')
data.addColumn('number', 'Places') data.addColumn('number', 'Medals')
// Utiliser les données du serveur // Utiliser les données du serveur
let dataArray = [] let dataArray = []
for (const item of result) { for (const item of result) {
dataArray.push([item.acad_mies, Number(item.places)]) dataArray.push([item.country, Number(item.medals)])
} }
data.addRows(dataArray) data.addRows(dataArray)
......
include/js/geochart.js
+ 47
− 60
View file @ 8e0fd1da
/**
* 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() const httpRequest = new XMLHttpRequest()
httpRequest.onreadystatechange = () => { httpRequest.onreadystatechange = () => {
if (httpRequest.readyState === XMLHttpRequest.DONE) { if (httpRequest.readyState === XMLHttpRequest.DONE) {
...@@ -43,30 +14,46 @@ httpRequest.onreadystatechange = () => { ...@@ -43,30 +14,46 @@ httpRequest.onreadystatechange = () => {
} }
httpRequest.open('POST', 'include/php/data.php', true) httpRequest.open('POST', 'include/php/data.php', true)
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') 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' const query = 'SELECT country, count(*) AS medals FROM joparis2024 GROUP BY country'
httpRequest.send(`query=${encodeURIComponent(query)}`) // 4. Envoi de la requête httpRequest.send(`query=${encodeURIComponent(query)}`) // 4. Envoi de la requête
/* Fonction pour filtrer les pays d'Europe */
function isCountryInEurope(country) {
const countries = [
"Albania", "Andorra", "Armenia", "Austria", "Azerbaijan", "Belarus",
"Belgium", "Bosnia and Herzegovina", "Bulgaria", "Croatia", "Cyprus",
"Czech Republic", "Denmark", "Estonia", "Finland", "France", "Georgia",
"Germany", "Greece", "Hungary", "Iceland", "Ireland", "Italy", "Kazakhstan",
"Kosovo", "Latvia", "Liechtenstein", "Lithuania", "Luxembourg", "Malta",
"Moldova", "Monaco", "Montenegro", "Netherlands", "North Macedonia",
"Norway", "Poland", "Portugal", "Romania", "Russia", "San Marino",
"Serbia", "Slovakia", "Slovenia", "Spain", "Sweden", "Switzerland",
"Turkey", "Ukraine", "United Kingdom", "Vatican City"
]
return countries.includes(country)
}
/** /**
* Fonction qui fait un geochart avec les régions de la France * Fonction qui fait un geochart avec les pays d'Europe
*/ */
function drawChart(result) { function drawChart(result) {
let data = new google.visualization.DataTable() let data = new google.visualization.DataTable()
data.addColumn("string", "Région") console.debug(result)
data.addColumn("number", "Nombre des BUT") data.addColumn("string", "Pays")
data.addColumn("number", "Nombre de médailles")
let dataArray = [] let dataArray = []
for (const item of result) { for (const item of result) {
dataArray.push([formatter_region(item.region_etab_aff), item.count]) if (isCountryInEurope(item.country)) {
dataArray.push([item.country, item.medals])
}
} }
data.addRows(dataArray) data.addRows(dataArray)
let options = { let options = {
width: 600, width: 600,
height: 500, height: 500,
displayMode: 'regions', region: '150', // Europe
region: 'FR',
resolution: 'provinces',
geochartVersion: 11,
} }
let chart = new google.visualization.GeoChart(document.getElementById("geochart_div")) let chart = new google.visualization.GeoChart(document.getElementById("geochart_div"))
......
index.php
+ 14
− 28
View file @ 8e0fd1da
...@@ -23,55 +23,41 @@ include 'include/php/functions.php'; ...@@ -23,55 +23,41 @@ include 'include/php/functions.php';
</p> </p>
<ul> <ul>
<li><a href="test-charts.html">un exemple</a> avec deux graphiques utilisant Google Charts</li> <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="test-geochart.html">un exemple</a> avec une graphique avec les pays d'Europe</li>
<li><a href="search.php">un exemple</a> avec une barre de recherche</li> <li><a href="search.php">un exemple</a> avec une barre de recherche</li>
</ul> </ul>
<section> <section>
<h2>Les BUT avec le plus grand nombre de candidats</h2> <h2>Les pays avec le plus de médailles</h2>
<ol> <ol>
<?php <?php
$dbh = db_connection(); $dbh = db_connection();
$sth = $dbh->prepare('SELECT lib_comp_voe_ins, voe_tot FROM parcoursup $sth = $dbh->prepare('SELECT country, COUNT(*) AS medals FROM joparis2024
WHERE fili = "BUT" GROUP BY country
ORDER BY voe_tot DESC LIMIT 5'); ORDER BY medals DESC
LIMIT 5');
$sth->execute(); $sth->execute();
$result = $sth->fetchAll(); $result = $sth->fetchAll();
foreach ($result as $row) { foreach ($result as $row) {
echo '<li>' . $row['lib_comp_voe_ins'] . ' (<em>' . $row['voe_tot'] . ' candidats</em>)</li>'; echo '<li>' . $row['country'] . ' (<em>' . $row['medals'] . ' médailles</em>)</li>';
} }
?> ?>
</ol> </ol>
</section> </section>
<section> <section>
<h2>Les villes avec le plus de BTS</h2> <h2>Les athlètes avec le plus de médailles</h2>
<ol> <ol>
<?php <?php
$sth = $dbh->prepare('SELECT ville_etab, count(*) AS count FROM parcoursup $sth = $dbh->prepare('SELECT name, COUNT(*) AS medals FROM joparis2024
WHERE fili = "BTS" WHERE gender != "X"
GROUP BY ville_etab GROUP BY name
ORDER BY count DESC LIMIT 5'); ORDER BY medals DESC
LIMIT 5');
$sth->execute(); $sth->execute();
$result = $sth->fetchAll(); $result = $sth->fetchAll();
foreach ($result as $row) { foreach ($result as $row) {
echo '<li>' . $row['ville_etab'] . ' (<em>' . $row['count'] . ' BTS</em>)</li>'; echo '<li>' . $row['name'] . ' (<em>' . $row['medals'] . ' médailles</em>)</li>';
}
?>
</ol>
</section>
<section>
<h2>Les BUT Informatique avec le plus grand nombre de candidates admises</h2>
<ol>
<?php
$sth = $dbh->prepare('SELECT lib_comp_voe_ins, acc_tot_f, acc_tot FROM parcoursup
WHERE lib_for_voe_ins LIKE "BUT - Informatique%"
ORDER BY acc_tot_f DESC LIMIT 5');
$sth->execute();
$result = $sth->fetchAll();
foreach ($result as $row) {
echo '<li>' . $row['lib_comp_voe_ins'] . ' (<em>' . $row['acc_tot_f'] . ' étudiantes sur ' . $row['acc_tot'] . '</em>)</li>';
} }
?> ?>
</ol> </ol>
......
search.php
+ 19
− 16
View file @ 8e0fd1da
<?php <?php
/** /**
* Barre de recherche de formations avec affichage d'informations * Barre de recherche de sports avec affichage d'informations
* *
* L'utilisateur choisit une formation dans le formulaire. * L'utilisateur choisit une formation dans le formulaire.
* Le formulaire envoie cette information vers la même page, et on * Le formulaire envoie cette information vers la même page, et on
...@@ -20,18 +20,19 @@ include 'include/php/functions.php'; ...@@ -20,18 +20,19 @@ include 'include/php/functions.php';
<form method="get" action="search.php"> <form method="get" action="search.php">
<label> <label>
Choisis une formation&nbsp;: Choisis une formation&nbsp;:
<input list="formations" name="formation" style="width: 400px"> <input list="sports" name="event" style="width: 400px">
</label> </label>
<datalist id="formations"> <datalist id="sports">
<?php <?php
// On remplit l'élément datalist (les suggestions pour le formulaire) avec les noms des formations // On remplit l'élément datalist (les suggestions pour le formulaire) avec les noms des formations
$dbh = db_connection(); $dbh = db_connection();
$sth = $dbh->prepare('SELECT lib_comp_voe_ins FROM parcoursup $sth = $dbh->prepare('SELECT event FROM joparis2024
ORDER BY lib_comp_voe_ins ASC'); GROUP BY event
ORDER BY event ASC');
$sth->execute(); $sth->execute();
$result = $sth->fetchAll(); $result = $sth->fetchAll();
foreach ($result as $row) { foreach ($result as $row) {
echo '<option value="' . $row['lib_comp_voe_ins'] . '">'; echo '<option value="' . $row['event'] . '">';
} }
?> ?>
</datalist> </datalist>
...@@ -42,21 +43,23 @@ foreach ($result as $row) { ...@@ -42,21 +43,23 @@ foreach ($result as $row) {
// Si $_GET['formation'] est défini, ça veut dire qu'on est arrivé dans cette page // Si $_GET['formation'] est défini, ça veut dire qu'on est arrivé dans cette page
// après avoir sélectionné une formation. Dans ce cas, on affiche les informations // après avoir sélectionné une formation. Dans ce cas, on affiche les informations
// de cette formation // de cette formation
if (isset($_GET['formation'])) { if (isset($_GET['event'])) {
$sth = $dbh->prepare('SELECT capa_fin, voe_tot FROM parcoursup $sth = $dbh->prepare('SELECT name, country, medal_code, event FROM joparis2024
WHERE lib_comp_voe_ins = :formation'); WHERE event = :event
ORDER BY medal_code');
$donnees = [ $donnees = [
"formation" => $_GET['formation'] "event" => $_GET['event']
]; ];
$sth->execute($donnees); $sth->execute($donnees);
$result = $sth->fetchAll(); $result = $sth->fetchAll();
if (count($result) == 1) { echo "<p>Podium de <em>" . $_GET['event'] . "</em></p>";
// Si on obtient un résultat, on affiche les informations echo "<ul>";
echo "<h2>" . $_GET['formation'] . "</h2>"; echo "<li>Or : " . $result[0]['name'] . " (" . $result[1]['country'] . ")</li>";
echo "<p>" . $result[0]['voe_tot'] . " candidats pour " . $result[0]['capa_fin'] . " places</p>"; echo "<li>Argent : " . $result[1]['name'] . " (" . $result[1]['country'] . ")</li>";
} echo "<li>Bronze : " . $result[2]['name'] . " (" . $result[2]['country'] . ")</li>";
echo "</ul>";
} else { } else {
echo "<p>Veuillez choisir une formation</p>"; echo "<p>Veuillez choisir une autre compétition</p>";
} }
?> ?>
</body> </body>
......
test-charts.html
+ 2
− 3
View file @ 8e0fd1da
...@@ -3,8 +3,7 @@ ...@@ -3,8 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <title>SAÉ 303</title>
<title>SAÉ 303</title>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
...@@ -20,6 +19,6 @@ ...@@ -20,6 +19,6 @@
<script src="https://www.gstatic.com/charts/loader.js"></script> <script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="include/js/charts.js" defer></script> <script src="include/js/charts.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body> </body>
</html> </html>
\ No newline at end of file
test-geochart.html 0 → 100644
+ 15
− 0
View file @ 8e0fd1da
<!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>Nombre de médailles par pays</h1>
<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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment