Retool Dashboard 101 - (4) Chart

DMIS·2023년 2월 9일
0

Retool

목록 보기
4/6
post-thumbnail

⚠︎ 유의사항

  • velog에 영상 업로드가 불가능한 관계로 스크린샷으로 대체합니다.
  • 스크린샷은 조만간 업데이트 하겠습니다.

✐ 차트 그리기

다음 테이블을 이용하여 차트를 그려봅시다.

☺︎ 기본

✔︎ Bar chart(Line chart도 거의 동일)


✔︎ Pie chart

☻ 심화

✔︎ 차트 레시피

다음과 같은 차트를 두 가지 방법으로 얻을 수 있습니다.

  1. SQL(70%) + Retool(30%)

    select to_char(paid_at AT TIME ZONE 'Asia/Seoul','YYYY-MM'),
           sum(amount)
    from orders_order
    where to_char(paid_at AT TIME ZONE 'Asia/Seoul','YYYY-MM') is not null
    group by 1
    order by 1 desc;

  2. SQL(30%) + Retool(70%)

    select to_char(paid_at AT TIME ZONE 'Asia/Seoul','YYYY-MM'),
    			 amount
    from orders_order
    where to_char(paid_at AT TIME ZONE 'Asia/Seoul','YYYY-MM') is not null
    order by 1 desc;


✔︎ 하나의 차트에서 두 개의 y축 사용하기

  • 차트의 DataUI Form에서 Plotly JSON으로 변경하고, 다음과 같이 내용을 추가합니다.
    • 다음과 같이 입력하면 기존 매출액이 왼쪽에, 결제건수(y2)가 오른쪽에 생깁니다.
      [
        {
          "name": "매출액",
          "x": {{query2.data.날짜}},
          "y": {{query2.data['매출액']}},
          "type": "bar",
          "hovertemplate": "<b>%{x}</b><br>%{fullData.name}: %{y}<extra></extra>",
          "transforms": [
            {
              "type": "sort",
              "target": {{query2.data.날짜}},
              "order": "ascending"
            },
            {
              "type": "aggregate",
              "groups": {{query2.data.날짜}},
              "aggregations": [
                {
                  "target": "y",
                  "func": "sum",
                  "enabled": true
                }
              ]
            }
          ],
          "marker": {
            "color": "#033663"
          }
        },
        {
          "name": "결제건수",
          "x": {{query2.data.날짜}},
          "y": {{ query2.data['결제건수']}},
          "type": "scatter","yaxis": "y2",
          "transforms": [
            {
              "type": "sort",
              "target": {{query2.data.날짜}},
              "order": "ascending"
            },
            {
              "type": "aggregate",
              "groups": {{query2.data.날짜}},
              "aggregations": [
                {
                  "target": "y",
                  "func": "sum",
                  "enabled": true
                }
              ]
            }
          ],
          "marker": {
            "color": "#247BC7"
          }
        }
      ]
    • 만약 y2에 percent를 추가했다면, LayoutUI Form에서 Plotly JSON으로 변경하고, 다음 내용을 추가합니다.(y축 범위 설정)
      "yaxis2": {
          "title": {
            "text": "percent",
            "standoff": 12,
            "font": {
              "size": 12
            }
          },
          "overlaying": "y",
          "side": "right",
          "type": "linear",
          "automargin": true,
          "fixedrange": true,
          "zerolinecolor": "#DEDEDE",
          "range": [0,100]}
      }

Pie chart에서 textinfo 보여주기


✔︎ 기타

profile
Data + Math

0개의 댓글