Livre de recettes pour tirer le meilleur parti des visualisations Looker: personnalisation de la mise en forme conditionnelle dans les graphiques cartésiens

La mise en évidence visuelle des valeurs qui répondent à certaines conditions permet aux utilisateurs d'identifier rapidement les tendances des données. Ce modèle est souvent appelé mise en forme conditionnelle.

Par exemple, la visualisation de l'exemple Colorer les valeurs maximales, minimales et de centiles sur cette page aide les utilisateurs à identifier rapidement les mois où les ventes ont été les plus faibles et les plus élevées :

Dans Looker, vous pouvez utiliser les options intégrées des paramètres de visualisation des graphiques textuels et tabulaires pour appliquer une mise en forme conditionnelle à ces graphiques. Pour les graphiques cartésiens, vous pouvez utiliser l'éditeur de configuration des graphiques pour mettre en forme conditionnellement les valeurs de données.

Dans l'éditeur de configuration des graphiques, vous pouvez utiliser l'attribut series formatters pour appliquer une mise en forme conditionnelle aux valeurs qui répondent à des critères spécifiques. Voici quelques règles de mise en forme conditionnelle que vous pouvez appliquer :

• La valeur est supérieure, inférieure ou égale à une valeur spécifiée.

  Par exemple, pour appliquer une mise en forme conditionnelle aux valeurs numériques supérieures à 100, utilisez select: 'value > 100'.

• La valeur correspond à la valeur minimale ou maximale de la série.

  Par exemple, pour appliquer une mise en forme conditionnelle à la valeur maximale, utilisez select: 'max'.

• La valeur se situe dans un centile spécifié.

  Par exemple, pour appliquer une mise en forme conditionnelle aux valeurs du premier décile, utilisez select: 'percent_rank >= 0.9'.

• La valeur de l'axe X correspond à une valeur spécifiée.

  Par exemple, pour appliquer une mise en forme conditionnelle aux séries dont la valeur de l'axe X est "Columbia", utilisez select: name = Columbia.

Ce cookbook fournit les tutoriels suivants :

• Mettre en couleur les valeurs maximale, minimale et de centile
• Combiner des conditions de mise en forme conditionnelle

Colorer les valeurs maximale, minimale et de centile

Vous pouvez utiliser les attributs select et style pour spécifier la couleur des valeurs de données maximales et minimales dans un graphique cartésien, ainsi que toutes les valeurs qui se situent en dessous d'un centile spécifié.

Composants

• Requête d'exploration
• Visualisation cartésienne
• Éditeur de configuration des graphiques

Prérequis

Pour créer une visualisation cartésienne avec mise en forme conditionnelle, vous devez disposer des éléments suivants :

• Autorisations pour créer des explorations et connaissance de l'exploration des données
• L'autorisation can_override_vis_config, qui permet d'accéder à l'éditeur de configuration des graphiques
• Autorisations pour enregistrer du contenu (si vous souhaitez enregistrer la visualisation en tant que Look ou tableau de bord)
• Une certaine connaissance de JSON

Exemple : Visualisation des colonnes

Une équipe commerciale souhaite pouvoir identifier rapidement les tendances des ventes mensuelles sur une année. Ils disposent d'une visualisation qui affiche le coût total groupé par mois.

Vous pouvez utiliser la mise en forme conditionnelle pour mettre en évidence les valeurs qui répondent à certains objectifs. Les utilisateurs peuvent ainsi mieux comprendre les données.

Dans cet exemple, l'équipe commerciale souhaite mettre en avant les valeurs suivantes :

• La colonne avec la valeur Coût total minimale sera en rouge.
• La colonne avec la valeur Coût total maximale sera verte.
• Les colonnes du trentième centile inférieur Coût total seront orange.
• Toutes les autres colonnes seront grises.

Pour appliquer cette mise en forme conditionnelle à un graphique cartésien :

1. Affichez une visualisation cartésienne dans une exploration ou modifiez une visualisation cartésienne dans un look ou un tableau de bord.
2. Ouvrez le menu Modifier dans la visualisation.
3. Cliquez sur le bouton Modifier la configuration du graphique dans l'onglet Tracé. Looker affiche la boîte de dialogue Modifier la configuration du graphique.

4. Sélectionnez la section Configuration du graphique (remplacement), puis saisissez le code JSON suivant :

   {
     series: [{
       color: 'gray',
       formatters: [{
           select: 'max',
           style: {
             color: 'green',
           }
         },
         {
           select: 'percent_rank <= 0.3',
           style: {
             color: 'orange'
           }
         },
         {
           select: 'min',
           style: {
             color: 'red'
           }
         },
       ]
     }]
   }
   

5. Pour appliquer vos modifications, cliquez sur Appliquer.

L'équipe commerciale peut désormais identifier rapidement les mois où les performances ont été insuffisantes et les examiner pour déterminer ce qui s'est passé.

