다음 테이블을 이용하여 차트를 그려봅시다.
다음과 같은 차트를 두 가지 방법으로 얻을 수 있습니다.
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;
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;
[
{
"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"
}
}
]
"yaxis2": {
"title": {
"text": "percent",
"standoff": 12,
"font": {
"size": 12
}
},
"overlaying": "y",
"side": "right",
"type": "linear",
"automargin": true,
"fixedrange": true,
"zerolinecolor": "#DEDEDE",
"range": [0,100]}
}
"textinfo" : "label+value+percent",
를 추가합니다. 화면 기록 2023-01-30 오전 11.31.41.mov