Chart.js Show ETH Price

Websocket simple sample for Get ETC Price from Bitfinex

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
            <div style=" width: 500px;height:500px">
                <canvas id="canvas"></canvas>
            </div>

JavaScript

//放時間
        var yAxis= [];
        var datas=[];
        var ctx = document.getElementById('canvas').getContext('2d');
        var lineChart = new Chart(ctx, {
            type: 'line',
            data: {
            labels:yAxis,
            datasets: [{
                label: 'ETH 價格',
                data: datas,
                backgroundColor: "rgba(0,199,255,0.5)"
            }]
            }
        });

        var timeFormat = 'HH:mm:ss';
        
        // Create a client instance
client = new Paho.MQTT.Client(192.168.2.28, 30002, "123456");

// set callback handlers
client.onConnectionLost = onConnectionLost;
client.onMessageArrived = onMessageArrived;

// connect the client
client.connect({onSuccess:onConnect});


// called when the client connects
function onConnect() {
  // Once a connection has been made, make a subscription and send a message.
  console.log("onConnect");
  client.subscribe("World");
  message = new Paho.MQTT.Message("Hello");
  message.destinationName = "World";
  client.send(message);
}

// called when a message arrives
function onMessageArrived(message) {
  console.log("onMessageArrived:"+message.payloadString);
}
                    
        // Websocket call bitfinex
        var websocket = new WebSocket( "wss://api.bitfinex.com/ws",);

            websocket.onopen = function() {
            var sendObj={event:"subscribe",channel:"ticker",pair:"ETHUSD"};
                websocket.send(JSON.stringify(sendObj));
        };

        websocket.onmessage = function(str) {
                       
            //最多顯示10個
            if(yAxis.length>10){
                yAxis.shift();
            }
            if(datas.length>10){
                datas.shift();
            }

            //過濾掉heartbeating
            if(JSON.parse(str.data).length>2){
                yAxis.push(new moment().format(timeFormat));
                datas.push(JSON.parse(str.data)[1]);
            }
            lineChart.update();
        };