Skip to content
Snippets Groups Projects
Commit bb92490a authored by Aldo Gonzalez-Lorenzo's avatar Aldo Gonzalez-Lorenzo
Browse files

AJAX with vanilla JavaScript

parent ccd23a19
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
include/js/charts.js 0 → 100644
+ 49
− 0
View file @ bb92490a
// 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
include/php/data.php
+ 1
− 1
View file @ bb92490a
<?php <?php
require_once 'functions.php'; require_once 'functions.php';
$query = $_GET['query']; $query = $_POST['query'];
$dbh = db_connection(); $dbh = db_connection();
$sth = $dbh->prepare($query); $sth = $dbh->prepare($query);
$sth->execute(); $sth->execute();
......
index.php
+ 1
− 2
View file @ bb92490a
...@@ -13,7 +13,7 @@ include 'include/php/functions.php'; ...@@ -13,7 +13,7 @@ include 'include/php/functions.php';
<body> <body>
<h1>SAÉ 303</h1> <h1>SAÉ 303</h1>
<p> <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> </p>
<section> <section>
<h2>Les BUT avec le plus grand nombre de candidats</h2> <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 ...@@ -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'); ORDER BY acc_tot_f DESC LIMIT 5');
$sth->execute(); $sth->execute();
$result = $sth->fetchAll(); $result = $sth->fetchAll();
var_dump($result);
foreach ($result as $row) { foreach ($result as $row) {
echo '<li>' . $row['lib_comp_voe_ins'] . ' (' . $row['acc_tot_f'] . ' filles)</li>'; echo '<li>' . $row['lib_comp_voe_ins'] . ' (' . $row['acc_tot_f'] . ' filles)</li>';
} }
......
test-charts.html 0 → 100644
+ 25
− 0
View file @ bb92490a
<!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
test-charts.php
+ 61
− 43
View file @ bb92490a
<?php
/**
* Test d'utilisation de Google Charts
*/
include 'include/php/functions.php';
?>
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
...@@ -17,52 +11,76 @@ include 'include/php/functions.php'; ...@@ -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://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script> <script src="https://www.gstatic.com/charts/loader.js"></script>
<script> <script>
$(document).ready(function() { const httpRequest = new XMLHttpRequest();
$.ajax({ httpRequest.onreadystatechange = () => {
url: "include/php/data.php", if (httpRequest.readyState === XMLHttpRequest.DONE) {
method: "GET", if (httpRequest.status === 200) {
data: { console.debug(result)
"query": "SELECT acad_mies, sum(capa_fin) AS places FROM parcoursup GROUP BY acad_mies ORDER BY places DESC" const response = JSON.parse(httpRequest.responseText);
},
dataType: "JSON",
success: function(result) {
console.debug(result) console.debug(result)
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(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)
let piechart_options = { };
title: 'Pie Chart : Nombre de places dans chaque académie', httpRequest.open('GET', 'include/php/data.php', true);
width: 600, query = "SELECT acad_mies, sum(capa_fin) AS places FROM parcoursup GROUP BY acad_mies ORDER BY places DESC"
height: 400 httpRequest.send(`query=${encodeURIComponent(query)}`);
} // $(document).ready(function() {
let piechart = new google.visualization.PieChart(document.getElementById('piechart_div')) // $.ajax({
piechart.draw(data, piechart_options) // 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 barchart_options = { // function drawChart(result) {
title: 'Barchart : Nombre de places dans chaque académie', // let data = new google.visualization.DataTable()
width: 600, // data.addColumn('string', 'Académie')
height: 800, // data.addColumn('number', 'Places')
legend: 'none' // let dataArray = []
} // for (const item of result) {
let barchart = new google.visualization.BarChart(document.getElementById('barchart_div')) // dataArray.push([item.acad_mies, Number(item.places)])
barchart.draw(data, barchart_options) // }
} // data.addRows(dataArray)
}) // 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> </script>
</body> </body>
</html> </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