Javascript

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

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

Chart.jsでリアルタイムチャートを描画する[Javascript][Chart.js][Websocket]
【リアルタイムチャートをChart.js で作ってみた。】

参考にしたサイト

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のインストールや使用方法については以下をご参考にしてください。


グラフ/チャート作成用JSライブラリ「Chart.js」を試してみた

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

リアルタイムチャートを作成するのでCDNで読み込むプラグインは、「Moment.js 」を含んだ「Chart.bundle.min.js 」を使用します。

<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」で接続します。


JSON-RPC 2.0 over WebSocket

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のオプション一覧

名前タイプデフォルト説明文
durationnumber10000データの表示時間
ttlnumber保持されるデータの期間
設定しない場合、グラフから自動的に削除
delaynumber0チャートに表示される遅延時間
refreshnumber1000データの更新間隔
onRefreshfunctionnullrefresh後に呼び出されるコールバック関数
frameRatenumber30グラフがディスプレイに描画される頻度
pausebooleanfalsetrueでスクロール停止(onRefreshは呼び出される)
chartjs-plugin-streaming

まとめ

  • グラフを描画する時は「Chart.js」を使う。
  • リアルタイムチャートを作成する時はChart.jsの拡張プラグイン「chartjs-plugin-streaming」を使う。
  • 「bitFlyer」に「WebSocket」で接続して必要情報を取得する。

関連リンク

グラフ/チャート作成用JSライブラリ「Chart.js」を試してみた