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 = false;
Chart.defaults.global.tooltips.footerFontSize = 0;


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', 'weekdays', 'timeofday'];
var types     = ['pie', 'pie',       'pie',      'column', 'bar',       'column',   'column'];
var canvas    = []; // Contiendra les canvas
var instances = []; // Contiendra les charts

var plotOptions = [ { pie: { // pie
	showInLegend: true,
	innerSize: '50%',
	allowPointSelect: true,
	cursor: 'pointer',
	startAngle: -90,
	endAngle: 90,
	dataLabels: {
		enabled: false,
		distance: 10,
		format: '<b>{point.name}</b>: {point.percentage:.1f} %',
		style: { color: 'black', textShadow: '0 0 2px white' }
	}
} } ];

plotOptions[1] = plotOptions[0]; // PIE
plotOptions[2] = plotOptions[0]; // PIE

// AGES + WEEKDAY
plotOptions[3] = { column: { shadow: false, borderWidth: 0 } };
plotOptions[5] = { column: { shadow: false, borderWidth: 0 } };
plotOptions[5].column.stacking = 'normal';

// RELATIONS
plotOptions[4] = { bar: { allowPointSelect: true, cursor: 'pointer' } };

// TIMEOFDAY
plotOptions[6] = {};


/* [1] On crée les conteneurs
=========================================================*/
for( var c in charts ){
	canvas[c] = document.createElement('div');
	canvas[c].id     = charts[c];
	// canvas[c].width  = canvas[c].height = ( types[c] == 'bar' ) ? 500 : 300;
	canvas[c].style.width = canvas[c].style.height = ( types[c] != 'pie' ) ? '40em' : '30em';
	canvas[c].style.margin = '2em';
	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
		};

		/* [3] On construit notre graphique
		=========================================================*/
		/* (1) On définit les options */
		var options = {
			chart: { renderTo: canvas[c], type: types[c] },
			series: response.series,
			plotOptions: plotOptions[c],
			xAxis: {}, yAxis: {}
		};

		// types de données
		if( response.xaxis != null ) options.xAxis = response.xaxis;
		if( response.yaxis != null ) options.yAxis = response.yaxis;

		// labels
		if( response.xlabels != null ) options.xAxis.categories = response.xlabels;
		if( response.ylabels != null ) options.yAxis.categories = response.ylabels;

		// zoom
		if( response.zoom != null ) options.chart.zoomType = response.zoom;

		// titre
		if( response.title != null ) options.title = { text: response.title };

		// pointFormat
		if( response.pointFormat != null ) options.tooltip = { pointFormat: response.pointFormat };

			console.log(options);
		/* (2) On crée le graphique */
		instances[c] = new Highcharts.Chart(options);


	}, null, c);



}