본문 바로가기
WIKI 기술 지식 베이스

템플릿 변수를 활용한 임베드 그래프

원문 보기 위키 갱신

API로 만든 임베드(embed) 그래프는 템플릿 변수를 지원해요. 아래는 Python을 이용해 avg:system.cpu.user{$var}을 쿼리하는 예시예요. 이 예시에서 $var가 바로 템플릿 변수랍니다. 참고: 이 방식은 timeseries 시각화만 지원해요.

출처: 문서

본문

API로 생성된 임베드 그래프는 템플릿 변수를 받을 수 있어요. 아래는 Python으로 avg:system.cpu.user{$var}를 쿼리하는 예시인데요, 여기서 $var가 템플릿 변수예요. 참고: 이 방식은 timeseries 시각화만 지원한다는 점을 기억해 주세요.

from datadog import initialize, api
import json

# Initialize request parameters with Datadog API/APP key
options = {
    'api_key': '<DATADOG_API_KEY>',
    'app_key': '<DATADOG_APPLICATION_KEY>'
}

initialize(**options)

# Create an embed graph definition as a dict and format as JSON
graph_json = {
    "requests": [{
        "q": "avg:system.cpu.user{$var}"
    }],
    "viz": "timeseries",
    "events": []
}
graph_json = json.dumps(graph_json)

api.Embed.create(
    graph_json=graph_json,
    timeframe="1_hour",
    size="medium",
    legend="no"
)

응답 예시:

{
  'embed_id': '<EMBED_ID>',
  'revoked': False,
  'template_variables': ['var'],
  'html': '<iframe src="https://app.datadoghq.com/graph/embed?token=<EMBED_TOKEN>&height=300&width=600&legend=false&var=*" width="600" height="300" frameBorder="0"></iframe>',
  'graph_title': 'Embed created through API',
  'dash_url': None,
  'shared_by': 734258,
  'dash_name': None
}

응답 객체의 HTML을 사용해 임베드 그래프를 웹사이트에 표시할 수 있어요. iframe URL에서 $var 템플릿 변수가 기본적으로 *로 설정된 것을 확인할 수 있는데요, 이는 쿼리 avg:system.cpu.user{*}와 동일해요.

<iframe src="https://app.datadoghq.com/graph/embed?token=<EMBED_TOKEN>&height=300&width=600&legend=false&var=*" width="600" height="300" frameBorder="0"></iframe>

임베드 예시:

{% image source="https://docs.dd-static.net/images/dashboards/guide/embeddable_graph01.b6619e8f6ae575582bce264b87475932.png?auto=format&fit=max&w=850 1x, https://docs.dd-static.net/images/dashboards/guide/embeddable_graph01.b6619e8f6ae575582bce264b87475932.png?auto=format&fit=max&w=850&dpr=2 2x" alt="Embed Graph with No Filter" /%}

템플릿 변수를 사용해 iframe URL을 업데이트해서 필터를 정의하면 그래프를 바꿀 수 있어요. 아래 HTML에서는 *를 host:embed-graph-test로 바꿨어요.

<iframe src="https://app.datadoghq.com/graph/embed?token=<EMBED_TOKEN>&height=300&width=600&legend=false&var=host:embed-graph-test" width="600" height="300" frameBorder="0"></iframe>

임베드 예시:

{% image source="https://docs.dd-static.net/images/dashboards/guide/embeddable_graph02.011f7cac839b02f342622d38be3d248c.png?auto=format&fit=max&w=850 1x, https://docs.dd-static.net/images/dashboards/guide/embeddable_graph02.011f7cac839b02f342622d38be3d248c.png?auto=format&fit=max&w=850&dpr=2 2x" alt="Embed Graph with Filter" /%}

더 알아보기 (Learn more)

도움이 되는 추가 문서, 링크, 아티클이에요: