[Chart.js][Cloudant][Pouchdb] MonEtablissement : générer un graphe en barre en 15 min avec pour source le Map Reduce

monetablissement

charts

Introduction


Suite au post précédent, j’ai donc récupéré le nombre d’établissements français par régions, à l’aide d’un traitement MAP REDUCE.

Maintenant, ben, j’ai envie de visualiser cela dans un graphique en barre, très basique.

Comment faire ?


D’abord, j’ajoute la lib chart.js à mon fichier index.html  :

	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>

On la récupère directement en ligne, c’est très rapide et toujours un bon plan pour faire des maquettes d’applications rapides !

Ensuite, je suis la doc en ligne de chart.js,

J’ajoute une DIV dans mon application ou va se générer le chart  :

<canvas id="myChart"></canvas>

Le code JS


Voilà, ensuite, je récupère un code qui génére un graphique en Barre sur le site de chart.js, mais j’adapte le code pour qu’il ‘mange’ les données provenant de mon MAP REDUCE , ce map reduce qui affiche le nombre d’établissements par régions Françaises!

Donc mon but, c’est d’ajouter dans ma function qui récupère mes données MAP REDUCE, un appel à une nouvelle fonction qui génére le graphique Chart.js :

 

function mapReduce(){
	

	db.query('commune/map1', {reduce: true, group: true}).then(function (results) {
		
		$("#liste").empty(); // On vide le précédent formulaire.
		
		keys = [];
		values = []; 
		
		// On crée une ligne pour chaque résultat retourné
		for (x = 0; x < results.rows.length; x++) {
			if(results.rows[x].key != null){
				$("#liste").append("<span ><Label> <b>"  + results.rows[x].key +   "</b></label><br> Quantité: " + results.rows[x].value + " établissements</span><br><br>");
			}
			
			/* Pour le graphique ensuite, on remplit les keys et les valeurs */
			keys.push(results.rows[x].key );
			values.push(results.rows[x].value);
		}
		
		/* on génére le graphique de statistiques en barres */
		genererGraphique(keys,values);
	 
	}).catch(function (err) {
		console.log(err);
	  // some error
	});

}

Explications :
->Je stocke les clefs dans un tableau keys
->Je stocke les valeurs dans un tableau values
-> J’envoie tout ce petit monde à la fonction genererGraphique(keys,values);

La fonction genererGraphique() :


function genererGraphique(keys,values){
	
	var ctx = document.getElementById('myChart').getContext('2d');
	
	var chart = new Chart(ctx, {
		// The type of chart we want to create
		  type: 'bar',

		// The data for our dataset
		data: {
			labels:keys,
			datasets: [{
				label: "Nombre d établissements",
				backgroundColor:  getRandomColor(),
				borderColor: 'rgb(255, 99, 132)',
				data: values,
			}]
		},

		// Configuration options go here
		options: {}
	});
	
	
	
}

/* Pour la couleur des bars */
function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

Voilà, on donne à manger à chart.js ce qu’il veut, c’est à dire deux ARRAY (tableaux) de valeurs.

Du coup, désormais, quand on exécute la function mapReduce(), la fonction genererGraphique(keys,values) s’exécute également en conséquence.
 

Conclusion :

Tester l’app : http://nicolas.huleux.free.fr/pouchdb4/

 

 

Publicités