【Chart.js】を使ってリアルタイムチャートを作成してみた

2020-07-08

前回、【Chart.js】の使い方を学んだので今回は実践として、ビットコイン/円(BTC/JPY)リアルタイムチャートを作成してみました。

BTC/JPYリアルタイムチャートデモ

リアルタイムチャートのデモです。自動的にレート情報が流れます。

hibi-update.org

デモ | ビットコイン/円(BTC/JPY)リアルタイムレートを作成してみた

リアルタイムチャートデモのコード

説明の前に以下、デモのコードの全容です。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>デモ | ビットコイン/円(BTC/JPY)リアルタイムレートを作成してみた</title>
<meta name="description" content="" />
<link rel="stylesheet" href="/demo/common/css/common.css" />
<link rel="stylesheet" href="css/style.css" />
<!-- Chart.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@latest/dist/chartjs-plugin-streaming.min.js"></script>
<!-- Chart.js -->
</head>
<body>
    <!-- contents start -->
    <div class="container">
        <section class="section_mb section_mt">
            <div class="inner">
                <h2>デモ | ビットコイン/円(BTC/JPY)リアルタイムレートを作成してみた</h2>
                <h3></h3>
                <div class="graph_box">
                    <canvas id="btc_jpy"></canvas>
                </div>
            </div>
        </section>
    </div>
    <!-- contents end -->
    </div>
<script src="js/graph02.js"></script>
</body>
</html>

Javascript

// WebSocket
var sock = new WebSocket("wss://ws.lightstream.bitflyer.com/json-rpc");
var sock_params = [
  {
    method: "subscribe",
    params: {
      channel: "lightning_executions_BTC_JPY",
    },
  },
];
// Websocket message格納用配列
var sock_results = {
  result: [],
};

// Websocket 接続
sock.addEventListener("open", function (e) {
  sock.send(JSON.stringify(sock_params));
});

// Websocket message受信
sock.addEventListener("message", function (e) {
  data = JSON.parse(e.data)["params"];
  message = data["message"];
  // priceを配列に格納
  sock_results["result"]["btc_jpy"] = parseInt(
    message[message.length - 1]["price"],
  );
});

// Chart.js
ctx_btc_jpy = document.getElementById("btc_jpy").getContext("2d");

chart_btc_jpy = new Chart(ctx_btc_jpy, {
  type: "line",
  data: {
    datasets: [
      {
        label: "BTC/JPY",
        backgroundColor: "rgba(255, 99, 132, 0.2)",
        borderColor: "rgb(255, 99, 132)",
        data: [],
      },
    ],
  },
  options: {
    scales: {
      xAxes: [
        {
          type: "realtime",
          realtime: {
            duration: 20000,
            refresh: 1000, // デフォルト
            delay: 1000,
            frameRate: 30, // デフォルト
            onRefresh: function (chart) {
              chart_btc_jpy.data.datasets.forEach(function (v, i, datasets) {
                datasets[i].data.push({
                  x: Date.now(),
                  y: sock_results["result"]["btc_jpy"],
                });
              });
            },
          },
        },
      ],
    },
  },
});

リアルタイムチャート作成手順

ここからはBTC/JPYリアルタイムチャート作成手順を説明していきます。まずは今回のデモの作成に必要なプラグインです。

【Chart.js】【chartjs-plugin-streaming】を使用します。

【Chart.js】を読み込む

Chart.jsのインストールや使用方法については以下をご参考にしてください。

Fetch failed: 404 リンクエラー

今回もCDNを利用してscriptを読み込みます。以下をHTMLに記載します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>

【chartjs-plugin-streaming】を読み込む

「

chartjs-plugin-streaming

」はリアルタイムチャート用のChart.jsの拡張プラグインです。こちらもCDNで読み込みます。

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@latest/dist/chartjs-plugin-streaming.min.js"></script>

HTMLの記述

ポイントはチャートをChart.jsで表示するためのcanvasタグです。ここにリアルタイムチャートを生成します。

<canvas id="btc_jpy"></canvas>

Javascirptの記述

WebSocket

ビットコインのレート情報を取得するため、「bitFlyer」に「WebSocket」で接続します。

bf-lightning-api.readme.io

JSON-RPC 2.0 over WebSocket

Realtime API

var sock = new WebSocket("wss://ws.lightstream.bitflyer.com/json-rpc");

取得する情報(channel)を記述して購読(subscribe)するための変数。

var sock_params = [
  {
    method: "subscribe",
    params: {
      channel: "lightning_executions_BTC_JPY",
    },
  },
];

取得した価格(price)を格納するための変数。

// Websocket message格納用配列
var sock_results = {
  result: [],
};

Websocket 接続

// Websocket 接続
sock.addEventListener("open", function (e) {
  sock.send(JSON.stringify(sock_params));
});

Websocket 受信(message)

// Websocket message受信
sock.addEventListener("message", function (e) {
  data = JSON.parse(e.data)["params"];
  message = data["message"];
  // priceを配列に格納
  sock_results["result"]["btc_jpy"] = parseInt(
    message[message.length - 1]["price"],
  );
});

Chart.js

HTMLに記載したDOM要素を取得

ctx_btc_jpy = document.getElementById("btc_jpy").getContext("2d");

Chart.jsのインスタンスと
chartjs-plugin-streaming
の設定を記述。

chart_btc_jpy = new Chart(ctx_btc_jpy, {
  type: "line",
  data: {
    datasets: [
      {
        label: "BTC/JPY",
        backgroundColor: "rgba(255, 99, 132, 0.2)",
        borderColor: "rgb(255, 99, 132)",
        data: [],
      },
    ],
  },
  options: {
    scales: {
      xAxes: [
        {
          type: "realtime",
          realtime: {
            duration: 20000,
            refresh: 1000, // デフォルト
            delay: 1000,
            frameRate: 30, // デフォルト
            onRefresh: function (chart) {
              chart_btc_jpy.data.datasets.forEach(function (v, i, datasets) {
                datasets[i].data.push({
                  x: Date.now(),
                  y: sock_results["result"]["btc_jpy"],
                });
              });
            },
          },
        },
      ],
    },
  },
});

chartjs-plugin-streamingのオプション一覧

名前	タイプ	デフォルト	説明文
duration	number	10000	データの表示時間
ttl	number		保持されるデータの期間
設定しない場合、グラフから自動的に削除
delay	number	0	チャートに表示される遅延時間
refresh	number	1000	データの更新間隔
onRefresh	function	null	refresh後に呼び出されるコールバック関数
frameRate	number	30	グラフがディスプレイに描画される頻度
pause	boolean	false	trueでスクロール停止(onRefreshは呼び出される)