Personaliza visualizaciones con el editor de configuración de gráficos

Puedes usar el editor de configuración de gráficos para personalizar las opciones de formato en las visualizaciones de Looker que usan la API de HighCharts. Esto incluye la mayoría de los gráficos cartesianos, como el gráfico de columnas, el gráfico de barras y el gráfico de líneas, entre otros.

Si las funciones de Gemini en Looker están habilitadas, puedes usar el Asistente de visualización para generar opciones de formato JSON a partir de instrucciones basadas en texto y acelerar la personalización de las visualizaciones de Looker.

Requisitos previos

Para acceder al editor de configuración de gráficos, debes tener el can_override_vis_config permiso.

Cómo personalizar una visualización

Para personalizar una visualización con el editor de configuración de gráficos, sigue estos pasos:

Visualiza una visualización en una Exploración o edita una visualización en una Vista o un panel.
Abre el menú Editar en la visualización.
Haz clic en el botón Editar configuración del gráfico en la pestaña Trazar. Looker muestra el diálogo Editar configuración del gráfico.
- El panel Configuración del gráfico (fuente) contiene el JSON original de tu visualización y no se puede editar.
- El panel Configuración del gráfico (anulación) contiene el JSON que debe anular el JSON de origen. Cuando abres el diálogo Editar configuración del gráfico por primera vez, Looker propaga el panel con un JSON predeterminado. Puedes comenzar con este JSON o borrarlo y, luego, ingresar cualquier JSON de HighCharts válido.
Selecciona la sección Configuración del gráfico (anulación) y, luego, ingresa un JSON de HighCharts válido. Los valores nuevos anularán cualquier valor de la sección Configuración del gráfico (fuente).
- Consulta la sección Ejemplos para ver ejemplos de JSON de HighCharts válidos.
- Looker acepta cualquier valor JSON válido. Looker no acepta funciones, fechas ni valores sin definir.
Haz clic en <> (Formatear código) para permitir que Looker formatee correctamente tu JSON.
Haz clic en Vista previa para probar los cambios.
Haz clic en Aplicar para aplicar los cambios. La visualización se mostrará con los valores JSON personalizados.

Una vez que hayas personalizado la visualización, podrás guardarla. Si visualizaste la visualización en una Exploración, guarda la Exploración. Si editaste una Vista o un panel, haz clic en Guardar.

Si intentas obtener una vista previa del código que contiene JSON no válido, Looker mostrará un mensaje de error Invalid JSON detected. Puedes limpiar el JSON no válido con la opción Autofix code en la parte inferior del panel Configuración del gráfico (anulación).

Si deseas editar las opciones de visualización predeterminadas, primero quita los cambios que realizaste en el editor de configuración de gráficos y, luego, reemplázalos. En particular, sigue estos pasos:

Haz clic en el botón Editar configuración del gráfico en la pestaña Trazar. Looker muestra el diálogo Editar configuración del gráfico.
Copia el texto en el panel Configuración del gráfico (anulación).
Haz clic en el botón Borrar anulaciones del gráfico para borrar todos los cambios.
Haz clic en Aplicar.
Edita la visualización con las opciones de visualización predeterminadas.
Haz clic en el botón Editar configuración del gráfico en la pestaña Trazar. Looker muestra el diálogo Editar configuración del gráfico.
Ingresa un JSON de HighCharts válido en el panel Configuración del gráfico (anulación). Puedes usar el texto que copiaste en el paso 2 como plantilla, pero asegúrate de probar los cambios con el botón Vista previa para asegurarte de que no haya conflictos.
Haz clic en Aplicar.

Formato condicional con `series formatters`

El editor de configuración de gráficos acepta la mayoría de los JSON de HighCharts válidos. También acepta el atributo series formatters, que solo existe en Looker. Cada serie puede tener varios formateadores para combinar diferentes reglas de estilo.

El atributo series formatters acepta dos atributos: select y style.

Ingresa una expresión lógica en el atributo select para indicar qué valores de datos se formatearán.
Ingresa un JSON en el atributo style para indicar cómo formatear los valores de datos.

Por ejemplo, el siguiente JSON coloreará cada valor de datos de color naranja si es mayor o igual que 380:

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

En las siguientes secciones, se describen los valores potenciales de los atributos select y style con más detalle.

