[HighCharts] Elaborer une statistique simple avec High Charts dans une application SAAS.

highcharts-logo

Introduction


Dans l’application RdvJuristes, je décide de calculer la somme des notes de frais de tous les rendez vous de la semaine en cours, puis de les afficher dans un graphique High Charts en barres.

Technologie utilisée


  • Highcharts
  • Php-Mysql en technologie PDO pour le back end
  • AngularJs pour le front end

Ordonnancement


  1. Examiner la conception de la base de donnée relationnelle.
  2. Elaborer la requête SQL
  3. Concevoir le Back End
  4. Concevoir le Front End
  5. Tester.

Examiner la base de donnée.


Il existe la table SQL « rendezvous », et la table « notesdefrais », la relation est de 1-n parce que un Rendez-Vous unique a plusieurs notes de frais par juristes .

Voici la structure de ma table rendezvous :

1

La table « rendezvous » contient un champs « startspe » étant le DATETIME de départ et un champs « endspe » étant le DATETIME de fin du rendezvous.

Cela va nous permettre de filtrer dans notre table SQL « rendezvous » tous les rendez vous de la semaine, grâce à une requête SQL spéciale de la mort one Agaaaain !

Voici ensuite la structure de ma table « notedefrais », on remarque que le type des champs destinés à recevoir les numéraires sont très bons : FLOAT  : (One agaaain maan ) !

2.jpg

Elaborer la requête SQL


Pour élaborer la requête SQL, rien de mieux que d’utiliser Mysql WorkBench en ligne de Commande.

Je vais dans mysql workbench, puis je teste ma requête sql jusqu’à ce qu’elle marche :

3

Ugh ! Je vois que la somme par semaine est bien faite ! Merci google, pour le filtrage par semaine  en cours !

Finalement, voici ma requête SQL qui retourne les bons chiffres, et oui je sais elle est longue, mais on a pas le choix … :


SELECT ROUND(sum(notesdefrais.trajet)) AS trajet ,ROUND(sum(notesdefrais.essence)) AS essence,ROUND(sum(notesdefrais.hotel)) AS hotel,ROUND(sum(notesdefrais.restaurant)) AS restaurant ,ROUND(sum(notesdefrais.autres)) AS notesdefrais FROM rendezvous LEFT JOIN notesdefrais ON rendezvous.id = notesdefrais.idrendezvous WHERE YEARWEEK(rendezvous.startspe, 1) = YEARWEEK(CURDATE(), 1);

Je vois que j’ai bien utilisé la fonction SQL sum() et qu’elle calcule bien mais …

bienvenue.pyjama.jpgQuestion d’un mec : » Tu es un ‘ouf’ mecton, tu utilises la fonction  round() , il n’y a pas les décimales, dans tes résultats, c’est tout naaaze, yo rap ! »

Réponse :Et bien pas d’bol mecton, puisque pour mettre mes résultats dans mon Highcharts, j’avais pas envie de mettre des décimales, au revoir mecton !

Concevoir le Back End PHP


Bon c’est bien joli d’avoir mes résultats mais qu’en faire ? Le back end doit donc envoyer ce résultat au front end au format Json, Viiite !

Je vais dans mon fichier backend UNIQUE crud.php puis je crée ma fonction qui va exécuter la requête SQL !
Comment mon fichier de backend crud.php peut-il être unique (ce qui est super) ? Parce qu’il y a un switch qui route chaque demandes d’angularJs dedans, c’est un design pattern très puissant et très simple élaboré à l’origine par un Indien !(Voir ici) .


function get_frais_par_semaine() { 

	try
    {
        $DB = connection();
		$sql = "SELECT  ROUND(sum(notesdefrais.trajet)) AS trajet ,ROUND(sum(notesdefrais.essence)) AS essence,ROUND(sum(notesdefrais.hotel)) AS hotel,ROUND(sum(notesdefrais.restaurant)) AS restaurant ,ROUND(sum(notesdefrais.autres)) AS notesdefrais FROM rendezvous LEFT JOIN notesdefrais ON rendezvous.id = notesdefrais.idrendezvous  WHERE  YEARWEEK(rendezvous.startspe, 1) = YEARWEEK(CURDATE(), 1);";

		$data = $DB->query($sql);
        $objet = $data->fetch(PDO::FETCH_ASSOC);

        /* Convertit en JSON  */
        print_r(json_encode($objet));
        /* ferme la connexion ? */
        $DB=null;
    }
    catch(PDOException $e)
    {
		print_r(json_encode($e->getMessage()));
        file_put_contents('PDOErreurs.txt', $e->getMessage(), FILE_APPEND);
    }
}

