diff --git a/include/js/charts.js b/include/js/charts.js
new file mode 100644
index 0000000000000000000000000000000000000000..a76943a3f8a88a5cdae8a13726fa09ddc171da02
--- /dev/null
+++ b/include/js/charts.js
@@ -0,0 +1,49 @@
+// Requête pour obtenir les données du serveur
+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": ["corechart"], "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')
+// Requête SQL
+const query = "SELECT acad_mies, sum(capa_fin) AS places FROM parcoursup GROUP BY acad_mies ORDER BY places DESC"
+httpRequest.send(`query=${encodeURIComponent(query)}`)
+
+function drawChart(result) {
+ // Données de la graphique
+ let data = new google.visualization.DataTable()
+ data.addColumn('string', 'Académie')
+ data.addColumn('number', 'Places')
+ // Utiliser les données du serveur
+ let dataArray = []
+ for (const item of result) {
+ dataArray.push([item.acad_mies, Number(item.places)])
+ }
+ data.addRows(dataArray)
+
+ let piechart_options = {
+ title: 'Pie Chart : Nombre de places dans chaque académie',
+ height: 600
+ }
+ let piechart = new google.visualization.PieChart(document.getElementById('piechart_div'))
+ piechart.draw(data, piechart_options)
+
+ let barchart_options = {
+ title: 'Barchart : Nombre de places dans chaque académie',
+ height: 600,
+ legend: 'none'
+ }
+ let barchart = new google.visualization.BarChart(document.getElementById('barchart_div'))
+ barchart.draw(data, barchart_options)
+}
\ No newline at end of file
diff --git a/include/php/data.php b/include/php/data.php
index ab0924d436a5ed30fd155973bb3f5524f9432b0e..ae3d3ddf3eb6f58bfd9bffcbc9c8dc1613ed3f39 100644
--- a/include/php/data.php
+++ b/include/php/data.php
@@ -1,6 +1,6 @@
<?php
require_once 'functions.php';
-$query = $_GET['query'];
+$query = $_POST['query'];
$dbh = db_connection();
$sth = $dbh->prepare($query);
$sth->execute();
diff --git a/index.php b/index.php
index 24a7fafaf99074397a2807bcd79057b9bc01cab9..10e5ef3aa993cd31839103658d7ee02cb7c8d2e2 100644
--- a/index.php
+++ b/index.php
@@ -13,7 +13,7 @@ include 'include/php/functions.php';
<body>
<h1>SAÉ 303</h1>
<p>
- Concevoir des visualisations de données pour le web et un support animé. Voici quelques exemples, dont un avec une graphique avec Google Charts <a href="test-charts.php">ici</a>.
+ Concevoir des visualisations de données pour le web et un support animé. Voici quelques exemples, dont un avec une graphique avec Google Charts <a href="test-charts.html">ici</a>.
</p>
<section>
<h2>Les BUT avec le plus grand nombre de candidats</h2>
@@ -58,7 +58,6 @@ $sth = $dbh->prepare('SELECT lib_comp_voe_ins, acc_tot_f FROM parcoursup
ORDER BY acc_tot_f DESC LIMIT 5');
$sth->execute();
$result = $sth->fetchAll();
-var_dump($result);
foreach ($result as $row) {
echo '<li>' . $row['lib_comp_voe_ins'] . ' (' . $row['acc_tot_f'] . ' filles)</li>';
}
diff --git a/test-charts.html b/test-charts.html
new file mode 100644
index 0000000000000000000000000000000000000000..b1a745bb351f89b1a7785459faf0e907cab67ee6
--- /dev/null
+++ b/test-charts.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="fr">
+<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.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
+ <title>SAÉ 303</title>
+</head>
+<body>
+ <div class="container">
+ <div class="row">
+ <div class="col-12 col-md-6">
+ <div id="piechart_div"></div>
+ </div>
+ <div class="col-12 col-md-6">
+ <div id="barchart_div"></div>
+ </div>
+ </div>
+ </div>
+
+ <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.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/test-charts.php b/test-charts.php
index e483a4a5124f06bf5d1b5e0bafdba2ca21bd7de3..f132fb64948234e95df7be556cd0b0a4482f2ceb 100644
--- a/test-charts.php
+++ b/test-charts.php
@@ -1,9 +1,3 @@
-<?php
-/**
- * Test d'utilisation de Google Charts
- */
-include 'include/php/functions.php';
-?>
<!DOCTYPE html>
<html lang="fr">
<head>
@@ -17,52 +11,76 @@ include 'include/php/functions.php';
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
- $(document).ready(function() {
- $.ajax({
- url: "include/php/data.php",
- method: "GET",
- data: {
- "query": "SELECT acad_mies, sum(capa_fin) AS places FROM parcoursup GROUP BY acad_mies ORDER BY places DESC"
- },
- dataType: "JSON",
- success: function(result) {
+ const httpRequest = new XMLHttpRequest();
+ httpRequest.onreadystatechange = () => {
+ if (httpRequest.readyState === XMLHttpRequest.DONE) {
+ if (httpRequest.status === 200) {
+ console.debug(result)
+ const response = JSON.parse(httpRequest.responseText);
console.debug(result)
google.charts.load("current", { "packages": ["corechart"], "language": "fr" })
google.charts.setOnLoadCallback(function() {
- drawChart(result)
+ drawChart(response)
})
+ } else {
+ // There was a problem with the request.
+ // For example, the response may have a 404 (Not Found)
+ // or 500 (Internal Server Error) response code.
}
- })
+ } else {
+ // Not ready yet.
+ }
- function drawChart(result) {
- let data = new google.visualization.DataTable()
- data.addColumn('string', 'Académie')
- data.addColumn('number', 'Places')
- let dataArray = []
- for (const item of result) {
- dataArray.push([item.acad_mies, Number(item.places)])
- }
- data.addRows(dataArray)
+ };
+ httpRequest.open('GET', 'include/php/data.php', true);
+ query = "SELECT acad_mies, sum(capa_fin) AS places FROM parcoursup GROUP BY acad_mies ORDER BY places DESC"
+ httpRequest.send(`query=${encodeURIComponent(query)}`);
+ // $(document).ready(function() {
+ // $.ajax({
+ // url: "include/php/data.php",
+ // method: "GET",
+ // data: {
+ // "query": "SELECT acad_mies, sum(capa_fin) AS places FROM parcoursup GROUP BY acad_mies ORDER BY places DESC"
+ // },
+ // dataType: "JSON",
+ // success: function(result) {
+ // console.debug(result)
+ // google.charts.load("current", { "packages": ["corechart"], "language": "fr" })
+ // google.charts.setOnLoadCallback(function() {
+ // drawChart(result)
+ // })
+ // }
+ // })
- let piechart_options = {
- title: 'Pie Chart : Nombre de places dans chaque académie',
- width: 600,
- height: 400
- }
- let piechart = new google.visualization.PieChart(document.getElementById('piechart_div'))
- piechart.draw(data, piechart_options)
+ // function drawChart(result) {
+ // let data = new google.visualization.DataTable()
+ // data.addColumn('string', 'Académie')
+ // data.addColumn('number', 'Places')
+ // let dataArray = []
+ // for (const item of result) {
+ // dataArray.push([item.acad_mies, Number(item.places)])
+ // }
+ // data.addRows(dataArray)
- let barchart_options = {
- title: 'Barchart : Nombre de places dans chaque académie',
- width: 600,
- height: 800,
- legend: 'none'
- }
- let barchart = new google.visualization.BarChart(document.getElementById('barchart_div'))
- barchart.draw(data, barchart_options)
- }
+ // let piechart_options = {
+ // title: 'Pie Chart : Nombre de places dans chaque académie',
+ // width: 600,
+ // height: 400
+ // }
+ // let piechart = new google.visualization.PieChart(document.getElementById('piechart_div'))
+ // piechart.draw(data, piechart_options)
+
+ // let barchart_options = {
+ // title: 'Barchart : Nombre de places dans chaque académie',
+ // width: 600,
+ // height: 800,
+ // legend: 'none'
+ // }
+ // let barchart = new google.visualization.BarChart(document.getElementById('barchart_div'))
+ // barchart.draw(data, barchart_options)
+ // }
- })
+ // })
</script>
</body>
</html>
\ No newline at end of file