El atributo `select`

Puedes usar los siguientes valores en una expresión select:

value: Esta variable muestra el valor de la serie. Puedes usar este valor en comparaciones, como en los siguientes ejemplos:
- La expresión select: value > 100 coincide con las filas cuyos valores son mayores que 100.
- La expresión select: value > VIEW_NAME.FIELD_NAME coincide con las filas cuyos valores son mayores que otro campo de esa fila. Consulta la sección Comparación de series de colores con otros valores de series para ver un ejemplo.
- La expresión select: value > mean coincide con las filas cuyos valores son mayores que la media de esa serie. Consulta la sección Comparación de valores de series con el valor medio o promedio para ver un ejemplo.
- La expresión select: value > median coincide con las filas cuyos valores son mayores que la mediana de esa serie. Consulta la sección Comparación de valores de series con el valor medio o promedio para ver un ejemplo.
max: Usa select: max para segmentar el valor de la serie que tiene el valor máximo.
min: Usa select: min para segmentar el valor de la serie que tiene el valor mínimo.
percent_rank: Esta variable segmenta el valor de la serie con un percentil especificado. Por ejemplo, puedes usar select: percent_rank >= 0.9 para segmentar valores de series en el percentil noventa.
name: Esta variable muestra el valor de dimensión de la serie. Por ejemplo, si tienes un gráfico que muestra los pedidos vendidos, cancelados y devueltos, puedes usar select: name = Sold para segmentar la serie en la que el valor de dimensión es Vendido.
AND/OR Usa AND y OR para combinar varias expresiones lógicas.

Para ver estas expresiones implementadas en el editor de configuración de gráficos, consulta el ejemplo de colorear los valores máximo, mínimo y de percentil.

El atributo `style`

El atributo style se puede usar para aplicar estilos compatibles con HighCharts. Por ejemplo, puedes colorear valores de series con style.color, colorear bordes de series con style.borderColor y establecer el ancho del borde de la serie con style.borderWidth. Para obtener una lista más completa de opciones de estilo, consulta las opciones de Highcharts para series.column.data.

Para las visualizaciones de líneas, usa style.marker.fillColor y style.marker.lineColor en lugar de style.color. Para obtener una lista más completa de opciones de estilo de línea, consulta las opciones de Highcharts para series.line.data.marker.

Para ver el formato de color implementado en el editor de configuración de gráficos, consulta el ejemplo de colorear los valores máximo, mínimo y de percentil.

Metadatos de campos

El menú desplegable Metadatos de campos te permite copiar el nombre de la serie para cualquier campo de tu visualización. Puedes usar este nombre de serie con el atributo series formatters para comparar valores de diferentes series. Consulta la sección Comparación de series de colores con otros valores de series para ver un ejemplo.

Ejemplos

En las siguientes secciones, se proporcionan ejemplos de algunos casos de uso comunes del editor de configuración de gráficos. Para obtener una lista completa de los atributos que puedes editar, consulta la documentación de la API de HighCharts.

Cambia el color de fondo y el color del texto del eje
Personaliza el color de la información sobre la herramienta
Agrega anotaciones y subtítulos a los gráficos
Agrega bandas de referencia verticales
Colorea los valores máximo, mínimo y de percentil

Cambia el color de fondo y el color del texto del eje

Para cambiar el color de fondo de una visualización, usa el chart.backgroundColor atributo.

Del mismo modo, para cambiar el color del texto de los ejes en una visualización, usa los siguientes atributos:

El siguiente JSON de HighCharts cambia el color de fondo de la visualización a morado y el texto de los títulos y las etiquetas de los ejes a blanco.

