logo fidzup

Toute l'actualité de l'innovation pour le retail


Le 19/11/2012

Les graphiques avec Ruby on Rails

Créer des graphiques “from scratch” en Ruby peut être laborieux, heureusement qu’il existe pers outils qui nous font gagner ce temps si précieux. Google Chart est l’un d’eux : il permet de créer très rapidement différents types de graphiques (en colonnes, en camemberts) avec perses options (couleurs et tailles des courbes, légendes, …). Nous allons voir comment l’utiliser conjointement avec “bootstrap-daterangepicker”, ce petit outil permettant de choisir une période de temps.

Bootstrap-daterangepicker

Bootstrap-daterangepicker est un outil très rapide à mettre en place et facile d’utilisation permettant de choisir une période de temps à l’aide de deux datepickers ou de périodes prédéfinies (cette semaine, ce mois, cette année…). Cet outil utilise Twitter Bootstrap et pourra donc directement être implémenté sur votre application web utilisant déjà l’outil de Twitter. 

Voici un example d’implémentation de bootstrap-daterangepicker

Google Chart

Google Chart est un ensemble d’outils pour développeurs mis à disposition gratuitement par Google qui permet de créer des graphiques. Son principal avantage est sa facilité d’utilisation. Pour créer un graphique il suffit de copier/coller le bout de code de base disponible sur le site de Google Chart (ce code est commun à tous les graphiques) et de déclarer un tableau à deux dimensions qui contiendra les données. Ce tableau est sous la forme :

[ [“Date”, “Nombre de visites”], [“2012-01-01”, 421], [“2012-01-02”, 432], [“2012-01-03”, 445] ]

Très rapide à mettre en place pour un graphique dont les données sont fixes. Un peu de travail en base de données est à faire pour des valeurs dynamiques (c’est là qu’intervient bootstrap-daterangepicker pour choisir les périodes de temps).

Un example de “sparkline”

Google Chart permet d’avoir plusieurs types de graphiques (des “pie charts” aux “line charts” en passant par les “column charts”), il y a aussi les sparklines pour des aperçus de données.

Petit souci à gérer : les requêtes SQL ne retournant pas 0 pour une requête vide, il vous faudra combler les vides directement en javascript (côté client donc) afin de ne pas perdre en performance encore une fois.

De part sa simplicité, Google Chart peut s’utiliser conjointement avec des API pour alimenter les graphiques (par exemple utiliser l’API de Flurry afin de faire ses propres graphiques pour son application mobile).

Exemple de “combo chart”

Étapes

  1. Mise en place de bootstrap-daterangepicker (périodes prédéfinies, options des datepickers…) et de Google Chart.

  2. Création de la requête SQL suivant les dates de la recherche.

  3. Création du tableau et remplissage des vides par des 0 en javascript.

  4. Chargement du tableau et préparation du graphique (options, couleurs, …)

Astuces

Afin de ne pas perdre en performance, il serait judicieux de faire faire un maximum de travail en SQL. Il faut par exemple faire le groupage par jour/semaine/mois directement en SQL et non en Ruby après la requête.

Il est également très facile d’avoir plusieurs types de graphiques et plusieurs données différentes dans un même graphique : avoir par exemple le nombre de téléchargements d’une application et le nombre de nouveaux utilisateurs en utilisant les “combo charts”.

Sources :

Google Chart : https://developers.google.com/chart/?hl=fr
Bootstrap-daterangepicker : https://github.com/dangrossman/bootstrap-daterangepicker

Posté par Thomas le 19/11/2012

comments powered by Disqus