[javascript] bitflyerFX約定履歴をchartに表示するhtml+コード

2018年8月17日 01:27

目次
・前回紹介したchartのbitflyerFXのhtml+コード
・宣伝

●前回紹介したchartのbitflyerFXのhtml+コード

前回のnoteで紹介したbitflyerFX用のコードを公開します。

htmlファイルの中に全部コミコミで書いてますので、以下のコードを「html」という拡張子のファイルにコピペして、そのままブラウザで開くだけで実行できます。
サーバ等を用意する必要はありません。

<!DOCTYPE html>
<html lang="en">
<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>bitflyer FX Trade chart</title>
</head>
<body>

<canvas id="bitflyer"></canvas>

<!-- ライブラリを読み込む -->
<!-- 日付時刻ライブラリ -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js"></script>
<!-- chart.js 2.7系は plugin v1.3以降を使う -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<script type="text/javascript" src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.5.0/chartjs-plugin-streaming.js"></script>

<script>

var buf = {};
buf['bitflyer'] = [[], []]; // バッファを用意

var ws = new WebSocket('wss://ws.lightstream.bitflyer.com/json-rpc');
ws.onopen = function() {
    ws.send(JSON.stringify({      // 購読リクエストを送信
        method: "subscribe",
        params: {
            channel: "lightning_executions_FX_BTC_JPY"  // executions BTCJPYFX
        }
    }));
};
ws.onmessage = function(msg) { // メッセージ更新時のコールバック
    var response = JSON.parse(msg.data);
    response.params.message.forEach(function(data) {
        buf['bitflyer'][data.side === 'BUY' ? 0 : 1].push({
            x: data.exec_date, // タイムスタンプ
            y: data.price      // 価格（日本円）
        });
    });
}

var id = 'bitflyer';
var ctx = document.getElementById(id).getContext('2d');
var chart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            data: [],
            label: 'Buy',                     // 買い取引データ
            borderColor: 'rgb(54, 162, 235)', // 線の色
            backgroundColor: 'rgba(54, 162, 235, 0.5)', // 塗りの色
            fill: false,                      // 塗りつぶさない
            lineTension: 0                    // 直線
        }, {
            data: [],
            label: 'Sell',                    // 売り取引データ
            borderColor: 'rgb(255, 99, 132)', // 線の色
            backgroundColor: 'rgba(255, 99, 132, 0.5)', // 塗りの色
            fill: false,                      // 塗りつぶさない
            lineTension: 0                    // 直線
        }]
    },
    options: {
        title: {
            text: 'BTC-FX/JPY (' + id + ')', // チャートタイトル
            display: true
        },
        scales: {
            xAxes: [{
                type: 'realtime' // X軸に沿ってスクロール
            }]
        },
        plugins: {
            streaming: {
                duration: 300000, // 300000ミリ秒（5分）のデータを表示
                onRefresh: function(chart) { // データ更新用コールバック
                    Array.prototype.push.apply(
                        chart.data.datasets[0].data, buf[id][0]
                    );            // 買い取引データをチャートに追加
                    Array.prototype.push.apply(
                        chart.data.datasets[1].data, buf[id][1]
                    );            // 売り取引データをチャートに追加
                    buf[id] = [[], []]; // バッファをクリア
                }
            }
        }
    }
});

</script>
</body>
</html>

bitmex,bitfinex用のコードは

のサイトで紹介されていますので、
上記のサイトの情報を参考にすれば、すぐに作成可能です。

●宣伝

「node.jsで委員会」会員募集

現在、node.jsの地位向上委員会「node.jsで委員会」の会員を募集しています。
Discordで議論し、gitlabで共有、それぞれのスキルレベルにあった「知識・スキル」の向上を目指します。

詳細は

を参照ください。

ソフトウェア・エンジニアを40年以上やってます。「Botを作りたいけど敷居が高い」と思われている方にも「わかる」「できる」を感じてもらえるように頑張ります。よろしくお願い致します。