Personnaliser des visualisations à l'aide de l'éditeur de configuration des graphiques

Vous pouvez utiliser l'éditeur de configuration des graphiques pour personnaliser les options de mise en forme des visualisations Looker qui utilisent l'API HighCharts. Cela inclut la plupart des graphiques cartésiens, tels que le graphique à colonnes, le graphique à barres et le graphique en courbes, entre autres.

Prérequis

Pour accéder à l'éditeur de configuration des graphiques, vous devez disposer de l'autorisation can_override_vis_config.

Personnaliser une visualisation

Pour personnaliser une visualisation avec l'éditeur de configuration des graphiques, procédez comme suit:

  1. Afficher une visualisation dans une exploration ou modifier une visualisation dans une présentation 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 Tracer. Looker affiche la boîte de dialogue Modifier la configuration du graphique.

    • Le volet Configuration du graphique (source) contient le code JSON d'origine de votre visualisation et ne peut pas être modifié.

    • Le volet Configuration du graphique (Forcer) contient le code JSON qui doit remplacer le code JSON source. Lorsque vous ouvrez la boîte de dialogue Edit Chart Config (Modifier la configuration du graphique), Looker remplit le volet avec du code JSON par défaut. Vous pouvez commencer avec ce fichier JSON ou le supprimer et saisir n'importe quel fichier JSON HighCharts valide.

  4. Sélectionnez la section Chart Config (Override) (Configuration du graphique (Forcer)) et saisissez un code JSON HighCharts valide. Les nouvelles valeurs remplaceront toutes les valeurs de la section Configuration du graphique (source).

    • Pour obtenir des exemples de JSON HighCharts valide, consultez la section Exemples de cet article.
    • Looker accepte toutes les valeurs JSON valides. Looker n'accepte pas les fonctions, les dates ni les valeurs non définies.

  5. Cliquez sur <> (Mettre en forme le code) pour permettre à Looker de mettre en forme correctement votre code JSON.

  6. Cliquez sur Prévisualiser pour tester vos modifications.

  7. Cliquez sur Appliquer pour appliquer vos modifications. La visualisation s'affichera à l'aide des valeurs JSON personnalisées.

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é une présentation ou un tableau de bord, cliquez sur Enregistrer.

Si vous essayez d'afficher un aperçu du code contenant du code JSON non valide, Looker affiche un message d'erreur Invalid JSON detected . Vous pouvez nettoyer le code JSON non valide à l'aide de l'option Autofix code (Auto-corriger le code) en bas du volet Chart Config (Override) (Configuration du graphique (Forcer)).

Si vous souhaitez modifier les options de visualisation par défaut, supprimez d'abord les modifications que vous avez apportées dans l'éditeur de configuration du graphique, puis remplacez-les plus tard. Plus précisément, procédez comme suit:

  1. Cliquez sur le bouton Modifier la configuration du graphique dans l'onglet Tracer. Looker affiche la boîte de dialogue Modifier la configuration du graphique.
  2. Copiez le texte dans le volet Configuration du graphique (Forcer).
  3. Cliquez sur le bouton Effacer les forçages du graphique pour supprimer toutes les modifications.
  4. Cliquez sur Appliquer.
  5. Modifiez votre visualisation à l'aide des options de visualisation par défaut.
  6. Cliquez sur le bouton Modifier la configuration du graphique dans l'onglet Tracer. Looker affiche la boîte de dialogue Modifier la configuration du graphique.
  7. Saisissez un code JSON HighCharts valide dans le volet Configuration du graphique (Forcer). Vous pouvez utiliser le texte que vous avez copié à l'étape 2 comme modèle, mais veillez à tester vos modifications à l'aide du bouton Aperçu pour vous assurer qu'il n'y a pas de conflits.
  8. Cliquez sur Appliquer.

Mise en forme conditionnelle avec series formatters

L'éditeur de configuration des graphiques accepte la plupart des fichiers JSON HighCharts valides. Il accepte également l'attribut series formatters, qui n'existe que dans Looker. Chaque série peut avoir plusieurs formatseurs pour combiner différentes règles de style.

L'attribut series formatters accepte deux attributs: select et style.

  • Saisissez une expression logique dans l'attribut select pour indiquer quelles valeurs de données seront mises en forme.
  • Saisissez du code JSON dans l'attribut style pour indiquer comment mettre en forme les valeurs de données.

Par exemple, le code JSON suivant colore chaque valeur de données en orange si elle est supérieure ou égale à 380:

{
  series: [{
    formatters: [{
      select: 'va>lue = 380',
      style: {
        color: 'orange'
      }
    }]
  }]
}

Les sections suivantes décrivent plus en détail les valeurs potentielles des attributs select et style.

Attribut select

