Utilisation de Highcharts

config/dispatcher-tree.json

@@ -10,7 +10,6 @@
 	"js" : "/js",
 
 	"highcharts": "/js/lib/highcharts/js",
-	"sigma": "/js/lib/sigma",
 
 	"upload": "/src/upload"
 }

doc/permissions.json

@@ -25,7 +25,7 @@
 		"manager":   { "permissions": "private" },
 
 		"src": {
-			"permissions": "phponly",
+			"permissions": "php",
 			"static": "public"
 		},
 

manager/module/chart.php

@@ -112,23 +112,17 @@
 
 			}
 
-
+			/* [4] On construit l'objet
-			/* [4] Gestion des couleurs
 			=========================================================*/
-			$colors = array();
-
-			$colors['default'] = array( 'hsla(347,100%,69%,1)', 'hsla(204,82%,57%,1)', 'hsla(43,100%,67%,1)' );
-			$colors['hover']   = self::cFilter($colors['default'], 0, 0, -2);
 
 
 			return array(
 				'ModuleError' => ManagerError::Success,
-				'labels'      => $labels,
+				'xlabels'      => $labels,
-				'datasets'    => array(array(
+				'series'    => array(array(
-					'data'                 => array($INCOMING, $OUTGOING, $MISSED),
+					array( 'name' => $labels[0], 'y' => $INCOMING ),
-					'backgroundColor'      => $colors['default'],
+					array( 'name' => $labels[1], 'y' => $OUTGOING ),
-					'hoverBackgroundColor' => $colors['hover']
+					array( 'name' => $labels[2], 'y' => $MISSED )				))
-				))
 			);
 		}
 
