NxTIC/view/js/charts.js

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


/* [0] Paramètres globaux
=========================================================*/
subject = 1;

var charts    = ['sexe', 'direction', 'type', 'ages', 'relations', 'weekdays', 'duration', 'timeofday'];
var canvas    = []; // Contiendra les canvas
var instances = []; // Contiendra les charts

Highcharts.dateFormats = {
	X: function (timestamp) {
		var d = new Date(timestamp*1000);
		return d.toLocaleTimeString();

	}
};


/* [1] Gestion des options par défaut
=========================================================*/
var plotOptions = {};

/* (1) Pour les graphiques de type 'pie' */
plotOptions['pie'] = { 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' }
	}
} };

/* (2) Pour les graphiques de type 'column'      */
plotOptions['column']   = { column: { shadow: false, borderWidth: 0, stacking: null } };

/* (3) Pour le graphique des jours de la semaine */
plotOptions['weekdays'] = { column: { shadow: false, borderWidth: 0, stacking: 'normal', dataLabels: { enabled: true } } };

/* (4) Pour les graphiques de type 'bar'         */
plotOptions['bar']      = { bar: { allowPointSelect: true, cursor: 'pointer' } };

/* (5) Pour les graphiques de type 'spline'      */
plotOptions['spline']   = { spline: { pointInterval: 1000 } }; // 1 min









/* FONCTION QUI CHARGE LES GRAPHIQUES AVEC UN ID SUJET PARTICULIER
*
* @nomParam<typeParam> 									Description du param
*
* @return nomRetour<typeRetour> 						Description du retour
*
*/
function loadCharts(subject){

	/* [1] Initialisation
	=========================================================*/
	subPhone.innerHTML = '';
	canvas = [];


	/* [2] On crée les conteneurs
	=========================================================*/
	for( var c in charts ){
		canvas[c] = document.createElement('div');
		canvas[c].id     = charts[c];
		canvas[c].style.width = canvas[c].style.height = '30em';
		canvas[c].style.margin = '2em';
		subPhone.appendChild( canvas[c] );
	}


	/* [3] 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];

			/* (3) Si erreur, on quitte */
			if( response.ModuleError != 0 )
				return false;

			/* [4] On construit les données
			=========================================================*/
			var data = {
				labels: response.labels,
				datasets: response.datasets
			};



			/* [5] On construit les options du graphique
			=========================================================*/
			/* (1) On définit les options */
			var options = {
				chart: { renderTo: canvas[c], type: response.type },
				series: response.series,
				xAxis: {},
				yAxis: {},
				tooltip: {}

			};
			// Si c'est un 'donut', on met plus petit
			if( response.type == 'pie' )
				canvas[c].style.width = canvas[c].style.height = '20em';
			else
				options.tooltip.headerFormat = '<b>{point.x}</b><br>';

			// Gestion des options
			if( plotOptions[charts[c]] != null )
				options.plotOptions = plotOptions[charts[c]];
			else if( plotOptions[response.type] != null )
				options.plotOptions = plotOptions[response.type];


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

			// titres des axes
			if( response.xtitle != null  ) options.xAxis.title = { text: response.xtitle };
			if( response.ytitle != null  ) options.yAxis.title = { text: response.ytitle };

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

			// headerFormat
			if( response.headerFormat != null ) options.tooltip.headerFormat = response.headerFormat;


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


		}, null, c); // On passe @c au @handler pour l'avoir dans le scope



	}

}






// Gestion de l'affichage
var phoneChartsSubject = $('#phone-charts-subject');
var phoneChartsSubmit  = $('#phone-charts-submit');

phoneChartsSubmit.addEventListener('click', function(e){
	
	if( !isNaN(phoneChartsSubject.value) )// Si identifiant
		loadCharts(phoneChartsSubject.value);

}, false);