Vous pouvez utiliser les valeurs suivantes dans une expression select:

  • value: cette variable renvoie la valeur de la série. Vous pouvez utiliser cette valeur dans des comparaisons, comme dans les exemples suivants :
    • L'expression select: value > 100 correspond aux lignes dont les valeurs sont supérieures à 100.
    • L'expression select: value > VIEW_NAME.FIELD_NAME correspond aux lignes dont les valeurs sont supérieures à un autre champ pour cette ligne. Pour en savoir plus, consultez la section Série de couleurs par rapport aux autres valeurs de série.
    • L'expression select: value > mean correspond aux lignes dont les valeurs sont supérieures à la moyenne de cette série. Pour en savoir plus, consultez la section Comparer les valeurs des séries à la valeur moyenne.
  • max: utilisez select: max pour cibler la valeur de la série qui a la valeur maximale.
  • min: utilisez select: min pour cibler la valeur de la série qui a la valeur minimale.
  • percent_rank: cette variable cible la valeur de la série avec un percentile spécifié. Par exemple, vous pouvez utiliser select: percent_rank >= 0.9 pour cibler les valeurs de la série dans le 90e centile.
  • name: cette variable renvoie la valeur de dimension de la série. Par exemple, si vous avez un graphique affichant les commandes vendues, annulées et retournées, vous pouvez utiliser select: name = Sold pour cibler la série dont la valeur de dimension est "Vendu".
  • AND/OR Utilisez AND et OR pour combiner plusieurs expressions logiques.

Pour voir ces expressions implémentées dans l'éditeur de configuration du graphique, consultez l'exemple Colorer les valeurs maximale, minimale et des percentiles.

Attribut style

L'attribut style permet d'appliquer des styles compatibles avec HighCharts. Par exemple, vous pouvez colorer les valeurs des séries à l'aide de style.color, les bordures des séries à l'aide de style.borderColor et définir la largeur de la bordure des séries à l'aide de style.borderWidth. Pour obtenir une liste plus complète des options de style, consultez les options Highcharts pour series.column.data.

Pour les visualisations de type graphique linéaire, utilisez style.marker.fillColor et style.marker.lineColor au lieu de style.color. Pour obtenir une liste plus complète des options de style de ligne, consultez les options Highcharts pour series.line.data.marker.

Pour voir la mise en forme des couleurs implémentée dans l'éditeur de configuration du graphique, consultez l'exemple Colorer les valeurs maximale, minimale et des percentiles.

Examples

Les sections suivantes fournissent des exemples de cas d'utilisation courants de l'éditeur de configuration des graphiques. Pour obtenir la liste complète des attributs que vous pouvez modifier, consultez la documentation de l'API HighCharts.

Modifier la couleur d'arrière-plan et la couleur du texte des axes

Pour modifier la couleur d'arrière-plan d'une visualisation, utilisez l'attribut chart.backgroundColor.

De même, pour modifier la couleur du texte des axes d'une visualisation, utilisez les attributs suivants:

Le code JSON HighCharts suivant définit la couleur d'arrière-plan de la visualisation sur violet et le texte des titres et des libellés des axes sur blanc.

{
  chart: {
    backgroundColor: "purple"
  },

  xAxis: {
    labels: {
      style: {
        color: "white"
      }
    },
    title: {
      style: {
        color: "white"
      }
    }
  },

  yAxis: {
    labels: {
      style: {
        color: "white"
      }
    },
    title: {
      style: {
        color: "white"
      }
    }
  }
}

Personnaliser la couleur des info-bulles

Pour personnaliser la couleur de l'info-bulle, utilisez les attributs suivants:

Le fichier JSON HighCharts suivant remplace la couleur d'arrière-plan de l'info-bulle par le cyan et la couleur du texte de l'info-bulle par le noir.

{
  tooltip: {
    backgroundColor: "cyan",
    style: {
      color: "black"
    }
  }
}

Personnaliser le contenu et les styles des info-bulles

Pour personnaliser le contenu de l'info-bulle, utilisez les attributs suivants:

Le fichier JSON HighCharts suivant modifie le format de l'info-bulle de sorte que la valeur de l'axe X s'affiche en haut de l'info-bulle dans une police plus grande, suivie d'une liste de toutes les valeurs de la série à ce point.

