프로그램 (PHP,Python)

n8n에서 QuickChart 노드 사용하여 데이터 시각화 차트생성 자동화

날으는물고기 2024. 10. 13. 00:03

n8n에서 QuickChart 노드를 사용하여 일별 수치 정보를 차트로 시각화하는 방법입니다. QuickChart는 다양한 유형의 차트를 쉽게 생성할 수 있는 도구입니다.

1. Google Sheets 노드 설정

  1. Google Sheets 노드를 추가합니다.
  2. OAuth2 Credentials를 설정합니다.
  3. Operation을 Read로 설정합니다.
  4. Sheet ID와 Range를 설정하여 일별 수치 정보를 가져옵니다.

2. 데이터 처리 노드 설정

  1. Set 노드를 추가하여 가져온 데이터의 형식을 맞춥니다.
    • Property Name에 원하는 이름을 지정하고 Value에 가져온 데이터의 열을 매핑합니다.
  2. Function 노드를 사용하여 데이터를 QuickChart에서 사용할 수 있는 형식으로 변환합니다.
    • Function Code 예시 
      const labels = items.map(item => item.json.date);
const data = items.map(item => item.json.value);

return [
  {
    json: {
      labels: labels,
      datasets: [
        {
          label: 'Daily Values',
          data: data,
          borderColor: 'rgba(75, 192, 192, 1)',
          backgroundColor: 'rgba(75, 192, 192, 0.2)',
        },
      ],
    },
  },
];

3. QuickChart 노드 설정

  1. QuickChart 노드를 추가합니다.
  2. Chart Type을 설정합니다. (예: Line)
  3. Chart Configuration을 설정합니다:
    • type: 'line'
    • data: 
      {
  "labels": {{ $json["labels"] }},
  "datasets": {{ $json["datasets"] }}
}
  4. Options를 필요에 맞게 설정합니다.

4. 최종 워크플로 설정

  1. Google Sheets 노드 -> Set 노드 -> Function 노드 -> QuickChart 노드로 연결합니다.
  2. 필요한 경우 추가적인 데이터 처리나 에러 핸들링 노드를 추가합니다.

예제 워크플로

1. Google Sheets 노드

  • Operation: Read
  • Sheet ID: your-sheet-id
  • Range: 'Sheet1!A:B' (A 열에 날짜, B 열에 수치가 있다고 가정)

2. Set 노드

  • Fields:
    • date: {{ $json["A"] }}
    • value: {{ $json["B"] }}

3. Function 노드

  • Code 
    const labels = items.map(item => item.json.date);
const data = items.map(item => item.json.value);

return [
  {
    json: {
      labels: labels,
      datasets: [
        {
          label: 'Daily Values',
          data: data,
          borderColor: 'rgba(75, 192, 192, 1)',
          backgroundColor: 'rgba(75, 192, 192, 0.2)',
        },
      ],
    },
  },
];

4. QuickChart 노드

  • Chart Type: Line
  • Chart Configuration: 
    {
  "type": "line",
  "data": {
    "labels": {{ $json["labels"] }},
    "datasets": {{ $json["datasets"] }}
  },
  "options": {
    "responsive": true,
    "title": {
      "display": true,
      "text": "Daily Values"
    }
  }
}

위의 절차를 따르면 n8n을 사용하여 QuickChart 노드를 통해 일별 수치 정보를 기반으로 차트를 생성할 수 있습니다. 필요에 따라 추가적인 설정이나 커스터마이징을 통해 차트를 더욱 발전시킬 수 있습니다.

외부 사이트를 통해 다양한 차트를 생성하려면 데이터 시각화 서비스를 제공하는 API를 활용하면 됩니다. 대표적인 서비스로는 QuickChart 외에도 Google Charts, Chart.js, Plotly 등이 있습니다. 여기서는 Google Sheets 데이터를 가져와 외부 API를 사용해 차트를 생성하는 방법을 설명하겠습니다. 예제로 QuickChart를 사용하겠습니다.

QuickChart API를 사용한 차트 생성 방법

  1. Google Sheets에서 데이터 가져오기
  2. Function 노드를 사용하여 데이터 형식 맞추기
  3. HTTP Request 노드를 사용하여 QuickChart API 호출
  4. 결과 확인

1. Google Sheets 노드 설정

  1. Google Sheets 노드를 추가합니다.
  2. OAuth2 Credentials를 설정합니다.
  3. Operation을 Read로 설정합니다.
  4. Sheet ID와 Range를 설정하여 일별 수치 정보를 가져옵니다.

2. 데이터 처리 노드 설정

  1. Set 노드를 추가하여 가져온 데이터의 형식을 맞춥니다.
    • Property Name에 원하는 이름을 지정하고 Value에 가져온 데이터의 열을 매핑합니다.
  2. Function 노드를 사용하여 데이터를 QuickChart에서 사용할 수 있는 형식으로 변환합니다.
    • Function Code 예시 
      const labels = items.map(item => item.json.date);
const data = items.map(item => item.json.value);

return [
  {
    json: {
      labels: labels,
      datasets: [
        {
          label: 'Daily Values',
          data: data,
          borderColor: 'rgba(75, 192, 192, 1)',
          backgroundColor: 'rgba(75, 192, 192, 0.2)',
        },
      ],
    },
  },
];

3. HTTP Request 노드 설정

  1. HTTP Request 노드를 추가합니다.
  2. Method를 POST로 설정합니다.
  3. URL을 https://quickchart.io/chart/create로 설정합니다.
  4. Headers에 Content-Type: application/json을 추가합니다.
  5. Body Parameters에 아래와 같이 설정합니다:
    • chart: 
      {
  "type": "line",
  "data": {
    "labels": {{ $json["labels"] }},
    "datasets": {{ $json["datasets"] }}
  },
  "options": {
    "responsive": true,
    "title": {
      "display": true,
      "text": "Daily Values"
    }
  }
}

4. 최종 워크플로 설정

  1. Google Sheets 노드 -> Set 노드 -> Function 노드 -> HTTP Request 노드로 연결합니다.
  2. 필요한 경우 추가적인 데이터 처리나 에러 핸들링 노드를 추가합니다.

예제 워크플로

1. Google Sheets 노드

  • Operation: Read
  • Sheet ID: your-sheet-id
  • Range: 'Sheet1!A:B' (A 열에 날짜, B 열에 수치가 있다고 가정)

2. Set 노드

  • Fields:
    • date: {{ $json["A"] }}
    • value: {{ $json["B"] }}

3. Function 노드

  • Code 
    const labels = items.map(item => item.json.date);
const data = items.map(item => item.json.value);

return [
  {
    json: {
      labels: labels,
      datasets: [
        {
          label: 'Daily Values',
          data: data,
          borderColor: 'rgba(75, 192, 192, 1)',
          backgroundColor: 'rgba(75, 192, 192, 0.2)',
        },
      ],
    },
  },
];

4. HTTP Request 노드

  • Method: POST
  • URL: https://quickchart.io/chart/create
  • Headers:
    • Content-Type: application/json
  • Body Parameters: 
    {
  "chart": {
    "type": "line",
    "data": {
      "labels": {{ $json["labels"] }},
      "datasets": {{ $json["datasets"] }}
    },
    "options": {
      "responsive": true,
      "title": {
        "display": true,
        "text": "Daily Values"
      }
    }
  }
}

이 방법을 따르면 n8n을 사용하여 외부 차트 생성 API를 통해 일별 수치 정보를 시각화할 수 있습니다. 필요에 따라 다른 차트 유형이나 추가 설정을 통해 차트를 커스터마이징할 수 있습니다.

728x90
저작자표시 비영리 동일조건