@@ -188,8 +182,8 @@
 
 			return array(
 				'ModuleError' => ManagerError::Success,
-				'labels'      => array('APPELS', 'SMS'),
+				'xlabels'      => array('APPELS', 'SMS'),
-				'datasets'    => array(array(
+				'series'    => array(array(
 					'data'                 => array($PHONE, $SMS),
 					'backgroundColor'      => $colors['default'],
 					'hoverBackgroundColor' => $colors['hover']
@@ -250,21 +244,17 @@
 			}
 
 
-			/* [4] Gestion des couleurs
-			=========================================================*/
-			$colors = array();
-
-			$colors['default'] = array( 'hsla(347,100%,69%,1)', 'hsla(204,82%,57%,1)' );
-			$colors['hover']   = self::cFilter($colors['default'], 0, 0, -2);
-
-
 			return array(
 				'ModuleError' => ManagerError::Success,
-				'labels'      => array('HOMME', 'FEMME'),
+				'title' => 'Répartition des genres',
-				'datasets'    => array(array(
+				'pointFormat' => '{series.name}: <b>{point.percentage:.1f}%</b>',
-					'data'                 => array($H, $F),
+				'series'    => array(array(
-					'backgroundColor'      => $colors['default'],
+					'colorByPoint' => true,
-					'hoverBackgroundColor' => $colors['hover']
+					'name' => 'Répartition des genres',
+					'data' => array(
+						array( 'name' => 'Homme', 'y' => $H ),
+						array( 'name' => 'Femme', 'y' => $F )
+					)
 				))
 			);
 		}
@@ -302,15 +292,18 @@
 
 			/* (2) On initialise les compteurs et les labels */
 			$age_classes          = array();
+			$age_classesByContact = array();
 			$labels = array();
 			foreach($dict['contacts']['age'] as $i=>$label){
 				array_push($labels, $label);
 				$age_classes[$i] = 0;
+				$age_classesByContact[$i] = 0;
 			}
 
 
 			/* [3] S'il a un journal d'appel, on renvoie les données
 			=========================================================*/
+			$tot = 0;
 			if( isset($data['logs']) && is_array($data['logs']) ){
 
 
@@ -328,37 +321,52 @@
 						continue;
 
 					/* (4) On incrémente le compteur de la classe d'age en question */
-					if( isset($age_classes[ $associatedContact['age'] ]) )
+					if( isset($age_classes[ $associatedContact['age'] ]) ){
 						$age_classes[ $associatedContact['age'] ]++;
-
+						$tot++;
 					}
 
 				}
 
+				foreach($age_classes as $i=>$class)
+					$age_classes[$i] = 100 * $class / $tot;
 
-			/* [4] Gestion des couleurs
+			}
+
+
+			/* [4] On récupère les ages pour répartition des CONTACTS
 			=========================================================*/
-			$colors = array();
+			/* (1) On incrémente les compteurs */
+			$tot = 0;
+			foreach($data['contacts'] as $c=>$contact){
 
-			$colors['default'] = array();
+				/* (2) On incrémente le compteur de la classe d'age en question */
+				if( isset($age_classesByContact[ $contact['age'] ]) ){
+					$age_classesByContact[$contact['age']]++;
+					$tot++;
+				}
 
-			$step = (int) (50/count($age_classes));
+			}
 
-			// Pour chaque classe, on ajoute une couleur
+			foreach($age_classesByContact as $i=>$class)
-			for( $i = 0 ; $i < count($age_classes) ; $i++ )
+				$age_classesByContact[$i] = 100 * $class / $tot;
-				 array_push($colors['default'], 'hsl(216,100%,'.(25+(50-$step*$i)).'%)');
 
-			$colors['hover']   = self::cFilter($colors['default'], 0, 0, -2);
 
 
 			return array(
 				'ModuleError' => ManagerError::Success,
-				'labels'      => $labels,
+				'xlabels'      => $labels,
-				'datasets'    => array(array(
+				'title'       => 'Répartition des ages',
-					'data'                 => $age_classes,
+				'series'      => array(
-					'backgroundColor'      => $colors['default'],
+					array(
-					'hoverBackgroundColor' => $colors['hover']
+						'name' => 'Parmi les communications',
-				))
+						'data' => array_values($age_classes)
+					),
+					array(
+						'name' => 'Parmi les contacts',
+						'data' => array_values($age_classesByContact)
+					)
+				)
 			);
 		}
 
@@ -456,49 +464,18 @@
 				$relationsByContact[$r] = 100 * $relationsByContact[$r] / $tot;
 
 
-
-			/* [5] Gestion des couleurs
-			=========================================================*/
-			$colors = array();
-
-			$colors['default'] = array();
-			$colors['defaultContact'] = array();
-
-			$step = (int) (50/count($relations));
-
-			// Pour chaque classe, on ajoute une couleur
-			for( $i = 0 ; $i < count($relations) ; $i++ )
-				 array_push($colors['default'], 'hsla(216,100%,'.(25+(50-$step*$i)).'%,.5)');
-
-			$colors['hover']   = self::cFilter($colors['default'], 0, 0, -2);
-
-			// Pour chaque classe PAR CONTACT, on ajoute une couleur
-			for( $i = 0 ; $i < count($relationsByContact) ; $i++ )
-				array_push($colors['defaultContact'], 'hsla(20,100%,'.(25+(50-$step*$i)).'%,.5)');
-
-			$colors['hoverContact'] = self::cFilter($colors['defaultContact'], 0, 0, -2);
-
-
-
 			return array(
 				'ModuleError' => ManagerError::Success,
-				'labels'      => $labels,
+				'xlabels'     => $labels,
-				'datasets'    => array(
+				'title'       => 'Répartition des relations',
+				'series'      => array(
 					array( // En fonction du log
-						'label'                => 'Répartition des communications',
+						'name' => 'Parmi les communications',
-						'data'                 => $relations,
+						'data' => $relations
-						'backgroundColor'      => $colors['default'],
-						'hoverBackgroundColor' => $colors['hover'],
-						'borderWidth'          => 1,
-						'borderColor'          => 'hsla(216,100%,80%,1)'
 					),
-					array( // Répartition dans les contacts
+					array( // Parmi les contacts
-						'label'                => 'Répartition des contacts',
+						'name' => 'Parmi les contacts',
-						'data'                 => $relationsByContact,
+						'data' => $relationsByContact
-						'backgroundColor'      => $colors['defaultContact'],
-						'hoverBackgroundColor' => $colors['hoverContact'],
-						'borderWidth'          => 1,
-						'borderColor'          => 'hsla(20,100%,80%,1)'
 					)
 				)
 			);

src/.htaccess

@@ -1,2 +0,0 @@
-Order deny,allow
-Deny from all

test-charts/all.php

@@ -4,186 +4,28 @@
 		<meta charset="utf-8">
 		<title>Chart du sexe (HOMME/FEMME)</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>
+		<script type='text/javascript' src='/f/js/highcharts/highcharts'></script>
+		<script type='text/javascript' src='/f/js/exporting/highcharts/modules'></script>
 	</head>
 	<body style='display: flex; flex-direction: row; justify-content: space-around; flex-wrap: wrap;'>
 
-		<canvas id="direction" width="400" height="400" style='margin: 2em;'></canvas>
+		<div id="age" style='margin: 2em'></div>
-		<canvas id="type"      width="400" height="400" style='margin: 2em;'></canvas>
-		<canvas id="sexe"      width="400" height="400" style='margin: 2em;'></canvas>
-		<canvas id="age"       width="400" height="400" style='margin: 2em;'></canvas>
-		<canvas id="relation"  width="400" height="400" style='margin: 2em;'></canvas>
 
 
 
 		<script type='text/javascript'>
 			var api = new APIClass('/api/');
 
-			var direction = document.getElementById('direction');
-			var type      = document.getElementById('type');
-			var sexe      = document.getElementById('sexe');
 			var age       = document.getElementById('age');
-			var relation  = document.getElementById('relation');
 
 			/* [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'];
-
-
-			/* [1] On crée les conteneurs
-			=========================================================*/
-			for( var c in charts ){
-
-			}
-
-
 			/* [1] On récupére les données SEXE
 			=========================================================*/
 			/* (1) On rédige la requête */
-			var request = {
-				path: 'chart/sexe',
-				subject: subject
-			}
-
-			/* (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: response.datasets
-				}
-
-				/* [3] On construit notre graphique
-				=========================================================*/
-				var myDoughnutChart = new Chart(sexe, {
-					type:      'doughnut',
-					animation: { animateScale: true },
-					data:      data
-				});
-
-			});
-
-
-			/* [2] On récupére les données DIRECTION
-			=========================================================*/
-			/* (1) On rédige la requête */
-			var request = {
-				path: 'chart/direction',
-				subject: subject
-			}
-
-			/* (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: response.datasets
-				}
-
-				/* [3] On construit notre graphique
-				=========================================================*/
-				var myDoughnutChart = new Chart(direction, {
-					type:      'doughnut',
-					animation: { animateScale: true },
-					data:      data
-				});
-
-			});
-
-
-			/* [3] On récupére les données TYPE
-			=========================================================*/
-			/* (1) On rédige la requête */
-			var request = {
-				path: 'chart/type',
-				subject: subject
-			}
-
-			/* (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: response.datasets
-				}
-
-				/* [3] On construit notre graphique
-				=========================================================*/
-				var myDoughnutChart = new Chart(type, {
-					type:      'doughnut',
-					animation: { animateScale: true },
-					data:      data
-				});
-
-			});
-
-
-
-
-			/* [4] On récupére les données AGES
-			=========================================================*/
-			/* (1) On rédige la requête */
-			var request = {
-				path: 'chart/ages',
-				subject: subject
-			}
-
-			/* (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: response.datasets
-				}
-
-				/* [3] On construit notre graphique
-				=========================================================*/
-				var myDoughnutChart = new Chart(age, {
-					type:      'doughnut',
-					animation: { animateScale: true },
-					data:      data
-				});
-
-			});
-
-
-
-
-			/* [5] On récupére les données RELATIONS (types)
-			=========================================================*/
-			/* (1) On rédige la requête */
 			var request = {
 				path: 'chart/relations',
 				subject: subject
@@ -191,24 +33,23 @@
 
 			/* (2) On lance la requête */
 			api.send(request, function(response){
+				console.log( response );
+
 				/* (3) Si erreur, on quitte */
 				if( response.ModuleError != 0 )
 					return false;
 
-				/* [2] On construit les données
+				/* (4) Gestion des paramètres */
-				=========================================================*/
+				var options = {
-				var data = {
+					chart: { renderTo: age, defaultSeriesType: 'bar' },
-					labels: response.labels,
+					series: response.series
-					datasets: response.datasets
+				};
-				}
 
-				/* [3] On construit notre graphique
+
-				=========================================================*/
+				/* (5) Création */
-				var myBarChart = new Chart(relation, {
+				var chart = new Highcharts.Chart(options);
-					type:      'bar',
+
-					animation: { animateScale: true },
+				console.log(chart);
-					data:      data
-				});
 
 			});
 

view.php

@@ -42,6 +42,8 @@
 		<script type='text/javascript' src='/f/js/input-html-facebook-data-min/js/includes' ></script>  <!-- Gestion du constructeur HTML pour la page d'acquisition 'facebook' -->
 
 		<!-- Librairies Externes Javascript -->
+		<script type='text/javascript' src='/f/js/highcharts/highcharts'              ></script> <!-- Librairie pour les graphiques -->
+		<script type='text/javascript' src='/f/js/exporting/highcharts/modules'       ></script> <!-- Librairie pour les graphiques -->
 		<script type='text/javascript' src='/f/js/_charts-min/js/lib'                       ></script> <!-- Librairie pour les graphiques -->
 
 	</head>

view/js/charts-min.js

@@ -1,3 +1,4 @@
-var subPhone=$('section[data-sublink="phone"]');subPhone.style.display="flex";subPhone.style.flexWrap="wrap";subPhone.style.justifyContent="space-around";Chart.defaults.global.responsive=!1;Chart.defaults.global.title.display=!0;Chart.defaults.global.onClick=function(a,b){console.log(a);null!=b[0]&&console.log(b[0]._datasetIndex,b[0]._index)};subject=273;var charts=["sexe","direction","type","ages","relations"],types=["doughnut","doughnut","doughnut","bar","bar"],canvas=[],instances=[],c;
+var subPhone=$('section[data-sublink="phone"]');subPhone.style.display="flex";subPhone.style.flexWrap="wrap";subPhone.style.justifyContent="space-around";Chart.defaults.global.responsive=!1;Chart.defaults.global.title.display=!1;Chart.defaults.global.tooltips.footerFontSize=0;Chart.defaults.global.onClick=function(a,b){console.log(a);null!=b[0]&&console.log(b[0]._datasetIndex,b[0]._index)};subject=273;
-for(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]);
+var charts=["sexe","direction","type","ages","relations"],types=["pie","pie","pie","column","bar"],canvas=[],instances=[],c;for(c in charts)canvas[c]=document.createElement("div"),canvas[c].id=charts[c],canvas[c].style.width=canvas[c].style.height="column"==types[c]?"40em":"30em",canvas[c].style.margin="2em",subPhone.appendChild(canvas[c]);
-for(c=0;c<charts.length;c++){var request={path:"chart/"+charts[c],subject:subject};api.send(request,function(a,b){console.log(api.buffer);var d=b[0];if(0!=a.ModuleError)return!1;var e={labels:a.labels,datasets:a.datasets};Chart.defaults.global.title.text=charts[d].charAt(0).toUpperCase()+charts[d].slice(1).toLowerCase();instances[d]=new Chart(canvas[d],{type:types[d],animation:{animateScale:!0},data:e,options:{scaleShowLabels:!1}})},null,c)};
+for(c=0;c<charts.length;c++){var request={path:"chart/"+charts[c],subject:subject};api.send(request,function(a,b){console.log(api.buffer);var e=b[0];if(0!=a.ModuleError)return!1;var d={chart:{renderTo:canvas[e],defaultSeriesType:types[e]},series:a.series,plotOptions:{pie:{allowPointSelect:!0,cursor:"pointer",dataLabels:{enabled:!0,format:"<b>{point.name}</b>: {point.percentage:.1f} %",style:{color:Highcharts.theme&&Highcharts.theme.contrastTextColor||"black"}}},bar:{allowPointSelect:!0,cursor:"pointer"}}};
+null!=a.xlabels&&(d.xAxis={categories:a.xlabels});null!=a.ylabels&&(d.yAxis={categories:a.ylabels});null!=a.title&&(d.title={text:a.title});null!=a.pointFormat&&(d.tooltip={pointFormat:a.pointFormat});instances[e]=new Highcharts.Chart(d)},null,c)};