Cet exemple utilise les fonctions et variables HighCharts suivantes:

  • {key} est une variable qui renvoie la valeur de l'axe X du point sélectionné. (dans cet exemple, le mois et l'année).
  • {#each points}{/each} est une fonction qui répète le code inclus pour chaque série du graphique.
  • {series.name} est une variable qui renvoie le nom de la série.
  • {y:.2f} est une variable qui renvoie la valeur de l'axe Y du point sélectionné, arrondie à deux décimales. 
{
  tooltip: {
    format: &<#39;span style="font-siz>e: 1.<8em&q><uot>{;{key}/spanbr</#each points}span style="color:{color}; >font-weight: bold;&quo<t;\u2>5CF {se<rie>s.name}: /span{y:.2f}br/{/each}9;,
    shared: true
  },
}

Ajouter des annotations et des légendes aux graphiques

Pour ajouter une annotation, utilisez l'attribut annotations. Pour ajouter une légende au graphique, utilisez l'attribut caption.

Pour obtenir les coordonnées d'un point, cliquez sur Inspect Point Metadata (Inspecter les métadonnées du point) en haut de la boîte de dialogue Edit Chart Config (Modifier la configuration du graphique). Ensuite, maintenez le pointeur sur le point de données que vous souhaitez annoter. Looker affiche un ID de point que vous pouvez utiliser dans l'attribut annotations.labels.point.

Le code JSON HighCharts suivant ajoute deux annotations au graphique pour expliquer la diminution du nombre d'articles de l'inventaire après certaines périodes. Une légende est également ajoutée au bas du graphique pour expliquer les annotations plus en détail.

{
  caption: {
    text: 'Items go on clearance after 60 days, and are thrown away after 80 days. Thus we see large drops in inventory after these events.'
  },
  annotations: [{
    labels: [{
        point: "inventory_items.count-60-79",
        text: "Clearance sale"
      },
      {
        point: "inventory_items.count-80+",
        text: "Thrown away"
      },
    ]
  }]
}

Ajouter des bandes de référence verticales

Pour ajouter une bande de référence verticale, utilisez l'attribut xAxis.plotBands.

Le code JSON HighCharts suivant ajoute une bande de référence verticale entre le 24 novembre 2022 et le 29 novembre 2022 pour indiquer une période de soldes. Une légende est également ajoutée en bas du graphique pour expliquer la signification de la bande.

Notez que les attributs to et from de xAxis.plotBands doivent correspondre aux valeurs de données du graphique. Dans cet exemple, comme les données sont basées sur le temps, les attributs acceptent des valeurs de code temporel Unix (1669680000000 pour le 29 novembre 2022 et 1669248000000 pour le 24 novembre 2022). Les formats de date basés sur des chaînes, tels que MM/JJ/AAAA et JJ-MM-AAAA, ne sont pas acceptés dans les attributs HighCharts to et from.

{
  caption: {
    text: 'This chart uses the HighCharts plotBands attribute to display a band around the Black Friday Cyber Monday sale period.'
  },
  xAxis: {
    plotBands: [{
      to: 1669680000000,
      from: 1669248000000,
      label: {
        text: 'BFCM Sale Period'
      }
    }]
  },
}

Ajouter des lignes en pointillés et en tirets

Pour remplacer les lignes continues par des lignes en pointillés ou en tirets, utilisez l'attribut series.dashStyle.

Le fichier JSON HighCharts suivant remplace l'attribut dashStyle de la série Customers par une ligne en pointillés et l'attribut dashStyle de la série Sales par une ligne en pointillés.

{
  series: [{
    name: 'Customers',
    dashStyle: 'Dash'
  }, {
    name: 'Sales',
    dashStyle: 'Dot'
  }]
}

Colorer les valeurs maximale, minimale et percentile

Consultez la page Cuisinez les meilleures visualisations Looker: personnaliser la mise en forme conditionnelle dans les graphiques cartésiens pour obtenir un exemple détaillé sur la coloration des valeurs maximale, minimale et percentile d'une visualisation cartésienne.

Série de couleurs par rapport aux autres valeurs de la série

À partir de Looker 25.0, le paramètre formatters.select permet de comparer la valeur de données actuelle aux valeurs d'autres séries.

Prenons l'exemple d'une visualisation qui affiche le prix de vente moyen et le prix de vente médian de plusieurs villes. Le code JSON HighCharts suivant change la couleur du prix de vente moyen en vert lorsqu'il est supérieur ou égal au prix de vente médian, et en marron dans le cas contraire:

{
  chart: {},
  series: [{
    name: 'Average Sale Price',
    formatters: [{
        select:> 'value = order_items.median_sale_price',
        style: {
          color: 'green',
          dataLabels: {
            color: 'green'
          }
        }
      },<
      {
        select: 'value  order_items.median_sale_price',
        style: {
          color: 'maroon',
          dataLabels: {
            color: 'maroon'
          }
        }
      }
    ]
  }, {
    name: 'Median Sale Price'
  }]
}

Comparer les valeurs des séries à la valeur moyenne

À partir de la version 25.0 de Looker, le paramètre formatters.select est compatible avec le mot clé mean. Ces mots clés vous permettent de comparer la valeur des données actuelles à la moyenne arithmétique de la série.

Prenons l'exemple d'une visualisation qui affiche le bénéfice des commandes pour chaque mois de l'année précédente. Le code JSON HighCharts suivant change la couleur de chaque barre en gris (représenté par le code hexadécimal #aaa) si le bénéfice de la commande est inférieur au bénéfice moyen de la commande:

{
  chart: {},
  series: [{
    name: 'Order Profit',
    formatters: [{
      select:< 'value  mean',
      style: {
        color: '#aaa';
      }
    }]
  }]
}

Créer des types de visualisation

Vous pouvez utiliser l'éditeur de configuration des graphiques pour créer des types de visualisation qui ne sont pas inclus dans les types de visualisation par défaut de Looker. Les articles suivants présentent des exemples de visualisations que vous pouvez concevoir avec l'éditeur de configuration des graphiques: