# \[displayFn\] billboardjs

**URL:** <https://ask.selectfromuser.com/t/displayfn-billboardjs/219>\
**Category:** 사용 팁\
**Tags:** displayfn, billboardjs\
**Created:** [7월 4, 2024, 3:39오전 UTC](https://ask.selectfromuser.com/t/displayfn-billboardjs/219 "2024-07-04T03:39:19Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![hbkim](https://yyz2.discourse-cdn.com/flex032/user_avatar/ask.selectfromuser.com/hbkim/32/23_2.png) [@hbkim](https://ask.selectfromuser.com/u/hbkim)\
**Post date:** [7월 4, 2024, 3:39오전 UTC](https://ask.selectfromuser.com/t/displayfn-billboardjs/219/1 "2024-07-04T03:39:19Z")

</div>

Chart.js 이외에 여러 차트 선택지를 추가하였습니다.

### **display: billboardjs**

- billboard.js 스크립트를 사용할 수 있습니다.
- ChatGPT 등을 통해 더 잘 활용할 수 있습니다. (e.g. “billboard.js로 bar 그리는 js 코드를 알려줘”)

### **displayFn**

- block.id와 displayFn안에 차트를 그릴때 ID가 동일해야합니다.
- sqlMany 기능이 추가되었습니다. (여러개 쿼리 실행시 rows[0], rows[1] 안에 각각 결과가 담깁니다: 지난주/이번주 데이터 비교 등에 사용 가능)
- displayFn안에서 쓸수있는 변수: rows, id, openModal, openAction, `_` lodash 데이터 처리용

### **예시 YAML 코드**

 ![image](https://canada1.discourse-cdn.com/flex032/uploads/selectfromuser/original/1X/4df1978538a19a8dd9852dfc66ed995e52ccc836.png)

```yaml
menus:
- path: pages/8y_rbk-4
  name: billboard
pages:
- path: pages/8y_rbk-4
  # title: 제목
  # subtitle: 내용
  blocks:
  - type: query
    resource: mysql.qa
    sqlType: select
    sql: >
      SELECT DATE(created_at), COUNT(id) FROM TestLog 
      WHERE created_at > '2024-05-15'
      GROUP BY 1
    modals:
      - path: view
        blocks:
          - type: query
            resource: mysql.qa
            sqlType: select
            sql: SELECT :id
            params:
              - key: id
                valueFromRow: id

    display: billboardjs
    id: gaugeChart
    displayFn: |
      var chart = bb.generate({
        data: {
          columns: [
            ["data", 91.4]
          ],
          type: "gauge", // for ESM specify as: gauge()
          onclick: function (d, i) {
            console.log("onclick", d, i);
          },
          onover: function (d, i) {
            console.log("onover", d, i);
          },
          onout: function (d, i) {
            console.log("onout", d, i);
          }
        },
        gauge: {},
        color: {
          pattern: [
            "#FF0000",
            "#F97600",
            "#F6C600",
            "#60B044"
          ],
          threshold: {
            values: [
              30,
              60,
              90,
              100
            ]
          }
        },
        size: {
          height: 180
        },
        bindto: "#gaugeChart"
      });

      setTimeout(function () {
        chart.load({
          columns: [
            ["data", 10]
          ]
        });
      }, 1000);

      setTimeout(function () {
        chart.load({
          columns: [
            ["data", 50]
          ]
        });
      }, 2000);

      setTimeout(function () {
        chart.load({
          columns: [
            ["data", 70]
          ]
        });
      }, 3000);

      setTimeout(function () {
        chart.load({
          columns: [
            ["data", 0]
          ]
        });
      }, 4000);

      setTimeout(function () {
        chart.load({
          columns: [
            ["data", 100]
          ]
        });
      }, 5000);

```