2016-05-22 13:20:49 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>Chart du sexe (HOMME/FEMME)</title>
|
|
|
|
|
<script type='text/javascript' src='/f/js/api-min/js/lib'></script> <!-- Gestion des transactions avec le serveur -->
|
|
|
|
|
<script type='text/javascript' src='/f/js/_charts-min/js/lib'></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body style='display: flex; flex-direction: row; justify-content: space-around; flex-wrap: wrap;'>
|
|
|
|
|
|
|
|
|
|
<canvas id="direction" width="400" height="400"></canvas>
|
|
|
|
|
<canvas id="type" width="400" height="400"></canvas>
|
|
|
|
|
<canvas id="sexe" width="400" height="400"></canvas>
|
2016-05-22 15:36:49 +00:00
|
|
|
<canvas id="age" width="400" height="400"></canvas>
|
2016-05-22 13:20:49 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script type='text/javascript'>
|
|
|
|
|
var api = new APIClass('/api/');
|
|
|
|
|
|
|
|
|
|
var direction = document.getElementById('direction');
|
|
|
|
|
var type = document.getElementById('type');
|
|
|
|
|
var sexe = document.getElementById('sexe');
|
|
|
|
|
|
|
|
|
|
/* [0] Paramètres globaux
|
|
|
|
|
=========================================================*/
|
|
|
|
|
Chart.defaults.global.responsive = false;
|
|
|
|
|
|
2016-05-22 15:36:49 +00:00
|
|
|
subject = 273;
|
|
|
|
|
|
2016-05-22 13:20:49 +00:00
|
|
|
|
|
|
|
|
/* [1] On récupére les données SEXE
|
|
|
|
|
=========================================================*/
|
|
|
|
|
/* (1) On rédige la requête */
|
|
|
|
|
var request = {
|
|
|
|
|
path: 'chart/sexe',
|
2016-05-22 15:36:49 +00:00
|
|
|
subject: subject
|
2016-05-22 13:20:49 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* (2) On lance la requête */
|
|
|
|
|
api.send(request, function(response){
|
|
|
|
|
/* (3) Si erreur, on quitte */
|
|
|
|
|
if( response.ModuleError != 0 )
|
|
|
|
|
return false;
|
|
|
|
|
|
|
|
|
|
/* [2] On construit les données
|
|
|
|
|
=========================================================*/
|
|
|
|
|
var data = {
|
|
|
|
|
labels: response.labels,
|
|
|
|
|
datasets: [{
|
|
|
|
|
data: response.data,
|
2016-05-22 15:36:49 +00:00
|
|
|
backgroundColor: response.colors.default,
|
|
|
|
|
hoverBackgroundColor: response.colors.hover
|
2016-05-22 13:20:49 +00:00
|
|
|
}]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* [3] On construit notre graphique
|
|
|
|
|
=========================================================*/
|
|
|
|
|
var myDoughnutChart = new Chart(sexe, {
|
|
|
|
|
type: 'doughnut',
|
|
|
|
|
animation: { animateScale: true },
|
|
|
|
|
data: data
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* [2] On récupére les données DIRECTION
|
|
|
|
|
=========================================================*/
|
|
|
|
|
/* (1) On rédige la requête */
|
|
|
|
|
var request = {
|
2016-05-22 14:41:12 +00:00
|
|
|
path: 'chart/direction',
|
2016-05-22 15:36:49 +00:00
|
|
|
subject: subject
|
2016-05-22 13:20:49 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* (2) On lance la requête */
|
|
|
|
|
api.send(request, function(response){
|
|
|
|
|
/* (3) Si erreur, on quitte */
|
|
|
|
|
if( response.ModuleError != 0 )
|
|
|
|
|
return false;
|
|
|
|
|
|
|
|
|
|
/* [2] On construit les données
|
|
|
|
|
=========================================================*/
|
|
|
|
|
var data = {
|
|
|
|
|
labels: response.labels,
|
|
|
|
|
datasets: [{
|
|
|
|
|
data: response.data,
|
2016-05-22 15:36:49 +00:00
|
|
|
backgroundColor: response.colors.default,
|
|
|
|
|
hoverBackgroundColor: response.colors.hover
|
2016-05-22 13:20:49 +00:00
|
|
|
}]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* [3] On construit notre graphique
|
|
|
|
|
=========================================================*/
|
|
|
|
|
var myDoughnutChart = new Chart(direction, {
|
|
|
|
|
type: 'doughnut',
|
|
|
|
|
animation: { animateScale: true },
|
|
|
|
|
data: data
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
2016-05-22 15:36:49 +00:00
|
|
|
/* [3] On récupére les données TYPE
|
2016-05-22 13:20:49 +00:00
|
|
|
=========================================================*/
|
|
|
|
|
/* (1) On rédige la requête */
|
|
|
|
|
var request = {
|
2016-05-22 14:41:12 +00:00
|
|
|
path: 'chart/type',
|
2016-05-22 15:36:49 +00:00
|
|
|
subject: subject
|
2016-05-22 13:20:49 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* (2) On lance la requête */
|
|
|
|
|
api.send(request, function(response){
|
|
|
|
|
/* (3) Si erreur, on quitte */
|
|
|
|
|
if( response.ModuleError != 0 )
|
|
|
|
|
return false;
|
|
|
|
|
|
|
|
|
|
/* [2] On construit les données
|
|
|
|
|
=========================================================*/
|
|
|
|
|
var data = {
|
|
|
|
|
labels: response.labels,
|
|
|
|
|
datasets: [{
|
|
|
|
|
data: response.data,
|
2016-05-22 15:36:49 +00:00
|
|
|
backgroundColor: response.colors.default,
|
|
|
|
|
hoverBackgroundColor: response.colors.hover
|
2016-05-22 13:20:49 +00:00
|
|
|
}]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* [3] On construit notre graphique
|
|
|
|
|
=========================================================*/
|
|
|
|
|
var myDoughnutChart = new Chart(type, {
|
|
|
|
|
type: 'doughnut',
|
|
|
|
|
animation: { animateScale: true },
|
|
|
|
|
data: data
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
});
|
2016-05-22 15:36:49 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* [4] On récupére les données AGES
|
|
|
|
|
=========================================================*/
|
|
|
|
|
/* (1) On rédige la requête */
|
|
|
|
|
var request = {
|
|
|
|
|
path: 'chart/ages',
|
|
|
|
|
subject: subject
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* (2) On lance la requête */
|
|
|
|
|
api.send(request, function(response){
|
|
|
|
|
/* (3) Si erreur, on quitte */
|
|
|
|
|
if( response.ModuleError != 0 )
|
|
|
|
|
return false;
|
|
|
|
|
|
|
|
|
|
/* [2] On construit les données
|
|
|
|
|
=========================================================*/
|
|
|
|
|
var data = {
|
|
|
|
|
labels: response.labels,
|
|
|
|
|
datasets: [{
|
|
|
|
|
data: response.data,
|
|
|
|
|
backgroundColor: response.colors.default,
|
|
|
|
|
hoverBackgroundColor: response.colors.hover
|
|
|
|
|
}]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* [3] On construit notre graphique
|
|
|
|
|
=========================================================*/
|
|
|
|
|
var myDoughnutChart = new Chart(age, {
|
|
|
|
|
type: 'doughnut',
|
|
|
|
|
animation: { animateScale: true },
|
|
|
|
|
data: data
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2016-05-22 13:20:49 +00:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
