Bubble.ioでChart Elementを利用する

Bubble.ioでChart Elementを利用したときの個人メモ

---

Chart Elementの準備

• 「Chart Element」を検索し、「Instal」を押下
  

API Connectorの準備

• チャートに表示するデータをAPIを利用して取得する

インストール

• API ConnectorのインストールはBubble.ioでAPI Connectorを利用すると同様

設定

• 今回はマーケットデータを取得できるQUICK Xignite APIsを利用する
  以下を設定し、「Reinitialize call」を押下

  • API Name:MarketInfo
  • Authentication:None or self-handled
  • Name:getInfo
  • Use as:Data
    　※ワークフロー内でAPIを実行せず、画面描画時に実行するため、Dataを選択
  • Data type:JSON
  • HTTP method:GET
  • URL:https://api.marketdata-cloud.quick-co.jp/DummyFinancialStatements.json/GetIncomeStatementHistory
  • Keys & Values
    • IdentifierType:Symbol
    • Identifiers:1048
    • AccountingStandards:ConsolidatedIFRS,ConsolidatedUS,ConsolidatedJP,NonConsolidated
    • _Language:Japanese
    • _Token:abc

  

画面実装

• 完成イメージ
  

Group

• APIを紐づけるGroupを作成
  

Line/Bar Chart

• チャートを描画するLine/Bar ChartをGroup上に作成
  

Chart type

• チャートの表示形式を指定（今回はBarを選択）

Type of data

• 表示したいデータを含む直近のリスト「getInfo ArrayOfSalesAndIncome」を指定

Data source

• X軸を指定（今回は日付）

Value expression

• Y軸を指定（今回は売上）

Label expression

• X軸の表示形式、ソートを指定

動作確認

• 画面描画時にAPIを実行し、チャートを表示する
  

感想

• API Connectorは使い方が2つあり、使い勝手よさそう
  • 要素から呼び出す（Data）
  • ワークフローから呼び出す（Action）
• データを視覚化するだけなら、かなり早い
• 表示形式をどこまで細かくいじれるかは確認が必要