Gráficos personalizados

Documentos > App Builder > Componentes > Gráficos personalizados

Esta página te muestra un ejemplo de cómo utilizar el componente de gráfico personalizado en tus aplicaciones App Builder.

El flujo de trabajo básico para crear un gráfico personalizado es el siguiente:

Crea o elige una consulta que contenga los datos que quieres graficar.
Añade el componente de gráfico personalizado y elige un estilo de gráfico de la interfaz de usuario de App Builder o de la galería de ejemplos de Vega-Lite.
Sustituye los valores del ejemplo por los datos de tu consulta.

Ejemplo de flujo de una configuración

El siguiente ejemplo muestra cómo crear un gráfico de histograma para ilustrar logs de Datadog agrupados por servicio.

Configurar tu fuente de datos

Haz clic en + New Query (+ Nueva consulta).
Busca “buscar logs” y elige la acción Buscar logs de Datadog para crear una consulta llamada searchLogs0.
Elige una conexión de cuenta de Datadog existente o crea una nueva.
En Entradas, para Periodo de tiempo, elige Pasados 2 días.
Haz clic en Run (Ejecutar).
En la parte inferior izquierda aparece un panel con los resultados de tu consulta.
En logs, expande 0 y luego expande content. Esta acción te muestra las propiedades disponibles de cada log.

Añadir el componente de gráfico personalizado y elegir un estilo de gráfico

Haz clic en + All Components (+ Todos los componentes) y selecciona Gráfico personalizado para añadir un componente llamado customChart0.
Haz clic en Show Chart Examples (Mostrar ejemplos de gráficos).

Selecciona Histograma simple y haz clic en Confirm (Confirmar).
El siguiente valor se rellena en la especificación de Vega:

${{
    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
    "data": {
        "url": "https://vega.github.io/editor/data/movies.json"
    },
    "mark": {
        "type": "bar",
        "tooltip": true
    },
    "encoding": {
        "x": {
            "bin": true,
            "field": "IMDB Rating"
        },
        "y": {
            "aggregate": "count"
        }
    }
}}

Sustituir los valores de ejemplo por tus propios datos

Sustituye la especificación de Vega rellenada automáticamente por lo siguiente, para cambiar la fuente de datos y el valor que se representa gráficamente en el eje x:

${{
    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
    "data": {
        "values": searchLogs0.outputs.logs
    },
    "mark": {
        "type": "bar",
        "tooltip": true
    },
    "encoding": {
        "x": {
            "field": "content.service"
        },
        "y": {
            "aggregate": "count"
        }
    }
}}