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
No related branches found
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
if (httpRequest.status === 200) {
// On a reçu la réponse du serveur, on peut générer la graphique
const response = JSON.parse(httpRequest.responseText)
console.debug(response)
google.charts.load("current", { "packages": ["corechart"], "language": "fr" })
google.charts.setOnLoadCallback(function() {
drawChart(response)
......@@ -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.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 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
......@@ -30,12 +31,12 @@ httpRequest.send(`query=${encodeURIComponent(query)}`) // 4. Envoi de la requêt
function drawChart(result) {
// Données de la graphique
let data = new google.visualization.DataTable()
data.addColumn('string', 'Académie')
data.addColumn('number', 'Places')
data.addColumn('string', 'Country')
data.addColumn('number', 'Medals')
// Utiliser les données du serveur
let dataArray = []
for (const item of result) {
dataArray.push([item.acad_mies, Number(item.places)])
dataArray.push([item.country, Number(item.medals)])
}
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()
httpRequest.onreadystatechange = () => {
if (httpRequest.readyState === XMLHttpRequest.DONE) {
......@@ -43,30 +14,46 @@ httpRequest.onreadystatechange = () => {
}
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'
const query = 'SELECT country, count(*) AS medals FROM joparis2024 GROUP BY country'
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) {
let data = new google.visualization.DataTable()
data.addColumn("string", "Région")
data.addColumn("number", "Nombre des BUT")
console.debug(result)
data.addColumn("string", "Pays")
data.addColumn("number", "Nombre de médailles")
let dataArray = []
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)
let options = {
width: 600,
height: 500,
displayMode: 'regions',
region: 'FR',
resolution: 'provinces',
geochartVersion: 11,
region: '150', // Europe
}
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';
</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="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>
</ul>
<section>
<h2>Les BUT avec le plus grand nombre de candidats</h2>
<h2>Les pays avec le plus de médailles</h2>
<ol>
<?php
$dbh = db_connection();
$sth = $dbh->prepare('SELECT lib_comp_voe_ins, voe_tot FROM parcoursup
WHERE fili = "BUT"
ORDER BY voe_tot DESC LIMIT 5');
$sth = $dbh->prepare('SELECT country, COUNT(*) AS medals FROM joparis2024
GROUP BY country
ORDER BY medals DESC
LIMIT 5');
$sth->execute();
$result = $sth->fetchAll();
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>
</section>
<section>
<h2>Les villes avec le plus de BTS</h2>
<h2>Les athlètes avec le plus de médailles</h2>
<ol>
<?php
$sth = $dbh->prepare('SELECT ville_etab, count(*) AS count FROM parcoursup
WHERE fili = "BTS"
GROUP BY ville_etab
ORDER BY count DESC LIMIT 5');
$sth = $dbh->prepare('SELECT name, COUNT(*) AS medals FROM joparis2024
WHERE gender != "X"
GROUP BY name
ORDER BY medals DESC
LIMIT 5');
$sth->execute();
$result = $sth->fetchAll();
foreach ($result as $row) {
echo '<li>' . $row['ville_etab'] . ' (<em>' . $row['count'] . ' BTS</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>';
echo '<li>' . $row['name'] . ' (<em>' . $row['medals'] . ' médailles</em>)</li>';
}
?>
</ol>
......
search.php
+ 19
− 16
View file @ 8e0fd1da
<?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.
* Le formulaire envoie cette information vers la même page, et on
......@@ -20,18 +20,19 @@ include 'include/php/functions.php';
<form method="get" action="search.php">
<label>
Choisis une formation&nbsp;:
<input list="formations" name="formation" style="width: 400px">
<input list="sports" name="event" style="width: 400px">
</label>
<datalist id="formations">
<datalist id="sports">
<?php
// On remplit l'élément datalist (les suggestions pour le formulaire) avec les noms des formations
$dbh = db_connection();
$sth = $dbh->prepare('SELECT lib_comp_voe_ins FROM parcoursup
ORDER BY lib_comp_voe_ins ASC');
$sth = $dbh->prepare('SELECT event FROM joparis2024
GROUP BY event
ORDER BY event ASC');
$sth->execute();
$result = $sth->fetchAll();
foreach ($result as $row) {
echo '<option value="' . $row['lib_comp_voe_ins'] . '">';
echo '<option value="' . $row['event'] . '">';
}
?>
</datalist>
......@@ -42,21 +43,23 @@ foreach ($result as $row) {
// 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
// de cette formation
if (isset($_GET['formation'])) {
$sth = $dbh->prepare('SELECT capa_fin, voe_tot FROM parcoursup
WHERE lib_comp_voe_ins = :formation');
if (isset($_GET['event'])) {
$sth = $dbh->prepare('SELECT name, country, medal_code, event FROM joparis2024
WHERE event = :event
ORDER BY medal_code');
$donnees = [
"formation" => $_GET['formation']
"event" => $_GET['event']
];
$sth->execute($donnees);
$result = $sth->fetchAll();
if (count($result) == 1) {
// Si on obtient un résultat, on affiche les informations
echo "<h2>" . $_GET['formation'] . "</h2>";
echo "<p>" . $result[0]['voe_tot'] . " candidats pour " . $result[0]['capa_fin'] . " places</p>";
}
echo "<p>Podium de <em>" . $_GET['event'] . "</em></p>";
echo "<ul>";
echo "<li>Or : " . $result[0]['name'] . " (" . $result[1]['country'] . ")</li>";
echo "<li>Argent : " . $result[1]['name'] . " (" . $result[1]['country'] . ")</li>";
echo "<li>Bronze : " . $result[2]['name'] . " (" . $result[2]['country'] . ")</li>";
echo "</ul>";
} else {
echo "<p>Veuillez choisir une formation</p>";
echo "<p>Veuillez choisir une autre compétition</p>";
}
?>
</body>
......
test-charts.html
+ 2
− 3
View file @ 8e0fd1da
......@@ -3,8 +3,7 @@
<head>
<meta charset="utf-8">
<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">
<title>SAÉ 303</title>
<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>
</head>
<body>
<div class="container">
......@@ -20,6 +19,6 @@
<script src="https://www.gstatic.com/charts/loader.js"></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>
</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 register or to comment