#14; Prototype (iface+module) du graphique des classes d'ages
This commit is contained in:
xdrm-brackets
parent
912bb8933f
commit
ee3d18261a
|
|
@ -94,7 +94,7 @@
|
|||
$db = new lightdb('phone_db', __ROOT__.'/src/dynamic/');
|
||||
var_dump( array_keys($db->index()));
|
||||
$db->close();
|
||||
$req = new ModuleRequest('chart/sexe', array( 'subject' => 273 ));
|
||||
$req = new ModuleRequest('chart/direction', array( 'subject' => 273 ));
|
||||
|
||||
$res = $req->dispatch();
|
||||
|
||||
|
|
|
|||
|
|
@ -128,6 +128,14 @@
|
|||
"parameters": {
|
||||
"subject": { "description": "Identifiant du sujet à étudier,", "type": "id" }
|
||||
}
|
||||
},
|
||||
|
||||
"ages": {
|
||||
"description": "Renvoie les données pour un graphique sur les ages des contacts",
|
||||
"permissions": ["admin"],
|
||||
"parameters": {
|
||||
"subject": { "description": "Identifiant du sujet à étudier,", "type": "id" }
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
namespace manager\module;
|
||||
use \manager\sessionManager;
|
||||
use \manager\ManagerError;
|
||||
use \manager\ResourceDispatcher;
|
||||
use \manager\lightdb;
|
||||
|
||||
|
||||
|
|
@ -11,6 +12,56 @@
|
|||
class chart{
|
||||
|
||||
|
||||
/* CHARGE LE CONTENU DU DICTIONNAIRE
|
||||
*
|
||||
* @return dictionary<Array> Contenu du dictionnaire, ou FALSE si erreur
|
||||
*
|
||||
*/
|
||||
private static function loadDictionary(){
|
||||
$dict = ResourceDispatcher::getResource('f/json/dictionary/dy/phone');
|
||||
|
||||
$dict = json_decode( $dict, true );
|
||||
|
||||
// Si erreur, on retourne false
|
||||
if( is_null($dict) )
|
||||
return false;
|
||||
|
||||
return $dict;
|
||||
}
|
||||
|
||||
|
||||
/* MODIFIE LES COULEURS DONNEES
|
||||
*
|
||||
* @colors<Array> Tableau de couleurs au format hsl
|
||||
* @tint<int> Valeur a ajouter à tint
|
||||
* @constract<int> Valeur a ajouter à constract
|
||||
* @lightness<int> Valeur a ajouter à lightness
|
||||
*
|
||||
* @return darken<Array> Copie du tableau d'entrée, mais en plus foncé
|
||||
*
|
||||
*/
|
||||
private static function cFilter($colors, $tint=0, $contrast=0, $lightness=0){
|
||||
$darken = $colors;
|
||||
|
||||
/* [1] Pour chaque couleur
|
||||
=========================================================*/
|
||||
foreach($colors as $i=>$color){
|
||||
|
||||
/* (1) On vérifie que c'est bien au format hsl(tint, saturation%, lightness%) */
|
||||
if( !preg_match('/^hsl\((\d+) ?, ?(\d+)% ?, ?(\d+)%\)$/i', $color, $matches) )
|
||||
continue;
|
||||
|
||||
$newTint = intval($matches[1]) + $tint;
|
||||
$newContrast = intval($matches[2]) + $contrast;
|
||||
$newLightness = intval($matches[3]) + $lightness;
|
||||
|
||||
$darken[$i] = "hsl($newTint,$newContrast%, $newLightness%)";
|
||||
}
|
||||
|
||||
return $darken;
|
||||
}
|
||||
|
||||
|
||||
/* RETOURNE UN JEU DE DONNEES POUR LE SENS DE COMMUNICATION (MANQUE/ENTRANT/SORTANT)
|
||||
*
|
||||
*/
|
||||
|
|
@ -31,45 +82,48 @@
|
|||
return array( 'ModuleError' => ManagerError::ModuleError );
|
||||
|
||||
|
||||
/* [2] S'il a un journal d'appel, on renvoie les données
|
||||
/* [2] On initialise les compteurs
|
||||
=========================================================*/
|
||||
$labels = array('ENTRANT', 'SORTANT', 'MANQUÉ');
|
||||
|
||||
$MISSED = 0;
|
||||
$OUTGOING = 0;
|
||||
$INCOMING = 0;
|
||||
|
||||
/* [3] S'il a un journal d'appel, on renvoie les données
|
||||
=========================================================*/
|
||||
if( isset($data['logs']) && is_array($data['logs']) ){
|
||||
|
||||
/* (1) On initialise les compteurs */
|
||||
$MISSED = 0;
|
||||
$OUTGOING = 0;
|
||||
$INCOMING = 0;
|
||||
|
||||
/* (2) On incrémente les compteurs */
|
||||
/* (1) On incrémente les compteurs */
|
||||
foreach($data['logs'] as $log){
|
||||
|
||||
/* (3) Si ce n'est pas un appel, on passe au suivant */
|
||||
/* (2) Si ce n'est pas un appel, on passe au suivant */
|
||||
if( $log['type'] != 0 )
|
||||
continue;
|
||||
|
||||
/* (4) On incrémente les types */
|
||||
/* (3) On incrémente les types */
|
||||
$MISSED += ($log['direction']==2) ? 1 : 0;
|
||||
$OUTGOING += ($log['direction']==1) ? 1 : 0;
|
||||
$INCOMING += ($log['direction']==0) ? 1 : 0;
|
||||
|
||||
}
|
||||
|
||||
/* [3] Si aucun journal d'appel
|
||||
=========================================================*/
|
||||
}else{
|
||||
|
||||
/* (1) On initialise les compteurs */
|
||||
$MISSED = 0;
|
||||
$OUTGOING = 0;
|
||||
$INCOMING = 0;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* [4] Gestion des couleurs
|
||||
=========================================================*/
|
||||
$colors = array();
|
||||
|
||||
$colors['default'] = array( 'hsl(347,100%,69%)', 'hsl(204,82%,57%)', 'hsl(43,100%,67%)' );
|
||||
$colors['hover'] = self::cFilter($colors['default'], 0, 0, -2);
|
||||
|
||||
|
||||
return array(
|
||||
'ModuleError' => ManagerError::Success,
|
||||
'labels' => array('ENTRANT', 'SORTANT', 'MANQUÉ'),
|
||||
'data' => array($INCOMING, $OUTGOING, $MISSED)
|
||||
'labels' => $labels,
|
||||
'colors' => $colors,
|
||||
'data' => array($INCOMING, $OUTGOING, $MISSED)
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -97,45 +151,48 @@
|
|||
return array( 'ModuleError' => ManagerError::ModuleError );
|
||||
|
||||
|
||||
/* [2] On initialise les compteurs
|
||||
=========================================================*/
|
||||
$PHONE = 0;
|
||||
$SMS = 0;
|
||||
|
||||
|
||||
/* [2] S'il a un journal d'appel, on renvoie les données
|
||||
=========================================================*/
|
||||
if( isset($data['logs']) && is_array($data['logs']) ){
|
||||
|
||||
/* (1) On initialise les compteurs */
|
||||
$PHONE = 0;
|
||||
$SMS = 0;
|
||||
|
||||
/* (2) On incrémente les compteurs */
|
||||
/* (1) On incrémente les compteurs */
|
||||
foreach($data['logs'] as $log){
|
||||
|
||||
/* (3) On incrémente les compteurs */
|
||||
/* (2) On incrémente les compteurs */
|
||||
$PHONE += ($log['type']==0) ? 1 : 0;
|
||||
$SMS += ($log['type']==1) ? 1 : 0;
|
||||
|
||||
}
|
||||
|
||||
/* [3] Si aucun journal d'appel
|
||||
=========================================================*/
|
||||
}else{
|
||||
|
||||
/* (1) On initialise les compteurs */
|
||||
$H = 0;
|
||||
$F = 0;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* [4] Gestion des couleurs
|
||||
=========================================================*/
|
||||
$colors = array();
|
||||
|
||||
$colors['default'] = array( 'hsl(347,100%,69%)', 'hsl(204,82%,57%)' );
|
||||
$colors['hover'] = self::cFilter($colors['default'], 0, 0, -2);
|
||||
|
||||
|
||||
return array(
|
||||
'ModuleError' => ManagerError::Success,
|
||||
'labels' => array('APPELS', 'SMS'),
|
||||
'data' => array($PHONE, $SMS)
|
||||
'colors' => $colors,
|
||||
'labels' => array('APPELS', 'SMS'),
|
||||
'data' => array($PHONE, $SMS)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* RETOURNE UN JEU DE DONNEES POUR LE SEXE DES CONTACTS
|
||||
/* RETOURNE UN JEU DE DONNEES POUR LE SEXE DES COMMUNICATIONS (HOMME/FEMME)
|
||||
*
|
||||
*/
|
||||
public static function sexe($params){
|
||||
|
|
@ -154,14 +211,99 @@
|
|||
if( $data === false )
|
||||
return array( 'ModuleError' => ManagerError::ModuleError );
|
||||
|
||||
/* [2] On initialise les compteurs
|
||||
=========================================================*/
|
||||
$H = 0;
|
||||
$F = 0;
|
||||
|
||||
/* [2] S'il a un journal d'appel, on renvoie les données
|
||||
/* [3] S'il a un journal d'appel, on renvoie les données
|
||||
=========================================================*/
|
||||
if( isset($data['logs']) && is_array($data['logs']) ){
|
||||
|
||||
/* (1) On incrémente les compteurs */
|
||||
foreach($data['logs'] as $log){
|
||||
|
||||
/* (2) On récupère le contact associé */
|
||||
$associatedContact = null;
|
||||
foreach($data['contacts'] as $contact)
|
||||
if( $log['id'] == $contact['id'] )
|
||||
$associatedContact = $contact;
|
||||
|
||||
// Si on ne trouve pas, on passe au suivant
|
||||
if( is_null($associatedContact) )
|
||||
continue;
|
||||
|
||||
/* (3) On incrémente les compteurs */
|
||||
$H += ($associatedContact['sexe']==0) ? 1 : 0;
|
||||
$F += ($associatedContact['sexe']==1) ? 1 : 0;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* [4] Gestion des couleurs
|
||||
=========================================================*/
|
||||
$colors = array();
|
||||
|
||||
$colors['default'] = array( 'hsl(347,100%,69%)', 'hsl(204,82%,57%)' );
|
||||
$colors['hover'] = self::cFilter($colors['default'], 0, 0, -2);
|
||||
|
||||
|
||||
return array(
|
||||
'ModuleError' => ManagerError::Success,
|
||||
'colors' => $colors,
|
||||
'labels' => array('HOMME', 'FEMME'),
|
||||
'data' => array($H, $F)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* RETOURNE UN JEU DE DONNEES POUR LES AGES DES COMMUNICATIONS
|
||||
*
|
||||
*/
|
||||
public static function ages($params){
|
||||
extract($params);
|
||||
|
||||
$subject = intval($subject);
|
||||
|
||||
|
||||
/* [1] On récupère les données de ce sujet
|
||||
=========================================================*/
|
||||
$db = new lightdb('phone_db', __ROOT__.'/src/dynamic/');
|
||||
$data = $db->fetch($subject);
|
||||
$db->close();
|
||||
|
||||
// Si erreur
|
||||
if( $data === false )
|
||||
return array( 'ModuleError' => ManagerError::ModuleError );
|
||||
|
||||
|
||||
/* [2] On initialise les valeurs
|
||||
=========================================================*/
|
||||
/* (1) On initialise les compteurs */
|
||||
$age_classes = array();
|
||||
for( $i = 0 ; $i < 18 ; $i++ )
|
||||
$age_classes[$i] = 0;
|
||||
|
||||
/* (2) On charge le dictionnaire */
|
||||
$dict = self::loadDictionary();
|
||||
if( $dict === false )
|
||||
return array( 'ModuleError' => ManagerError::ParsingFailed );
|
||||
|
||||
/* (2) On initialise les labels */
|
||||
$labels = array();
|
||||
foreach($dict['contacts']['age'] as $i=>$label)
|
||||
array_push($labels, $label);
|
||||
|
||||
|
||||
/* [3] S'il a un journal d'appel, on renvoie les données
|
||||
=========================================================*/
|
||||
if( isset($data['logs']) && is_array($data['logs']) ){
|
||||
|
||||
/* (1) On initialise les compteurs */
|
||||
$H = 0;
|
||||
$F = 0;
|
||||
|
||||
/* (2) On incrémente les compteurs */
|
||||
foreach($data['logs'] as $log){
|
||||
|
|
@ -176,29 +318,38 @@
|
|||
if( is_null($associatedContact) )
|
||||
continue;
|
||||
|
||||
/* (4) On incrémente les compteurs */
|
||||
$H += ($associatedContact['sexe']==0) ? 1 : 0;
|
||||
$F += ($associatedContact['sexe']==1) ? 1 : 0;
|
||||
/* (4) On incrémente le compteur de la classe d'age en question */
|
||||
if( isset($age_classes[ $associatedContact['age'] ]) )
|
||||
$age_classes[ $associatedContact['age'] ]++;
|
||||
|
||||
}
|
||||
|
||||
/* [3] Si aucun journal d'appel
|
||||
}
|
||||
|
||||
|
||||
/* [4] Gestion des couleurs
|
||||
=========================================================*/
|
||||
}else{
|
||||
$colors = array();
|
||||
|
||||
/* (1) On initialise les compteurs */
|
||||
$H = 0;
|
||||
$F = 0;
|
||||
$colors['default'] = array();
|
||||
|
||||
}/* (1) On initialise les compteurs */
|
||||
$step = (int) (50/count($age_classes));
|
||||
|
||||
// Pour chaque classe, on ajoute une couleur
|
||||
for( $i = 0 ; $i < count($age_classes) ; $i++ )
|
||||
array_push($colors['default'], 'hsl(216,100%,'.(25+(50-$step*$i)).'%)');
|
||||
|
||||
$colors['hover'] = self::cFilter($colors['default'], 0, 0, -2);
|
||||
|
||||
|
||||
return array(
|
||||
'ModuleError' => ManagerError::Success,
|
||||
'labels' => array('HOMME', 'FEMME'),
|
||||
'data' => array($H, $F)
|
||||
'colors' => $colors,
|
||||
'labels' => $labels,
|
||||
'data' => $age_classes
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -15,8 +15,7 @@
|
|||
"contacts": {
|
||||
"sexe": { "0":"Homme", "1":"Femme" },
|
||||
"age": {
|
||||
".": "NA",
|
||||
"0": "5 à 10", "1": "10 à 15", "2": "15 à 20", "3": "20 à 25", "4": "25 à 30",
|
||||
"0": "5 à 10", "1": "10 à 15", "2": "15 à 20", "3": "20 à 25", "4": "25 à 30",
|
||||
"5": "30 à 35", "6": "35 à 40", "7": "40 à 45", "8": "45 à 50", "9": "50 à 55",
|
||||
"10": "55 à 60", "11": "60 à 65", "12": "65 à 70", "13": "70 à 75", "14": "75 à 80",
|
||||
"15": "80 à 85", "16": "85 à 90", "17": "90 à 95", "18": "95 à 100"
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
<canvas id="direction" width="400" height="400"></canvas>
|
||||
<canvas id="type" width="400" height="400"></canvas>
|
||||
<canvas id="sexe" width="400" height="400"></canvas>
|
||||
<canvas id="age" width="400" height="400"></canvas>
|
||||
|
||||
|
||||
|
||||
|
|
@ -25,13 +26,15 @@
|
|||
=========================================================*/
|
||||
Chart.defaults.global.responsive = false;
|
||||
|
||||
subject = 273;
|
||||
|
||||
|
||||
/* [1] On récupére les données SEXE
|
||||
=========================================================*/
|
||||
/* (1) On rédige la requête */
|
||||
var request = {
|
||||
path: 'chart/sexe',
|
||||
subject: 273
|
||||
subject: subject
|
||||
}
|
||||
|
||||
/* (2) On lance la requête */
|
||||
|
|
@ -46,8 +49,8 @@
|
|||
labels: response.labels,
|
||||
datasets: [{
|
||||
data: response.data,
|
||||
backgroundColor: [ "#FF6384", "#36A2EB" ],
|
||||
hoverBackgroundColor: [ "#E65977", "#3090D1" ]
|
||||
backgroundColor: response.colors.default,
|
||||
hoverBackgroundColor: response.colors.hover
|
||||
}]
|
||||
}
|
||||
|
||||
|
|
@ -67,7 +70,7 @@
|
|||
/* (1) On rédige la requête */
|
||||
var request = {
|
||||
path: 'chart/direction',
|
||||
subject: 273
|
||||
subject: subject
|
||||
}
|
||||
|
||||
/* (2) On lance la requête */
|
||||
|
|
@ -82,8 +85,8 @@
|
|||
labels: response.labels,
|
||||
datasets: [{
|
||||
data: response.data,
|
||||
backgroundColor: [ "#FF6384", "#36A2EB", "#FFCE56" ],
|
||||
hoverBackgroundColor: [ "#E65977", "#3090D1", "#E6B94D" ]
|
||||
backgroundColor: response.colors.default,
|
||||
hoverBackgroundColor: response.colors.hover
|
||||
}]
|
||||
}
|
||||
|
||||
|
|
@ -98,12 +101,12 @@
|
|||
});
|
||||
|
||||
|
||||
/* [1] On récupére les données TYPE
|
||||
/* [3] On récupére les données TYPE
|
||||
=========================================================*/
|
||||
/* (1) On rédige la requête */
|
||||
var request = {
|
||||
path: 'chart/type',
|
||||
subject: 273
|
||||
subject: subject
|
||||
}
|
||||
|
||||
/* (2) On lance la requête */
|
||||
|
|
@ -118,8 +121,8 @@
|
|||
labels: response.labels,
|
||||
datasets: [{
|
||||
data: response.data,
|
||||
backgroundColor: [ "#FF6384", "#36A2EB" ],
|
||||
hoverBackgroundColor: [ "#E65977", "#3090D1" ]
|
||||
backgroundColor: response.colors.default,
|
||||
hoverBackgroundColor: response.colors.hover
|
||||
}]
|
||||
}
|
||||
|
||||
|
|
@ -132,6 +135,47 @@
|
|||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
/* [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
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,57 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Chart sens de communication (MANQUE/ENTRANT/SORTANT)</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>
|
||||
|
||||
<canvas id="container" width="400" height="400"></canvas>
|
||||
|
||||
|
||||
<script type='text/javascript'>
|
||||
var api = new APIClass('/api/');
|
||||
var ctx = document.getElementById('container').getContext('2d');
|
||||
|
||||
|
||||
|
||||
/* [1] On récupére les données
|
||||
=========================================================*/
|
||||
/* (1) On rédige la requête */
|
||||
var request = {
|
||||
path: 'chart/direction',
|
||||
subject: 273
|
||||
}
|
||||
|
||||
/* (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: [ "#FF6384", "#36A2EB", "#FFCE56" ],
|
||||
hoverBackgroundColor: [ "#E65977", "#3090D1", "#E6B94D" ]
|
||||
}]
|
||||
}
|
||||
|
||||
/* [3] On construit notre graphique
|
||||
=========================================================*/
|
||||
var myDoughnutChart = new Chart(ctx, {
|
||||
type: 'doughnut',
|
||||
animation: { animateScale: true },
|
||||
data: data
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
<!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>
|
||||
|
||||
<canvas id="container" width="400" height="400"></canvas>
|
||||
|
||||
|
||||
<script type='text/javascript'>
|
||||
var api = new APIClass('/api/');
|
||||
var ctx = document.getElementById('container').getContext('2d');
|
||||
|
||||
|
||||
|
||||
/* [1] On récupére les données
|
||||
=========================================================*/
|
||||
/* (1) On rédige la requête */
|
||||
var request = {
|
||||
path: 'chart/sexe',
|
||||
subject: 273
|
||||
}
|
||||
|
||||
/* (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: [ "#FF6384", "#36A2EB" ],
|
||||
hoverBackgroundColor: [ "#E65977", "#3090D1" ]
|
||||
}]
|
||||
}
|
||||
|
||||
/* [3] On construit notre graphique
|
||||
=========================================================*/
|
||||
var myDoughnutChart = new Chart(ctx, {
|
||||
type: 'doughnut',
|
||||
animation: { animateScale: true },
|
||||
data: data
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Chart type de communication (APPEL/SMS)</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>
|
||||
|
||||
<canvas id="container" width="400" height="400"></canvas>
|
||||
|
||||
|
||||
<script type='text/javascript'>
|
||||
var api = new APIClass('/api/');
|
||||
var ctx = document.getElementById('container').getContext('2d');
|
||||
|
||||
|
||||
|
||||
/* [1] On récupére les données
|
||||
=========================================================*/
|
||||
/* (1) On rédige la requête */
|
||||
var request = {
|
||||
path: 'chart/type',
|
||||
subject: 273
|
||||
}
|
||||
|
||||
/* (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: [ "#FF6384", "#36A2EB" ],
|
||||
hoverBackgroundColor: [ "#E65977", "#3090D1" ]
|
||||
}]
|
||||
}
|
||||
|
||||
/* [3] On construit notre graphique
|
||||
=========================================================*/
|
||||
var myDoughnutChart = new Chart(ctx, {
|
||||
type: 'doughnut',
|
||||
animation: { animateScale: true },
|
||||
data: data
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue