2016-05-22 12:54:57 +00:00
|
|
|
<!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 = {
|
2016-05-22 14:41:12 +00:00
|
|
|
path: 'chart/direction',
|
2016-05-22 12:54:57 +00:00
|
|
|
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>
|
