NxTIC/test-charts/direction.php

58 lines
1.5 KiB
PHP
Raw Normal View History

<!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>