Personalizar 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 de las visualizaciones de Looker que usan la API HighCharts. Esto incluye la mayoría de los gráficos cartesianos, como los gráficos de columnas, los gráficos de barras y los gráficos 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 peticiones de 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 permiso can_override_vis_config.

Personalizar una visualización

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

1. Ver una visualización en Explorar o editar una visualización en un look o un panel de control.
2. Abre el menú Editar en la visualización.

3. En la pestaña Gráfico, haz clic en el botón Editar configuración del gráfico. Looker muestra el cuadro de diálogo Editar configuración del gráfico.

   • El panel Configuración del gráfico (fuente) contiene el JSON original de la 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. La primera vez que abras el cuadro de diálogo Editar configuración del gráfico, Looker rellenará el panel con un JSON predeterminado. Puedes empezar con este JSON o eliminarlo e introducir cualquier JSON de HighCharts válido.

4. Selecciona la sección Configuración del gráfico (anulación) e introduce un archivo JSON de HighCharts válido. Los nuevos valores sustituirán a los 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 indefinidos.

5. Haz clic en <> (Formatear código) para que Looker pueda dar el formato adecuado a tu JSON.

6. Haz clic en Vista previa para probar los cambios.

7. 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, puedes guardarla. Si has visto la visualización en un Explorar, guarda el Explorar. Si has editado un Look o un panel de control, haz clic en Guardar.

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

Si quiere editar las opciones de visualización predeterminadas, primero elimine los cambios que haya hecho en el editor de configuración de gráficos y, después, sustitúyalos. En concreto, siga estos pasos:

1. En la pestaña Gráfico, haz clic en el botón Editar configuración del gráfico. Looker muestra el cuadro de diálogo Editar configuración del gráfico.
2. Copia el texto del panel Configuración del gráfico (anulación).
3. Haz clic en el botón Borrar anulaciones de gráfico para eliminar todos los cambios.
4. Haz clic en Aplicar.
5. Edita la visualización con las opciones predeterminadas.
6. En la pestaña Gráfico, haz clic en el botón Editar configuración del gráfico. Looker muestra el cuadro de diálogo Editar configuración del gráfico.
7. Introduce un JSON de HighCharts válido en el panel Configuración del gráfico (anulación). Puedes usar el texto que has copiado en el paso 2 como plantilla, pero asegúrate de probar los cambios con el botón Vista previa para comprobar que no haya conflictos.
8. Haz clic en Aplicar.

Formato condicional con series formatters

El editor de configuración de gráficos acepta la mayoría de los archivos 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.

• Introduzca una expresión lógica en el atributo select para indicar qué valores de datos se formatearán.
• Introduce código JSON en el atributo style para indicar cómo se deben formatear los valores de los datos.

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

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

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

Atributo select

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

• value: esta variable devuelve 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 un ejemplo en la sección Colorear series en comparación con otros valores de series.
  • La expresión select: value > mean coincide con las filas cuyos valores son superiores a la media de esa serie. Consulta un ejemplo en la sección Comparar los valores de una serie con el valor medio o la mediana.
  • La expresión select: value > median coincide con las filas cuyos valores son superiores a la mediana de esa serie. Consulte un ejemplo en la sección Comparar los valores de una serie con el valor medio o la mediana.
• max: usa select: max para orientar la serie al valor que tenga el valor máximo.
• min: usa select: min para segmentar el valor de la serie que tenga el valor mínimo.
• percent_rank: esta variable se dirige al 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 90.
• name: esta variable devuelve el valor de la dimensión de la serie. Por ejemplo, si tiene un gráfico que muestra los pedidos vendidos, cancelados y devueltos, puede usar select: name = Sold para orientar la serie en la que el valor de la dimensión es "Vendido".
• AND/OR Usa AND y OR para combinar varias expresiones lógicas.

Para ver cómo se implementan estas expresiones en el editor de configuración de gráficos, consulta el ejemplo Colorear los valores máximo, mínimo y de percentil.

Atributo style

El atributo style se puede usar para aplicar estilos compatibles con HighCharts. Por ejemplo, puedes asignar colores a los valores de las series con style.color, a los bordes de las series con style.borderColor y definir el ancho de los bordes de las series con style.borderWidth. Para ver una lista más completa de opciones de estilo, consulta las opciones de Highcharts para series.column.data.

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

Para ver cómo se implementa el formato de color en el editor de configuración de gráficos, consulta el ejemplo Colorear los valores máximo, mínimo y de percentil.

Metadatos de campo

El desplegable Metadatos de campo te permite copiar el nombre de la serie de cualquier campo de la visualización. Puede usar este nombre de serie con el atributo series formatters para comparar valores de diferentes series. Consulta un ejemplo en la sección Colorear series en comparación con otros valores de series.

Ejemplos

En las siguientes secciones se muestran ejemplos de algunos casos prácticos habituales del editor de configuración de gráficos. Para ver una lista completa de los atributos que puedes editar, consulta la documentación de la API HighCharts.

• Cambiar el color de fondo y el color del texto de los ejes
• Personalizar el color de la descripción emergente
• Añadir anotaciones y títulos a los gráficos
• Añadir bandas de referencia verticales
• Colorear los valores máximo, mínimo y de percentil

Cambiar el color de fondo y el color del texto de los ejes

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

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

• xAxis.labels.style.color
• xAxis.title.style.color
• yAxis.labels.style.color
• yAxis.title.style.color

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"
      }
    }
  }
}

Personalizar el color de la descripción emergente

Para personalizar el color de la descripción emergente, usa los siguientes atributos:

• tooltip.backgroundColor
• tooltip.style.color

El siguiente JSON de HighCharts cambia el color de fondo de la descripción emergente a cian y el color del texto de la descripción emergente a negro.

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

Personalizar el contenido y los estilos de las descripciones emergentes

Para personalizar el contenido de la descripción emergente, usa los siguientes atributos:

• tooltip.format
• tooltip.shared

El siguiente JSON de HighCharts cambia el formato de la descripción emergente para que el valor del eje X aparezca en la parte superior de la descripción emergente 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 devuelve 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 incluido en cada serie del gráfico.
• {series.name} es una variable que devuelve el nombre de la serie.
• {y:.2f} es una variable que devuelve el valor del eje Y del punto seleccionado, redondeado a dos decimales.
  • {y} es una variable que devuelve el valor del eje Y del punto seleccionado.
  • {variable:.2f} redondea variable a dos decimales. Consulta más ejemplos de formato de valores en la documentación de plantillas de Highcharts.

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

Añadir anotaciones y títulos a los gráficos

Para añadir una anotación, use el atributo annotations. Para añadir un título al gráfico, usa el atributo caption.

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

El siguiente JSON de HighCharts añade dos anotaciones al gráfico para explicar una disminución de los artículos del inventario después de determinados periodos. También se añade un tí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"