{
  chart: {
    backgroundColor: "purple"
  },

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

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

Para personalizar el color de la información sobre la herramienta, usa los siguientes atributos:

El siguiente JSON de HighCharts cambia el color de fondo de la información sobre la herramienta a cian y el color del texto de la información sobre la herramienta a negro.

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

Para personalizar el contenido de la información sobre la herramienta, usa los siguientes atributos:

El siguiente JSON de HighCharts cambia el formato de la información sobre la herramienta de modo que el valor del eje X aparezca en la parte superior de la información sobre la herramienta con una fuente más grande, seguido de una lista de todos los valores de la serie en ese punto.

En este ejemplo, se usan las siguientes funciones y variables de HighCharts:

{key} es una variable que muestra el valor del eje X del punto seleccionado (en este ejemplo, el mes y el año).
{#each points}{/each} es una función que repite el código adjunto para cada serie del gráfico.
{series.name} es una variable que muestra el nombre de la serie.
{y:.2f} es una variable que muestra el valor del eje Y del punto seleccionado, redondeado a dos decimales.
- {y} es una variable que muestra el valor del eje Y del punto seleccionado.
- {variable:.2f} redondea variable a dos decimales. Consulta la documentación de plantillas de Highcharts para obtener más ejemplos de formato de valores.

{
  tooltip: {
    format: '<span style="font-size: 1.8em">{key}</span><br/>{#each points}<span style="color:{color}; font-weight: bold;">\u25CF {series.name}: </span>{y:.2f}<br/>{/each}',
    shared: true
  },
}

Agrega anotaciones y subtítulos a los gráficos

Para agregar una anotación, usa el annotations atributo. Para agregar un subtítulo al gráfico, usa el caption atributo.

Para obtener las coordenadas de un punto, haz clic en Inspeccionar metadatos de puntos en la parte superior del diálogo Editar configuración del gráfico. Luego, mantén el puntero sobre el punto de datos que deseas anotar. Looker muestra un ID de punto, que puedes usar en el atributo annotations.labels.point.

El siguiente JSON de HighCharts agrega dos anotaciones al gráfico para explicar una disminución en los artículos del inventario después de ciertos períodos. También agrega un subtítulo en la parte inferior del gráfico para explicar las anotaciones con más detalle.

{
  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"
      },
    ]
  }]
}

Agrega anotaciones dinámicas

También puedes usar los parámetros annotationsSource y annotationsTarget para usar datos de un campo como anotación.

Para obtener los nombres de los campos, puedes usar el menú desplegable Metadatos de campos. Ten en cuenta que el campo annotationsTarget debe ser una medida.

El siguiente JSON de HighCharts usa el valor del campo orders.annotations como anotación en el campo orders.count:

{
  annotations: [{
    labels: [{
      annotationsSource: 'orders.annotations',
      annotationsTarget: 'orders.count'
    }]
  }]
}

Agrega bandas de referencia verticales

Para agregar una banda de referencia vertical, usa el xAxis.plotBands atributo.

El siguiente JSON de HighCharts agrega una banda de referencia vertical entre el 24 y el 29 de noviembre de 2022 para indicar un período de oferta. También agrega un subtítulo en la parte inferior del gráfico para explicar la importancia de la banda.

Ten en cuenta que los atributos to y from de xAxis.plotBands deben corresponder a los valores de datos del gráfico. En este ejemplo, como los datos se basan en el tiempo, los atributos aceptan valores de marca de tiempo de Unix (1669680000000 para el 29 de noviembre de 2022 y 1669248000000 para el 24 de noviembre de 2022). Los formatos de fecha basados en cadenas, como MM/DD/AAAA y DD-MM-AA, no son compatibles con los atributos to y from de HighCharts.

{
  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'
      }
    }]
  },
}

Agrega líneas punteadas y discontinuas

Para cambiar las líneas continuas a líneas punteadas o discontinuas, usa el series.dashStyle atributo.

El siguiente JSON de HighCharts cambia el atributo dashStyle de la serie Customers a una línea discontinua y el atributo dashStyle de la serie Sales a una línea punteada.

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

Colorea los valores máximo, mínimo y de percentil

Consulta el libro de recetas Aprovecha al máximo las visualizaciones de Looker: Personalización del formato condicional en gráficos cartesianos para ver un ejemplo detallado sobre cómo colorear los valores máximo, mínimo y de percentil de una visualización cartesiana.

Comparación de series de colores con otros valores de series

A partir de Looker 25.0, el parámetro formatters.select te permite comparar el valor de datos actual con los valores de otras series.

Por ejemplo, considera una visualización que muestre el precio de oferta promedio y el precio de oferta medio para varias ciudades. El siguiente JSON de HighCharts cambia el color del precio de oferta promedio a verde cuando es mayor o igual que el precio de oferta medio y a marrón en caso contrario:

{
  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'
  }]
}

Ten en cuenta que la línea select: 'value >= order_items.median_sale_price' hace referencia al campo Precio de oferta medio en el formato VIEW_NAME.FIELD_NAME. Para copiar este valor de campo directamente, haz clic en el menú desplegable Metadatos de campos en el diálogo Editar configuración del gráfico y selecciona el nombre del campo.

Comparación de valores de series con el valor medio o promedio

El parámetro formatters.select admite la palabra clave mean en Looker 25.0 y versiones posteriores, y la palabra clave median en Looker 25.2 y versiones posteriores. Estas palabras clave te permiten comparar el valor de datos actual con la media aritmética o la mediana de la serie.

Por ejemplo, considera una visualización que muestre la ganancia de pedidos de cada mes del año pasado. El siguiente JSON de HighCharts cambia el color de cada barra a gris (representado por el código hexadecimal #aaa) si la ganancia de pedidos es inferior a la ganancia de pedidos media:

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

Para comparar el valor de la serie con la mediana en lugar de con la media, cambia la línea select: 'value < mean' a select: 'value < median'.

Usa plantillas para guardar y compartir configuraciones

Puedes guardar una configuración como plantilla para poder volver a usarla en otras visualizaciones o compartirla como punto de partida para otros usuarios.

Guarda una plantilla

Mientras editas JSON de HighCharts en el editor de configuración de gráficos, puedes guardar tu código como plantilla siguiendo estos pasos:

En el diálogo Editor de configuración de gráficos, haz clic en Guardar como plantilla.
Establece un nombre único para la plantilla.
Ingresa una descripción que les indique a otros usuarios lo que hace tu plantilla.
Edita y obtén una vista previa del código según sea necesario.
Haz clic en Guardar para validar el código.
Corrige los errores de validación.
Vuelve a hacer clic en Guardar para guardar la plantilla.

Ten en cuenta las siguientes consideraciones cuando crees una plantilla:

Los usuarios incorporados no pueden crear, editar ni aplicar plantillas.
Todos los usuarios que no estén incorporados en tu instancia y que tengan acceso al editor de configuración de gráficos podrán ver tu plantilla.
No todas las plantillas funcionan bien para todos los tipos de visualización. Considera especificar con qué tipo de visualización se debe usar tu plantilla en el campo Descripción.

Aplica una plantilla

Puedes aplicar una plantilla a tu visualización actual. Ten en cuenta las siguientes consideraciones cuando apliques una plantilla:

Si aplicas una plantilla, se reemplazará cualquier código que hayas escrito en el editor de configuración de gráficos.
No todas las plantillas funcionan bien para todos los tipos de visualización. Por ejemplo, si el autor de una plantilla escribió código para un gráfico de barras, ese código puede tener efectos diferentes en un gráfico de líneas.

Para aplicar una plantilla, sigue estos pasos:

En el diálogo Editor de configuración de gráficos, haz clic en Plantillas guardadas.
Haz clic en una plantilla y, luego, en Aplicar plantilla.
Haz clic en Continuar.

Looker aplicará la plantilla y podrás seguir realizando ediciones en el editor de configuración de gráficos.

Borra una plantilla

Para borrar una plantilla, sigue estos pasos:

En el diálogo Editor de configuración de gráficos, haz clic en Plantillas guardadas.
Haz clic en el menú de tres puntos junto a la plantilla que deseas borrar.
Haz clic en Borrar.

Una vez que termines de realizar los cambios, haz clic en el botón X en el diálogo Plantillas guardadas para volver al diálogo Editor de configuración de gráficos.

Edita una plantilla

Para editar una plantilla, sigue estos pasos:

En el diálogo Editor de configuración de gráficos, haz clic en Plantillas guardadas.
Haz clic en el menú de tres puntos junto a la plantilla que deseas editar.
Haz clic en Editar.
Una vez que termines de realizar los cambios, haz clic en Guardar.

Crea nuevos tipos de visualización

Puedes usar el editor de configuración de gráficos para crear tipos de visualización que no se incluyen en los tipos de visualización predeterminados de Looker. En los siguientes artículos, se proporcionan ejemplos de algunas de las visualizaciones que puedes diseñar con el editor de configuración de gráficos: