-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
b85d84b
commit 90c8f6d
Showing
8 changed files
with
270 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,64 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<title>Densité des Arbres par Arrondissement</title> | ||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | ||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | ||
</head> | ||
<body> | ||
<h1>Densité des Arbres par Arrondissement</h1> | ||
|
||
<!-- Canvas pour le graphique à barres --> | ||
<canvas id="densityChart" width="400" height="200"></canvas> | ||
|
||
<script> | ||
$(document).ready(function() { | ||
$.ajax({ | ||
url: '/arbres-density', // Endpoint pour récupérer la densité des arbres par arrondissement | ||
method: 'GET', | ||
success: function(data) { | ||
var arrondissements = Object.keys(data); | ||
var densites = Object.values(data); | ||
|
||
var ctx = document.getElementById("densityChart").getContext("2d"); | ||
|
||
var densityChart = new Chart(ctx, { | ||
type: 'bar', | ||
data: { | ||
labels: arrondissements, | ||
datasets: [{ | ||
label: 'Densité', | ||
data: densites, | ||
backgroundColor: 'rgba(75, 192, 192, 0.2)', | ||
borderColor: 'rgba(75, 192, 192, 1)', | ||
borderWidth: 1 | ||
}] | ||
}, | ||
options: { | ||
scales: { | ||
y: { | ||
beginAtZero: true, | ||
title: { | ||
display: true, | ||
text: 'Densité' | ||
} | ||
}, | ||
x: { | ||
title: { | ||
display: true, | ||
text: 'Arrondissement' | ||
} | ||
} | ||
} | ||
} | ||
}); | ||
}, | ||
error: function() { | ||
alert("Erreur lors du chargement des données de densité."); | ||
} | ||
}); | ||
}); | ||
</script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,93 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<title>Genres d'arbres et photos</title> | ||
<style> | ||
body { | ||
font-family: Arial, sans-serif; | ||
background-color: #f2f2f2; | ||
margin: 0; | ||
padding: 0; | ||
} | ||
|
||
h1 { | ||
text-align: center; | ||
margin-top: 20px; | ||
} | ||
|
||
table { | ||
width: 80%; | ||
margin: 0 auto; | ||
border-collapse: collapse; | ||
background-color: #fff; | ||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | ||
} | ||
|
||
th, td { | ||
padding: 12px 15px; | ||
text-align: left; | ||
} | ||
|
||
th { | ||
background-color: #f2f2f2; | ||
font-weight: bold; | ||
} | ||
|
||
tr:nth-child(even) { | ||
background-color: #f5f5f5; | ||
} | ||
|
||
img { | ||
max-width: 100px; | ||
max-height: 100px; | ||
display: block; | ||
margin: 0 auto; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<h1>Genres d'arbres et leurs photos</h1> | ||
<table> | ||
<thead> | ||
<tr> | ||
<th>Genre d'arbre</th> | ||
<th>Photo</th> | ||
</tr> | ||
</thead> | ||
<tbody id="table-body"> | ||
<!-- Les données seront affichées ici --> | ||
</tbody> | ||
</table> | ||
|
||
<script> | ||
// Utilisation de JavaScript pour récupérer les données depuis le contrôleur | ||
fetch("/arbres-genres-photos") | ||
.then(response => response.json()) | ||
.then(data => { | ||
const tableBody = document.getElementById("table-body"); | ||
|
||
data.forEach(arbre => { | ||
const row = document.createElement("tr"); | ||
const genreCell = document.createElement("td"); | ||
const photoCell = document.createElement("td"); | ||
const img = document.createElement("img"); | ||
|
||
genreCell.textContent = arbre.arbresGenre; | ||
img.src = arbre.comUrlPhoto1; | ||
img.alt = "Photo de l'arbre"; | ||
|
||
photoCell.appendChild(img); | ||
|
||
row.appendChild(genreCell); | ||
row.appendChild(photoCell); | ||
|
||
tableBody.appendChild(row); | ||
}); | ||
}) | ||
.catch(error => { | ||
console.error(error); | ||
}); | ||
</script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<title>Pie Chart des Genres d'Arbres</title> | ||
<!-- Inclure la bibliothèque Chart.js --> | ||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> | ||
</head> | ||
<body> | ||
<h1>Pie Chart des Genres d'Arbres</h1> | ||
<div style="width: 80%; margin: 0 auto;"> | ||
<!-- Créer un élément canvas pour le graphique --> | ||
<canvas id="pieChart"></canvas> | ||
</div> | ||
|
||
<!-- JavaScript pour créer la pie chart --> | ||
<script> | ||
// Récupération des données depuis le contrôleur | ||
fetch("/pie-chart") | ||
.then(response => response.json()) | ||
.then(data => { | ||
const genres = data.genres; | ||
const counts = data.counts; | ||
|
||
// Création de la pie chart | ||
const ctx = document.getElementById('pieChart').getContext('2d'); | ||
const pieChart = new Chart(ctx, { | ||
type: 'pie', | ||
data: { | ||
labels: genres, // Labels des genres | ||
datasets: [{ | ||
data: counts, // Données des genres | ||
backgroundColor: [ | ||
'rgba(255, 99, 132, 0.7)', | ||
'rgba(54, 162, 235, 0.7)', | ||
'rgba(255, 206, 86, 0.7)', | ||
'rgba(75, 192, 192, 0.7)', | ||
'rgba(153, 102, 255, 0.7)', | ||
'rgba(255, 159, 64, 0.7)', | ||
'rgba(255, 99, 132, 0.7)', | ||
], | ||
borderColor: [ | ||
'rgba(255, 99, 132, 1)', | ||
'rgba(54, 162, 235, 1)', | ||
'rgba(255, 206, 86, 1)', | ||
'rgba(75, 192, 192, 1)', | ||
'rgba(153, 102, 255, 1)', | ||
'rgba(255, 159, 64, 1)', | ||
'rgba(255, 99, 132, 1)', | ||
], | ||
borderWidth: 1, | ||
}], | ||
}, | ||
}); | ||
}) | ||
.catch(error => { | ||
console.error(error); | ||
}); | ||
</script> | ||
</body> | ||
</html> |