Custom Charts

Docs > App Builder > Components > Custom Charts

このページは日本語には対応しておりません。随時翻訳に取り組んでいます。翻訳に関してご質問やご意見ございましたら、お気軽にご連絡ください。

This page provides an example of how to use the custom chart component in your App Builder apps.

The basic workflow for creating a custom chart is as follows:

Create or choose a query that contains the data you want to graph.
Add the custom chart component and choose a chart style from the App Builder UI or the Vega-Lite example gallery.
Replace the values in the example with your query data.

Example setup flow

The following example shows how to create a histogram chart illustrating Datadog Logs grouped by service.

Set up your data source

Click + New Query.
Search for “search logs” and choose the Datadog Search logs action to create a query called searchLogs0.
Choose an existing Datadog Account Connection, or create a new one.
Under Inputs, for Time period, choose Past 2 Days.
Click Run.
A panel displays the outputs of your query in the bottom-left.
Under logs, expand 0, then expand content. This shows the available properties for each log.

Add the custom chart component and choose a chart style

Click + All Components and select Custom Chart to add a component called customChart0.
Click Show Chart Examples.

Select Simple Histogram and click Confirm.
The following value populates in the Vega Specification:

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

Replace example values with your data

Replace the auto-populated Vega Specification with the following to change the data source and the value being graphed on the x-axis:

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