Commandes avancées

Looker Studio – Slider pour changer la granularité temporelle de graphiques

17 mars 2023 - par Mehdi Oudjida
Changer la granularité temporelle de vos graphiques Looker Studio

Je suis contrarié lorsque des rapports, réalisés pour un suivi hebdomadaire ou mensuel, sont utilisés pour affichés une journée de statistiques, surtout quand il est question ds graphiques de séries temporelles. La tendance disparaît laissant place à un point isolé, perdu au milieu d’un grand graphique.

L’inverse est aussi vrai : Un graphique en courbes est facilement surchargé si la période sélectionnée est trop grande, surtout si les libellés de données (valeur de chaque point) sont affichés.

Essayons d’apporter un peu de contrôle sur les séries temporelles pour changer la granularité pour une meilleure lisibilité ; en changeant par exemple d’une fréquence journalière à une granularité par heure si on sélectionne une seule journée de statistiques.

C’est une nouvelle occasion d’utiliser la fonctionnalité de paramètres de source de données.

Le résultat

Regardons le résultat de cette combinaison personnalisée de fonctionnalités. Je l »ai conçue pour adresser un besoin spécifique de visualisation pour une expérience interactive des lecteurs de vos rapports.

Ingrédients Looker Studio pour créer le système de sélection de granularité temporelle

Pour réaliser le slider de granularité temporelle, nous allons utiliser les éléments suivants de Looker Studio (ex Google Data Studio) :

  • Un paramètre de source de données avec 4 niveaux de granularité de temps (heure, jour, semaine, mois)
  • Des champs calculés pour traduire la sélection du paramètre en dimension correspondant à la granularité souhaitée
  • Une commande de curseur (slider) pour la sélection interactive de la valeur de paramètre au sein de la page de rapport
  • Un graphique en courbe pour afficher nos données

Paramètre de la source de données Looker Studio

Créons un paramètre au sein de notre source de données pour enregistrer les options que l’on souhaite proposer sur notre slider. Pour cet exemple, j’utilise une source de données Google Analytics fournissant les dimensions « Hour » et « Date ».

Time dimension slider est un paramètre de plage de nombres entiers, de 1 à 4. Les commandes de curseur (slider) ne peuvent être utilisées qu’avec des valeurs numériques. On a donc besoin de créer un paramètre prenant en compte cette contrainte pour appliquer une table de référence entre la sélection d’un entier avec le bonne dimension temporelle.

  • 1 pour Heure (Hour)
  • 2 pour Jour (Day – valeur par défaut)
  • 3 for Semaine (Week)
  • 4 for Mois (Month)
Looker Studio - Paramètre configuré pour le slider de granularité temporelle

Calculated fields

A présent, on va ajouter les champs calculés nécessaires. J’utilise le préfixe « TDS » pour « Time dimensions slider ».

D’abord, on a besoin d’un champ calculé pour afficher le label de la dimension à la gauche du slider. On pourra ajouter des icônes au dessus du slider, mais donnons aussi l’information textuellement.

TDS - Time dimension label
CASE 
 WHEN Time dimension slider  = 1 THEN "Hour"
 WHEN Time dimension slider  = 2 THEN "Day"
 WHEN Time dimension slider  = 3 THEN "Week"
 WHEN Time dimension slider  = 4 THEN "Month"
 ELSE "Day"
 END

Puis, le plus important, on crée un champ calculé qui adapte le format de la date selon la granularité souhaitée.

Pour éviter des incompatibilités de format, le champ calculé retournera des valeurs uniquement textuelles pour les 4 granularités. Vous pouvez utiliser directement la valeur du paramètre, ou comme dans l’exemple ci-dessous, utiliser le libellé fraîchement créé et favoriser ainsi une meilleure lisibilité de la formule.

Vous pouvez trouver le détail des formats de date possibles sur la documentation de Google Cloud. L’essentiel dans notre cas est d’adopter un format textuel permettant de respecter un ordre temporel des séries pour chaque granularité (d’où par exemple un format journalier indiquant l’année en premier).

TDS - Selected time dimension
CASE
  WHEN TDS - Time dimension label = "Hour" THEN RIGHT_TEXT(CONCAT("0",CAST(Hour AS TEXT)),2)
  WHEN TDS - Time dimension label = "Day" THEN CAST(TODATE(Date, "%Y-%m-%d") AS TEXT)
  WHEN TDS - Time dimension label = "Week" THEN CAST(TODATE(Date,"%Y W%W") AS TEXT)
  WHEN TDS - Time dimension label = "Month" THEN CAST(TODATE(Date, "%Y-%m") AS TEXT)
  END

Commande du curseur (slider) et libellés de granularité

La source de données étant prête, nous ajoutons la commande du curseur (slider) au sein de la page en sélectionnant le paramètre Time dimension slider en tant que champ de contrôle (onglet « Configurer ») et on adapte ses options de style. On doit aussi définir à 1 la taille de l’incrément dans les options d’Ancrage de l’onglet « Style ».
On peut aussi ajouter des icônes représentant les 4 granularités en les positionnant correctement sur les 4 niveaux. L’objectif est aussi d’avoir un rendu graphique satisfaisant et compréhensible très rapidement par le lecteur (à contrario d’un simple menu déroulant par exemple).

Puis, on ajoute à la gauche du slider, un graphique « tableau » d’une ligne sans en-tête et sans pagination (juste une cellule) pour afficher la dimension TDS – Time dimension label (pas de métrique non plus).

Graphique de courbes qui s’adapte à la granularité temporelle

Notre dernière action consistera à changer notre graphique de série temporelle en un graphique de courbes avec les précisions suivantes :

  • TDS – Selected time dimension comme Dimension
  • pour l’exemple, Sessions comme Métrique
  • Trier par TDS – Selected time dimension en ordre croissant pour respecter l’ordre temporelle
  • et adapter les éléments de configuration et de styles comme souhaité

Enfin, on teste le tout avec les données live.

Voilà, c’est prêt !

Faisons une petite revue de la totalité de la configuration. Ce n’était pas sorcier, Jamy ?

Autre option : Adaptation automatique de la granularité

On peut aussi imaginer d’insérer un système automatique de choix de la granularité en fonction du nombre de jours choisis avec le sélecteur de plage de dates. comme sur l’article adaptative sparkline.

Dans ce cas, la sélection automatique prendra la place de la valeur 0 du paramètre et nous utilisons une combinaison de données. In fine, le graphique de courbes utilise un champ calculé créé directement au niveau du graphique, avec la formule ci-dessous.

CASE 
  WHEN TDS - Time dimension extended label != "Auto" THEN TDS - Selected time dimension
  WHEN TDS - Number of days > 150 THEN CAST(TODATE(Date, "%Y-%m") AS TEXT)
  WHEN TDS - Number of days > 21 THEN CAST(TODATE(Date,"%Y W%W") AS TEXT)
  WHEN TDS - Number of days > 1 THEN CAST(TODATE(Date, "%Y-%m-%d") AS TEXT)
  WHEN TDS - Number of days <= 1 THEN RIGHT_TEXT(CONCAT("0",CAST(Hour AS TEXT)),2)
  END

Rapport de démo

Vous trouverez ci-dessous une démo Looker Studio pour tester le fonctionnement final en changeant de période et de granularité.

Rapport de démo Looker Studio avec slider de granularité temporelle