view/js/charts.js

@@ -6,7 +6,8 @@ subPhone.style.justifyContent = 'space-around';
 /* [0] Paramètres globaux
 =========================================================*/
 Chart.defaults.global.responsive = false;
-Chart.defaults.global.title.display = true;
+Chart.defaults.global.title.display = false;
+Chart.defaults.global.tooltips.footerFontSize = 0;
 
 
 Chart.defaults.global.onClick = function(e, c){
@@ -22,17 +23,18 @@ subject = 273;
 
 
 var charts    = ['sexe',     'direction', 'type',     'ages', 'relations'];
-var types     = ['doughnut', 'doughnut',  'doughnut', 'bar',  'bar'];
+var types     = ['pie', 'pie',  'pie', 'column',  '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] = document.createElement('div');
 	canvas[c].id     = charts[c];
-	canvas[c].width  = 400;
+	// canvas[c].width  = canvas[c].height = ( types[c] == 'bar' ) ? 500 : 300;
-	canvas[c].height = 400;
+	canvas[c].style.width = canvas[c].style.height = ( types[c] == 'column' ) ? '40em' : '30em';
+	canvas[c].style.margin = '2em';
 	subPhone.appendChild( canvas[c] );
 }
 
@@ -66,17 +68,49 @@ for( var c = 0 ; c < charts.length ; c++ ){
 			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], {
+		/* (1) On définit les options */
-			type:      types[c],
+		var options = {
-			animation: { animateScale: true },
+			chart: { renderTo: canvas[c], defaultSeriesType: types[c] },
-			data:      data,
+			series: response.series,
-			options: {
+			plotOptions: {
-				scaleShowLabels: false
+				pie: {
+					allowPointSelect: true,
+					cursor: 'pointer',
+					dataLabels: {
+						enabled: true,
+						format: '<b>{point.name}</b>: {point.percentage:.1f} %',
+						style: {
+							color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
 						}
-		});
+					}
+				},
+				bar: {
+					allowPointSelect: true,
+					cursor: 'pointer'
+				}
+			}
+		};
+
+		// labels
+		if( response.xlabels != null )
+			options.xAxis = { categories: response.xlabels };
+
+		if( response.ylabels != null )
+			options.yAxis = { categories: response.ylabels };
+
+		// titre
+		if( response.title != null )
+			options.title = { text: response.title };
+
+		// pointFormat
+		if( response.pointFormat != null )
+			options.tooltip = { pointFormat: response.pointFormat };
+
+		/* (2) On crée le graphique */
+		instances[c] = new Highcharts.Chart(options);
+
 
 	}, null, c);