[JS] Faire un Group By en JS

js.png

Introduction

Des fois, on a pas le temps , ou pas envie de faire un group by en SQL, du coup, on le fait en JS .

Lien :

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/reduce

(Regrouper des objets selon un propriété)

La fonction :

function groupBy(tableauObjets, propriete){
	  return tableauObjets.reduce(function (acc, obj) {
		var cle = obj[propriete];
		if(!acc[cle]){
		  acc[cle] = [];
		}
		acc[cle].push(obj);
		return acc;
	  }, {});
	}

Un exemple de code qui utilise la fonction et génére un graphique :

	function createGraphTypeE(data){

			// Couleurs des barres
			this.datasetOverrideAff = [{
				 backgroundColor: ['#FFC31E', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360']
			  }];

			var labels =  []; // Les labels(titres) dans le graphique
			var dataValues   =  []; // Les valeurs dans le graphique

			var te = groupBy(data, "type_etude");

			angular.forEach(te,function(value,key){
				labels.push(key);
				dataValues.push(value.length);
			})

			// ON CREE LE GRAPHE DANS LA VUE
			this.labelsTypeEtude = labels;
			this.dataTypeEtude = [dataValues];

	}

Style du résultat :

pournicolashcode.png

Publicités

[D3.js] Tests difficiles avec l’arbre de D3.js (Customisation…)

d3js

Introduction


La librairie D3.js propose des solutions de visualisation de données innovantes, à intégrer dans les applications WEB de demain. C’est une librairie open source et donc gratuite.

Lorsque l’on suit les exemples des codes exemples, et que l’on y intègre ses propres modèles de données JSON, c’est relativement accessible.

Les problèmes commencent lorsque l’on veut ajouter des fonctionnalités inexistantes à un graphique D3.js, ouch , et que l’on ne connait pas l’API!

Là, je décide de customiser l’arbre de D3.JS (Qui n’est même pas celui de base !) en y ajoutant la faculté de supprimer un node, de le renommer et de faire d’autres choses comme ajouter des images… Je débute, donc je glane des portions de codes D3.Js associés à l’arbre sur internet, puis je les colle dans le code en essayant de réflechir…

J’ai aussi besoin de créer un menu contextuel avec un click droit, autant dire que ce n’est pas de la tarte au début !

Le but final est de pouvoir intégrer cet arbre à une application permettant de gérer des projets .

Pour tester, c’est ici:  http://nicolash.org/d3/

Photo de l’arbre à customiser :


d3.jpg

Ce que j’ai réussi à ajouter au jour 1:



  • Intégration dans AngularJs (Pas très beau, le code JS est directement dans une fonction Js)…
  • Ajout d’un node sur double clic (Il faudra le mettre dans un menu contextuel, en plus ca buggote au niveau des cercles)
  • Edition du nom d’un node
  • Suppression du behavior sur clic Droit.

 

Liens utiles


  • http://bl.ocks.org/robschmuecker/7880033
  • http://fiddle.jshell.net/mattsrinc/g8wfegyb/3/light/
  • http://plnkr.co/edit/bDBe0xGX1mCLzqYGOqOS?p=preview
  • http://bl.ocks.org/d3noob/9662ab6d5ac823c0e444
  • https://github.com/patorjk/d3-context-menu
  • http://plnkr.co/edit/bDBe0xGX1mCLzqYGOqOS?p=preview
  • http://jsfiddle.net/mnk/vfro9tkz/
  • http://www.d3noob.org/2014/01/tree-diagrams-in-d3js_11.html

 

 

Lire la suite

Exercice 7 : Utiliser L’API GOOGLE pour générer des graphes.

Introduction :

Une Première approche de l’utilisation de l’API Google, je génére 3 graphes dans 3 divs différentes.

Les graphes ne sont pas encore tous reliés à un élément de base de données, je le ferais plus tard.

Lorsqu’on injecte les variables directement avec PHP, c’est particulièrement facile. Par contre, il va falloir voir comment utiliser du XML ou du JSON pour injecter les données, dans le prochain article .

Première impression : C’est beau et facile à mettre en place.

Image du programme :

Image

Le code :

<BODY BGCOLOR="#e7dfce">
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />

<FONT size="1pt" face="arial" >
<!-- PHASE 1 L utilisateur entre des données dans des champs pour renseigner la base de donnée avec la méthode AJAX -->

<!-- Inclus le petit fichier de traitement en AJAX, c'est celui qui va enregistrer en bdd-->
<script src="ajax_framework.js" language="javascript"></script>

<!-- Montre un message quand l'enregistrement AJAX est bien fait -->
<div id="insert_response"></div>

<!-- Form: L'action="javascript:insert()"apelle la javascript function "insert" dans le fichier ajax_framework.js -->

<form action="javascript:insert()" method="post">

<input name="cadres" type="text" id="cadres" placeholder="Nombre de Cadres" value=""/>
<input name="employes" type="text" id="employes" placeholder="Nombres d'Employés" value=""/>
<input name="ouvriers" type="text" id="ouvriers" placeholder="Nombre d'Ouvriers" value=""/>
<input name="externe" type="text" id="externe" placeholder="Employés Interim" value=""/>
<input type="submit" name="Submit" value="insert" />
</form>

<?php

// Connexion à la base de données et lecture des données
mysql_connect("localhost", "root", "");
mysql_select_db("huleuxnicolas");
$query = "SELECT cadres,employes,ouvriers,externe FROM ca where id=(SELECT MAX(id) from ca); ";
$result = mysql_query($query) or die(mysql_error());

// récupération des 4 colonnes dans un tableau $tab
while($row = mysql_fetch_array($result))
 {

 // remplissage du tableau
 $tab[]=$row[0];
 $tab[]=$row[1];
 $tab[]=$row[2];
 $tab[]=$row[3];
 //var_dump($tab);
 }

?> 

 <!--
On se mets à utiliser l'api Google à partir de plus bas
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 <title>
 Google Visualization API Sample
 </title>
 <script type="text/javascript" src="//www.google.com/jsapi"></script>
 <script type="text/javascript">
 google.load('visualization', '1', {packages: ['corechart']});
 </script>
 <script type="text/javascript">

 // 1ER GRAPHE
 function drawVisualization() {
 // Create and populate the data table.
 var data = google.visualization.arrayToDataTable([
 ['Année', 'Cadres', 'Employes', 'Ouvriers', 'Interim'],
 ['2003',<?php echo $tab[0]?>,<?php echo $tab[1]?>,<?php echo $tab[2]?>,<?php echo $tab[3]?>],
 ['2004',<?php echo $tab[0]?>,<?php echo $tab[1]?>,<?php echo $tab[2]?>,<?php echo $tab[3]?>],

 ]);

 // Create and draw the visualization.
 new google.visualization.ColumnChart(document.getElementById('visualization')).
 draw(data,
 {title:"Employes",
 width:600, height:400,
 hAxis: {title: "Year"}}
 );
 }

 google.setOnLoadCallback(drawVisualization);

 // 2EME GRAPHE
 function drawVisualization2() {
 // Some raw data (not necessarily accurate)
 var data = google.visualization.arrayToDataTable([
 ['Mois', 'Cadres', 'Employés', 'Ouvriers', 'Interim'],
 ['2004/05', <?php echo $tab[0]?>,<?php echo $tab[1]?>,<?php echo $tab[2]?>,<?php echo $tab[3]?>],
 ['2005/06', <?php echo $tab[0]?>,<?php echo $tab[1]?>,<?php echo $tab[2]?>,<?php echo $tab[3]?>],
 ['2006/07', 157, 1167, 587, 807],
 ['2007/08', 139, 1110, 615, 968],
 ['2008/09', 136, 691, 629, 1026]
 ]);

 // Create and draw the visualization.
 var ac = new google.visualization.AreaChart(document.getElementById('visualization2'));
 ac.draw(data, {
 title : 'Employés embauches par mois',
 isStacked: true,
 width: 600,
 height: 400,
 vAxis: {title: "Nouveaux"},
 hAxis: {title: "Mois"}
 });
}
 google.setOnLoadCallback(drawVisualization2);

 // 3EME GRAPHE
 function drawVisualization3() {
 // Create and populate the data table.
 var data = google.visualization.arrayToDataTable([
 ['Tache', 'Hobbies des Employés'],
 ['Travailler', 11],
 ['Manger', 2],
 ['Glander', 2],
 ['Regarder la télévision', 2],
 ['Dormir', 7]
 ]);

 // Create and draw the visualization.
 new google.visualization.PieChart(document.getElementById('visualization3')).
 draw(data, {title:"Quels sont les hobbies de vos employés?"});
}
 google.setOnLoadCallback(drawVisualization3);

 </script>
 </head>
 <!-- les 3 divs ont l'attribut float left qui les mets les unes à coté des autres . !-->
 <body style="font-family: Arial;border: 0 none;">
 <div id="visualization" style="width: 600px; height: 400px; float:left;";></div>
 <div id="visualization2" style="width: 600px; height: 400px;float:left;";></div>
 <div id="visualization3" style="width: 600px; height: 400px;float:left;";></div>
</body>
</html>