diff --git a/view/charts.php b/view/charts.php
index ed51d4f..0f00b92 100755
--- a/view/charts.php
+++ b/view/charts.php
@@ -8,7 +8,13 @@
 
 
 
+	/* (1) On récupére la liste de tous les sujets */
+	$getAll  = new ModuleRequest('subject/getAll', array());
+	$getAllR = $getAll->dispatch();
 
+	$allSub = array();
+	if( $getAllR->error == ManagerError::Success )
+		$allSub = $getAllR->get('subjects');
 
 
 ?>
@@ -16,5 +22,21 @@
 
 <section data-sublink='phone'>
 
+	<h4>Visualiser les données relatives au journal d'appel</h4>
+
+	<span class='select-container nobold'><select id='phone-charts-subject'>
+		<option value='.' disabled selected>Identifiant du sujet</option>
+		<?php foreach($allSub as $id=>$data)
+			if( isset($data['phone']) ) // Si données pour phone
+			echo "<option value='$id'>".$data['name']." [$id]</option>";
+		 ?>
+	</select></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+
+	<br><br><input type='submit' class='primary hover' style='padding:.5em 2em;' value='Charger les graphiques' id='phone-charts-submit'>
+
+
+	<section id='phone-charts-container'>
+
+	</section>
 
 </section>
diff --git a/view/js/charts-min.js b/view/js/charts-min.js
index 2e97a23..f2004e4 100644
--- a/view/js/charts-min.js
+++ b/view/js/charts-min.js
@@ -1,6 +1,5 @@
-var subPhone=$('section[data-sublink="phone"]');subPhone.style.display="flex";subPhone.style.flexWrap="wrap";subPhone.style.justifyContent="space-around";subject=1;var charts="sexe direction type ages relations weekdays duration timeofday".split(" "),canvas=[],instances=[];Highcharts.dateFormats={X:function(a){return(new Date(1E3*a)).toLocaleTimeString()}};
-var plotOptions={pie:{pie:{showInLegend:!0,innerSize:"50%",allowPointSelect:!0,cursor:"pointer",startAngle:-90,endAngle:90,dataLabels:{enabled:!1,distance:10,format:"<b>{point.name}</b>: {point.percentage:.1f} %",style:{color:"black",textShadow:"0 0 2px white"}}}},column:{column:{shadow:!1,borderWidth:0,stacking:null}},weekdays:{column:{shadow:!1,borderWidth:0,stacking:"normal",dataLabels:{enabled:!0}}},bar:{bar:{allowPointSelect:!0,cursor:"pointer"}},spline:{spline:{pointInterval:1E3}}},c;
-for(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]);
-for(c=0;c<charts.length;c++){var request={path:"chart/"+charts[c],subject:subject};api.send(request,function(a,e){console.log(api.buffer);var d=e[0];if(0!=a.ModuleError)return!1;var b={chart:{renderTo:canvas[d],type:a.type},series:a.series,xAxis:{},yAxis:{},tooltip:{}};"pie"==a.type?canvas[d].style.width=canvas[d].style.height="20em":b.tooltip.headerFormat="<b>{point.x}</b><br>";null!=plotOptions[charts[d]]?b.plotOptions=plotOptions[charts[d]]:null!=plotOptions[a.type]&&(b.plotOptions=plotOptions[a.type]);
-null!=a.xaxis&&(b.xAxis=a.xaxis);null!=a.yaxis&&(b.yAxis=a.yaxis);null!=a.xlabels&&(b.xAxis.categories=a.xlabels);null!=a.ylabels&&(b.yAxis.categories=a.ylabels);null!=a.zoom&&(b.chart.zoomType=a.zoom);null!=a.title&&(b.title={text:a.title});null!=a.xtitle&&(b.xAxis.title={text:a.xtitle});null!=a.ytitle&&(b.yAxis.title={text:a.ytitle});null!=a.pointFormat&&(b.tooltip.pointFormat=a.pointFormat);null!=a.headerFormat&&(b.tooltip.headerFormat=a.headerFormat);instances[d]=new Highcharts.Chart(b)},null,
-c)};
+var subPhone=$('section[data-sublink="phone"] section#phone-charts-container');subPhone.style.display="flex";subPhone.style.flexWrap="wrap";subPhone.style.justifyContent="space-around";subject=1;var charts="sexe direction type ages relations weekdays duration timeofday".split(" "),canvas=[],instances=[];Highcharts.dateFormats={X:function(e){return(new Date(1E3*e)).toLocaleTimeString()}};
+var plotOptions={pie:{pie:{showInLegend:!0,innerSize:"50%",allowPointSelect:!0,cursor:"pointer",startAngle:-90,endAngle:90,dataLabels:{enabled:!1,distance:10,format:"<b>{point.name}</b>: {point.percentage:.1f} %",style:{color:"black",textShadow:"0 0 2px white"}}}},column:{column:{shadow:!1,borderWidth:0,stacking:null}},weekdays:{column:{shadow:!1,borderWidth:0,stacking:"normal",dataLabels:{enabled:!0}}},bar:{bar:{allowPointSelect:!0,cursor:"pointer"}},spline:{spline:{pointInterval:1E3}}};
+function loadCharts(e){subPhone.innerHTML="";canvas=[];for(var b in charts)canvas[b]=document.createElement("div"),canvas[b].id=charts[b],canvas[b].style.width=canvas[b].style.height="30em",canvas[b].style.margin="2em",subPhone.appendChild(canvas[b]);for(b=0;b<charts.length;b++)api.send({path:"chart/"+charts[b],subject:e},function(a,b){var d=b[0];if(0!=a.ModuleError)return!1;var c={chart:{renderTo:canvas[d],type:a.type},series:a.series,xAxis:{},yAxis:{},tooltip:{}};"pie"==a.type?canvas[d].style.width=
+canvas[d].style.height="20em":c.tooltip.headerFormat="<b>{point.x}</b><br>";null!=plotOptions[charts[d]]?c.plotOptions=plotOptions[charts[d]]:null!=plotOptions[a.type]&&(c.plotOptions=plotOptions[a.type]);null!=a.xaxis&&(c.xAxis=a.xaxis);null!=a.yaxis&&(c.yAxis=a.yaxis);null!=a.xlabels&&(c.xAxis.categories=a.xlabels);null!=a.ylabels&&(c.yAxis.categories=a.ylabels);null!=a.zoom&&(c.chart.zoomType=a.zoom);null!=a.title&&(c.title={text:a.title});null!=a.xtitle&&(c.xAxis.title={text:a.xtitle});null!=
+a.ytitle&&(c.yAxis.title={text:a.ytitle});null!=a.pointFormat&&(c.tooltip.pointFormat=a.pointFormat);null!=a.headerFormat&&(c.tooltip.headerFormat=a.headerFormat);instances[d]=new Highcharts.Chart(c)},null,b)}var phoneChartsSubject=$("#phone-charts-subject"),phoneChartsSubmit=$("#phone-charts-submit");phoneChartsSubmit.addEventListener("click",function(e){isNaN(phoneChartsSubject.value)||loadCharts(phoneChartsSubject.value)},!1);
diff --git a/view/js/charts.js b/view/js/charts.js
index 5cef991..5d708c5 100644
--- a/view/js/charts.js
+++ b/view/js/charts.js
@@ -1,4 +1,4 @@
-var subPhone  = $('section[data-sublink="phone"]');
+var subPhone  = $('section[data-sublink="phone"] section#phone-charts-container');
 subPhone.style.display        = 'flex';
 subPhone.style.flexWrap       = 'wrap';
 subPhone.style.justifyContent = 'space-around';