Et voilà, ma fonction en php récupère le résultat de ma requête, puis l’envoie au Front End , mecton (grâce à la ligne print_r(json_encode($objet));) !
Et vu que le résultat n’est qu’une « row », on envoie un objet JSON unique obtenue par la fonction PDO fetch() . Si il y avait eu plusieurs « ROW » , on aurait envoyé un array d’objets JSON (obtenu par la function PDO fetchAll() )!

Mais … mais quelqu’un dit :

animals-goatQuestion : Faut pas utiliser PHP mais Java, ça déchire 1000 fois plus , bhéééé!

Réponse : Et bien, avec Java ce n’est certes pas la même syntaxe mais l’esprit peut être plus ou moins similaire, na, vas-t-en mecton ! .

Concevoir le Front End


Vu qu’on utilise AngularJs, On doit concevoir le code du controleur et la vue.

On doit d’abord récupérer le JSON dans le controleur comme ceci :


	$scope.get_frais_par_semaine = function(){
		$http.get('crud.php?action=get_frais_par_semaine').then(function(data){

			 var myChart = Highcharts.chart('container3', {
				chart: {
					type: 'bar'
				},
				title: {
					text: 'Notes de Frais de la semaine'
				},
				xAxis: {
					 color: 'red',
					categories: ['Trajet', 'Essence', 'Hotel', 'Restaurant', 'Autres']
				},
				yAxis: {
					title: {
						text: '€'
					}
				},
				series:[{
					name: 'Global en Euros',
					data: [parseInt(data.data.trajet),parseInt(data.data.essence),parseInt(data.data.hotel),parseInt(data.data.restaurant),parseInt(data.data.autres)],
					 color: '#FF00FF',
					  format: '$', // your label's value plus the percentage sign
				}]
			});
		});

	} 

Explication : Je fais une requête $http qui demande au serveur Backend PHP de me retourner les données dans la variable DATA dans la fonction de rappel asynchrone .then(). Ensuite, dans le .then(), je crée le graphique avec les données JSON, tout en l’affectant à l’id de la DIV appropriée : container3.

12551.
Question : Mais c’est n’importequoi, il faut créer une factory AngularJs mecton, groin groin, et utiliser Angular 4 !

Réponse : J’ai pas envie de faire une factory pour une statistique unique, mecton, vas ten ! Une simple requête $http suffit amplement pour l’exemple, mes variables sont typées par mon Back End et aussi par mes champs dans la vue, je vais pas en plus me farcir la gestion des types dans le front end, du moins, là jze n’ai pas envie, de plus la syntaxe dans les vues angular 4 ne me plait pas, je préfère Java + Hibernate.

VOilà, il ne nous reste plus qu’à créer notre vue , qui va afficher le graphique highcharts :

	<div class="col-md-6" ng-cloak>
		<div class="panel panel-default ">
			<div class="panel-heading">  <h5> <span class="glyphicon glyphicon-map-marker"></span> Total des Notes de frais de la Semaine</h5></div>
	
	
			<div class="panel-body" style="min-height:600px;overflow:auto"> 
				<div id="container3" style="height: 400px"></div>
			</div>
			
			<div class="panel-footer">
			</div>
		</div>
	</div>	

Test :


On va dans notre application, ici : http://nicolash.org/rdvj/#/stats,

4.jpg

On vérifie les chiffres, et ohhh ! Ca fonctionne hourra ! On a mis que 40 minutes, c’est pas mal .

bienvenue.pyjama.jpg Le mec revient :
Question : Peuh allez, yo rap, j’men fouuut !

Publicités