NxTIC/view/js/charts.js

76 lines
1.9 KiB
JavaScript

var subPhone = $('section[data-sublink="phone"]');
/* [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'];
var types = ['doughnut', 'doughnut', 'doughnut', 'doughnut', 'bar'];
var canvas = []; // Contiendra les canvas
var instances = []; // Contiendra les charts
/* [1] On crée les conteneurs
=========================================================*/
for( var c in charts ){
canvas[c] = document.createElement('canvas');
canvas[c].id = charts[c];
canvas[c].width = 300;
canvas[c].height = 300;
subPhone.appendChild( canvas[c] );
}
/* [2] Pour chaque graphique, on récupère les données et on les affiche
=========================================================*/
for( var c = 0 ; c < charts.length ; c++ ){
/* (1) On rédige la requête */
var request = {
path: 'chart/'+charts[c],
subject: subject
};
/* (2) On lance la requête */
api.send(request, function(response, args){
// On récupère @c dans le scope du handler
var c = args[0];
console.log(args);
/* (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
=========================================================*/
console.log(canvas[c], types[c]);
instances[c] = new Chart(canvas[c], {
type: types[c],
animation: { animateScale: true },
data: data
});
}, null, c);
}