NxTIC/test-charts/all.php

220 lines
5.8 KiB
PHP
Raw Normal View History

<!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" style='margin: 2em;'></canvas>
<canvas id="type" width="400" height="400" style='margin: 2em;'></canvas>
<canvas id="sexe" width="400" height="400" style='margin: 2em;'></canvas>
<canvas id="age" width="400" height="400" style='margin: 2em;'></canvas>
<canvas id="relation" width="400" height="400" style='margin: 2em;'></canvas>
<script type='text/javascript'>
var api = new APIClass('/api/');
var direction = document.getElementById('direction');
var type = document.getElementById('type');
var sexe = document.getElementById('sexe');
var age = document.getElementById('age');
var relation = document.getElementById('relation');
/* [0] Paramètres globaux
=========================================================*/
Chart.defaults.global.responsive = false;
Chart.defaults.global.onClick = function(e, c){
console.log(e); // MouseEvent
console.log(c[0]._datasetIndex, c[0]._index); // Chart data
// _datasetIndex, quel dataset (s'il y en a plusieurs)
// _index, indice de la valeur dans le dataset
}
subject = 273;
var charts = ['sexe', 'direction', 'type', 'ages', 'relation'];
/* [1] On crée les conteneurs
=========================================================*/
for( var c in charts ){
}
/* [1] On récupére les données SEXE
=========================================================*/
/* (1) On rédige la requête */
var request = {
path: 'chart/sexe',
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: response.datasets
}
/* [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 = {
path: 'chart/direction',
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: response.datasets
}
/* [3] On construit notre graphique
=========================================================*/
var myDoughnutChart = new Chart(direction, {
type: 'doughnut',
animation: { animateScale: true },
data: data
});
});
/* [3] On récupére les données TYPE
=========================================================*/
/* (1) On rédige la requête */
var request = {
path: 'chart/type',
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: response.datasets
}
/* [3] On construit notre graphique
=========================================================*/
var myDoughnutChart = new Chart(type, {
type: 'doughnut',
animation: { animateScale: true },
data: data
});
});
/* [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: response.datasets
}
/* [3] On construit notre graphique
=========================================================*/
var myDoughnutChart = new Chart(age, {
type: 'doughnut',
animation: { animateScale: true },
data: data
});
});
/* [5] On récupére les données RELATIONS (types)
=========================================================*/
/* (1) On rédige la requête */
var request = {
path: 'chart/relations',
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: response.datasets
}
/* [3] On construit notre graphique
=========================================================*/
var myBarChart = new Chart(relation, {
type: 'bar',
animation: { animateScale: true },
data: data
});
});
</script>
</body>
</html>