NxTIC/view/js/charts.js

var subPhone  = $('section[data-sublink="phone"]');
subPhone.style.display        = 'flex';
subPhone.style.flexWrap       = 'wrap';
subPhone.style.justifyContent = 'space-around';

/* [0] Paramètres globaux
=========================================================*/
Chart.defaults.global.responsive = false;
Chart.defaults.global.title.display = true;


Chart.defaults.global.onClick = function(e, c){
	console.log(e); // MouseEvent
	if( c[0] != null )
		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', 'relations'];
var types     = ['doughnut', 'doughnut',  'doughnut', 'bar',  '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  = 400;
	canvas[c].height = 400;
	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){
		console.log(api.buffer);
		// On récupère @c dans le scope du handler
		var c = args[0];

		/* (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
		};

		Chart.defaults.global.title.text = charts[c].charAt(0).toUpperCase()+charts[c].slice(1).toLowerCase();
		/* [3] On construit notre graphique
		=========================================================*/
		instances[c] = new Chart(canvas[c], {
			type:      types[c],
			animation: { animateScale: true },
			data:      data,
			options: {
				scaleShowLabels: false
			}
		});

	}, null, c);



}