@@ -54,104 +54,143 @@ plotOptions['bar']      = { bar: { allowPointSelect: true, cursor: 'pointer' } }
 plotOptions['spline']   = { spline: { pointInterval: 1000 } }; // 1 min
 
 
-/* [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){
-		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;
+/* FONCTION QUI CHARGE LES GRAPHIQUES AVEC UN ID SUJET PARTICULIER
+*
+* @nomParam<typeParam> 									Description du param
+*
+* @return nomRetour<typeRetour> 						Description du retour
+*
+*/
+function loadCharts(subject){
 
-		/* [4] On construit les données
-		=========================================================*/
-		var data = {
-			labels: response.labels,
-			datasets: response.datasets
+	/* [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];
 
-		/* [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: {}
+			/* (3) Si erreur, on quitte */
+			if( response.ModuleError != 0 )
+				return false;
 
-		};
-		// 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];
+			/* [4] On construit les données
+			=========================================================*/
+			var data = {
+				labels: response.labels,
+				datasets: response.datasets
+			};
 
 
-		// 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;
+			/* [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: {}
 
-		// zoom
-		if( response.zoom != null    ) options.chart.zoomType = response.zoom;
+			};
+			// 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>';
 
-		// 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;
+			// Gestion des options
+			if( plotOptions[charts[c]] != null )
+				options.plotOptions = plotOptions[charts[c]];
+			else if( plotOptions[response.type] != null )
+				options.plotOptions = plotOptions[response.type];
 
 
-		/* [6] On crée le graphique
-		=========================================================*/
-		instances[c] = new Highcharts.Chart(options);
+			// 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;
 
 
-	}, null, c); // On passe @c au @handler pour l'avoir dans le scope
+			/* [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);
