[javascript] bitflyerFX約定履歴をchartに表示するhtml+コード
目次
・前回紹介した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で共有、それぞれのスキルレベルにあった「知識・スキル」の向上を目指します。
詳細は
を参照ください。
いいなと思ったら応援しよう！