Une fois que vous avez personnalisé votre visualisation, vous pouvez l'enregistrer. Si vous avez consulté la visualisation dans une exploration, enregistrez l'exploration. Si vous avez modifié un Look ou un tableau de bord, cliquez sur Enregistrer.

Exemple : Visualisation en nuage de points

Pour appliquer une mise en forme conditionnelle aux visualisations de nuages de points, vous pouvez spécifier une couleur pour les attributs style.marker.fillColor et style.marker.lineColor au lieu de l'attribut style.color.

L'attribut lineColor définit la couleur du contour de chaque point du graphique en nuage de points. L'attribut fillColor définit la couleur intérieure de chaque point du graphique en nuage de points.

Vous pouvez modifier l'exemple précédent en procédant comme suit :

1. Affichez une visualisation de nuage de points dans une exploration ou modifiez-la dans un look ou un tableau de bord.
2. Ouvrez le menu Modifier dans la visualisation.
3. Cliquez sur le bouton Modifier la configuration du graphique dans l'onglet Tracé. Looker affiche la boîte de dialogue Modifier la configuration du graphique.

4. Sélectionnez la section Configuration du graphique (remplacement), puis saisissez le code JSON suivant :

   {
     series: [{
       color: 'gray',
       formatters: [{
           select: 'max',
           style: {
             marker: {
               fillColor: 'green',
               lineColor: 'green'
             }
           }
         },
         {
           select: 'percent_rank <= 0.3',
           style: {
             marker: {
               fillColor: 'orange',
               lineColor: 'orange'
             }
           }
         },
         {
           select: 'min',
           style: {
             marker: {
               fillColor: 'red',
               lineColor: 'red'
             }
           }
         }
       ]
     }]
   }
   

5. Cliquez sur Appliquer pour appliquer vos modifications.

Dans la visualisation obtenue, la valeur minimale, la valeur maximale et les valeurs situées dans les 30 % inférieurs sont colorées en fonction des règles de mise en forme.

Une fois que vous avez personnalisé votre visualisation, vous pouvez l'enregistrer. Si vous avez consulté la visualisation dans une exploration, enregistrez l'exploration. Si vous avez modifié un Look ou un tableau de bord, cliquez sur Enregistrer.

Combiner des conditions de mise en forme conditionnelle

Vous pouvez utiliser AND et OR dans l'attribut select pour combiner des expressions logiques dans les règles de mise en forme conditionnelle.

Composants

• Requête d'exploration
• Visualisation cartésienne
• Éditeur de configuration des graphiques

Prérequis

Pour créer une visualisation cartésienne avec mise en forme conditionnelle, vous devez disposer des éléments suivants :

• Autorisations pour créer des explorations et connaissance de l'exploration des données
• L'autorisation can_override_vis_config, qui permet d'accéder à l'éditeur de configuration des graphiques
• Autorisations pour enregistrer du contenu (si vous souhaitez enregistrer la visualisation en tant que Look ou tableau de bord)
• Une certaine connaissance de JSON

Exemple

Une équipe commerciale souhaite pouvoir identifier rapidement les mois qui répondent à certains critères. Ils disposent d'une visualisation qui affiche le coût total groupé par mois.

Vous pouvez utiliser la mise en forme conditionnelle pour mettre en évidence les valeurs qui répondent à certains objectifs. Les utilisateurs peuvent ainsi mieux comprendre les données.

Dans cet exemple, l'équipe commerciale souhaite mettre en avant les valeurs suivantes :

• Les colonnes dont les valeurs Coût total sont comprises entre 43 000 $et 45 000 $ (inclus) seront violettes.
• Toutes les autres colonnes seront grises.

Pour appliquer cette mise en forme conditionnelle à un graphique cartésien :

1. Affichez une visualisation cartésienne dans une exploration ou modifiez une visualisation cartésienne dans un look ou un tableau de bord.
2. Ouvrez le menu Modifier dans la visualisation.
3. Cliquez sur le bouton Modifier la configuration du graphique dans l'onglet Tracé. Looker affiche la boîte de dialogue Modifier la configuration du graphique.

4. Sélectionnez la section Configuration du graphique (remplacement), puis saisissez le code JSON suivant :

   {
     series: [{
       color: 'gray',
       formatters: [{
           select: 'value >= 43000 AND value <= 45000',
           style: {
             color: 'purple',
           }
         },
       ]
     }]
   }
   

5. Pour appliquer vos modifications, cliquez sur Appliquer.

L'équipe commerciale peut désormais voir rapidement que les revenus de mars, avril et septembre se situent entre 43 000 et 45 000 $, et prendre des mesures supplémentaires pour comprendre ce qui s'est passé au cours de ces mois.

Une fois que vous avez personnalisé votre visualisation, vous pouvez l'enregistrer. Si vous avez consulté la visualisation dans une exploration, enregistrez l'exploration. Si vous avez modifié un Look ou un tableau de bord, cliquez sur Enregistrer.