mossbanay/smoothws.html

## smoothws.html
<!DOCTYPE html>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Didact+Gothic" rel="stylesheet">
<style>
    /* set the CSS */

    .line {
        fill: none;
        stroke: steelblue;
        stroke-width: 1px;
    }

    canvas {
        padding-bottom: 0px;
    }

    .overlay {
        padding: 10px;
        color: white;
        font-family: 'Didact Gothic', sans-serif;
        background: black;
        border: 1px white solid;
    }
</style>

<body>
    <div id="wrapper">
        <div style="position: absolute; left: 10px; top: 10px;" class="overlay">
            GDAX:BTCUSD
        </div>
        <canvas id="chart" width="990" height="250"></canvas>
    </div>
    <div id="wrapper">
        <div style="position: absolute; left: 10px; top: 264px;" class="overlay">
            GDAX:ETHUSD
        </div>
        <canvas id="chart2" width="990" height="250"></canvas>
    </div>

    <!-- load the d3.js library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="smoothie.js"></script>

    <script>
        var random = new TimeSeries();
        var random2 = new TimeSeries();

        var BTCUSD_chan = 0;
        var ETHUSD_chan = 0;

        const w = new WebSocket('wss://api.bitfinex.com/ws/2')
        //const w = new WebSocket('ws://192.168.56.101:8080')

        w.onmessage = function(event) {
            console.log(event);
            var a = JSON.parse(event.data);
            if (a.event) {
                if (a.event == "subscribed" && a.symbol == 'tBTCUSD') {
                    BTCUSD_chan = a.chanId;
                } else {
                    ETHUSD_chan = a.chanId;
                }
            }
            if (a.length == 3) {
                price = a[2][3];
                time = a[2][1];
                //console.log('Price is ' + price.toString());
                if (a[0] == BTCUSD_chan) {
                    random.append(time, price);
                } else if (a[0] == ETHUSD_chan) {
                    random2.append(time, price);
                }
            } else {
                console.log(a);
            }
        }

        let syms = ['BTCUSD', 'ETHUSD'];

        w.onopen = function() {
            syms.forEach(function(e, i) {
                let msg = JSON.stringify({
                    event: 'subscribe',
                    channel: 'trades',
                    symbol: e
                });

                w.send(msg);

                console.log(e);
            });
        }

        function createTimeline() {
            var chart = new SmoothieChart();
            chart.addTimeSeries(random, {
                strokeStyle: 'rgba(0, 255, 0, 1)',
                fillStyle: 'rgba(0, 255, 0, 0.2)',
                lineWidth: 2
            });
            chart.streamTo(document.getElementById("chart"), 500);
            var chart2 = new SmoothieChart();
            chart2.addTimeSeries(random2, {
                strokeStyle: 'rgba(0, 0, 255, 1)',
                fillStyle: 'rgba(0, 0, 255, 0.2)',
                lineWidth: 2
            });
            chart2.streamTo(document.getElementById("chart2"), 500);
        }

        createTimeline();
    </script>
</body>

</html>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<link href="https://fonts.googleapis.com/css?family=Didact+Gothic" rel="stylesheet">
	<style>
	/* set the CSS */

	.line {
	fill: none;
	stroke: steelblue;
	stroke-width: 1px;
	}

	canvas {
	padding-bottom: 0px;
	}

	.overlay {
	padding: 10px;
	color: white;
	font-family: 'Didact Gothic', sans-serif;
	background: black;
	border: 1px white solid;
	}
	</style>

	<body>
	<div id="wrapper">
	<div style="position: absolute; left: 10px; top: 10px;" class="overlay">
	GDAX:BTCUSD
	</div>
	<canvas id="chart" width="990" height="250"></canvas>
	</div>
	<div id="wrapper">
	<div style="position: absolute; left: 10px; top: 264px;" class="overlay">
	GDAX:ETHUSD
	</div>
	<canvas id="chart2" width="990" height="250"></canvas>
	</div>

	<!-- load the d3.js library -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="smoothie.js"></script>

	<script>
	var random = new TimeSeries();
	var random2 = new TimeSeries();

	var BTCUSD_chan = 0;
	var ETHUSD_chan = 0;

	const w = new WebSocket('wss://api.bitfinex.com/ws/2')
	//const w = new WebSocket('ws://192.168.56.101:8080')

	w.onmessage = function(event) {
	console.log(event);
	var a = JSON.parse(event.data);
	if (a.event) {
	if (a.event == "subscribed" && a.symbol == 'tBTCUSD') {
	BTCUSD_chan = a.chanId;
	} else {
	ETHUSD_chan = a.chanId;
	}
	}
	if (a.length == 3) {
	price = a[2][3];
	time = a[2][1];
	//console.log('Price is ' + price.toString());
	if (a[0] == BTCUSD_chan) {
	random.append(time, price);
	} else if (a[0] == ETHUSD_chan) {
	random2.append(time, price);
	}
	} else {
	console.log(a);
	}
	}

	let syms = ['BTCUSD', 'ETHUSD'];

	w.onopen = function() {
	syms.forEach(function(e, i) {
	let msg = JSON.stringify({
	event: 'subscribe',
	channel: 'trades',
	symbol: e
	});

	w.send(msg);

	console.log(e);
	});
	}

	function createTimeline() {
	var chart = new SmoothieChart();
	chart.addTimeSeries(random, {
	strokeStyle: 'rgba(0, 255, 0, 1)',
	fillStyle: 'rgba(0, 255, 0, 0.2)',
	lineWidth: 2
	});
	chart.streamTo(document.getElementById("chart"), 500);
	var chart2 = new SmoothieChart();
	chart2.addTimeSeries(random2, {
	strokeStyle: 'rgba(0, 0, 255, 1)',
	fillStyle: 'rgba(0, 0, 255, 0.2)',
	lineWidth: 2
	});
	chart2.streamTo(document.getElementById("chart2"), 500);
	}

	createTimeline();
	</script>
	</body>

	</html>