Créer un sélecteur d’intervalle de temps Looker Studio pour votre graphique en série temporelle

Ce tutoriel décrivant comment créer un sélecteur d’intervalle de temps a été inspiré par une question de la communauté. Ce sélecteur est étroitement associé au monde financier pour les graphiques de cours de bourse.

Pour ce qui nous concerne plus spécifiquement, lors de la création d’un tableau de bord ou d’un rapport interactif, nous avons souvent tendance à ajouter un sélecteur de date. Je suis convaincu que cela n’est pas toujours nécessaire et que parfois, une simple option pour élargir la période à des plages de temps est suffisante. Cela est particulièrement vrai pour les tableaux de bord destinés à surveiller les performances avec une granularité temporelle fixe, des objectifs, avec des seuils définis.

Voyons donc comment nous pouvons construire ce sélecteur d’intervalle de temps pour un graphique en courbes.

Table des matières

Ingrédients

Pour cette configuration, nous aurons besoin des éléments suivants :

• Votre ensemble de données actuel, contenant au minimum un champ de date et une métrique
• Des paramètres booléens, 4 dans mon exemple
• Quelques champs calculés
• Une combinaison de données
• 4 boutons correspondant aux 4 paramètres dans le rapport
• Un graphique en courbes et les champs calculés associés au niveau du graphique

Jeu de données

Pour ce tutoriel, j’utilise une source de données BigQuery avec des leads générés quotidiennement, mais vous pouvez appliquer la même méthode à n’importe quel ensemble de données contenant un champ de date et une métrique :

• data_date
• leads

Paramètres

Commençons par créer 4 paramètres booléens correspondant aux 4 intervalles de temps, qui seront représentées au final par des sélecteur de type « bouton » pour le graphique en courbes.

• « m1 » pour 1 mois glissant passé
• « m3 » pour 3 mois
• « m6 » pour 6 mois
• « y1 » pour 12 mois

Voici à quoi ressemble la configuration du premier paramètre (avec le même nom pour le paramètre et l’ID).

Champs calculés

Nous devons identifier la date la plus récente dans l’ensemble de données à l’aide de ce simple champs calculé.

max_date

MAX(data_date)

Puis, nous créons un second champ calculé pour renvoyer l’intervalle de temps sélectionné en fonction de la valeur des 4 paramètres.

Selected Time Frame

CASE 
WHEN m1 THEN "m1" 
WHEN m3 THEN "m3" 
WHEN m6 THEN "m6" 
WHEN y1 THEN "y1" 
ELSE "m1" 
END

Combinaison de données

Maintenant, nous configurons les données combinées (data blending) « DB – Get the max data of the series » comme décrit ci-dessous pour notre exemple, afin d’accéder à la date la plus récente de l’ensemble de données à chaque ligne de données :

• Table de gauche – Votre source de données principale
  • Dimensions : « data_date », « Selected Time Frame »
  • Métrique : « Leads »
  • (si nécessaire pour votre source de données) Intervalle de dates : « data_date »
  • Filtre : aucun
• Table de droite – Votre source de données principale
  • Dimensions : aucune
  • Métriques : « max_date »
  • (si nécessaire pour votre source de données) Intervalle de dates : « data_date »
  • Filtre : aucun
• Configuration de la jointure
  • Opérateur : Jointure croisée
  • Aucune clé

Boutons pour le sélecteur d’intervalle de temps

L’action suivante consiste à ajouter 4 boutons sélecteur partageant les mêmes styles (ici en violet), juxtaposés et alignés horizontalement :

• Les boutons sont ordonnés par intervalle de temps, et chacun d’eux sera alimenté par l’un des paramètres.
• Le libellé de chaque bouton doit être personnalisé (1M, 3M, 6M, 1Y).
• Tous les boutons doivent appartenir au groupe 1. Assurez-vous de spécifier le groupe 1 pour chaque bouton : lorsqu’un bouton est cliqué, les autres boutons du groupe prendront la valeur « false ».
• Le premier bouton à gauche pour l’intervalle d’un mois est défini comme la valeur par défaut (basculer « Default selection »).

Je recommande d’utiliser une couleur de fond plutôt foncée pour les boutons afin d’optimiser la lisibilité, quel que soit l’état des boutons (cliqué avec une superposition grise supplémentaire ou non cliqué dans leur état par défaut).

Configuration du graphique

Enfin, mettons à jour ou ajoutons un graphique en courbes dans notre page de rapport avec la configuration suivante (il ne s’agit pas d’un graphique de série temporelle, mais d’un graphique en courbes pour créer des séries basées sur les données et non sur la plage de dates sélectionnée) :

• Type de graphique : Graphique en courbes
• Onglet « Configurer »
  • Source de données : Votre source de données fusionnée “DB – Get the max data of the series”
  • Dimension : Un champ calculé de graphique nommé « Date » correspondant à la formule ci-dessous
  • Métrique : Un champ calculé de graphique nommé “Leads” correspondant à la formule ci-dessous
  • Tri : Date par ordre croissant
  • Plage de dates par défaut : Réglée sur les 366 jours précédents pour l’aligner sur la période la plus large (voir la capture d’écran ci-dessous)
• Onglet Style
  • Série #1 sous forme de ligne
  • Adaptez les autres options de style

Date

CASE 
WHEN Selected Time Frame = "m1" AND data_date >= DATETIME_SUB(max_date, INTERVAL 1 MONTH) THEN data_date 
WHEN Selected Time Frame = "m3" AND data_date >= DATETIME_SUB(max_date, INTERVAL 3 MONTH) THEN data_date 
WHEN Selected Time Frame = "m6" AND data_date >= DATETIME_SUB(max_date, INTERVAL 6 MONTH) THEN data_date 
WHEN Selected Time Frame = "y1" AND data_date >= DATETIME_SUB(max_date, INTERVAL 12 MONTH) THEN data_date 
ELSE NULL END 

Leads

CASE 
WHEN Selected Time Frame = "m1" AND data_date >= DATETIME_SUB(max_date, INTERVAL 1 MONTH) THEN Leads 
WHEN Selected Time Frame = "m3" AND data_date >= DATETIME_SUB(max_date, INTERVAL 3 MONTH) THEN Leads 
WHEN Selected Time Frame = "m6" AND data_date >= DATETIME_SUB(max_date, INTERVAL 6 MONTH) THEN Leads 
WHEN Selected Time Frame = "y1" AND data_date >= DATETIME_SUB(max_date, INTERVAL 12 MONTH) THEN Leads 
ELSE NULL END 

Revue de la configuration

Enfin, passons en revue la configuration et testons notre sélecteur d’intervalle de temps.

Alternative pour le sélecteur d’intervalle de temps : requête personnalisée BigQuery

L’un des objectifs de cette méthode était de garantir la compatibilité avec n’importe quelle source de données. Cependant, si votre rapport charge des sources de données BigQuery, les possibilités seront bien plus vastes avec une configuration simplifiée, en utilisant notamment des requêtes personnalisées. Les mêmes principes autour des paramètres décrits dans ma méthode de comparaison de plages de dates personnalisées interactives sont appliqués dans ce cas, ce qui permet d’éviter le mélange de données.