Skip to content

Instantly share code, notes, and snippets.

@christiannwamba

christiannwamba/ds-realtime-chart--client.html

Created May 30, 2017 12:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save christiannwamba/49d2d8a20f3632ffb3536283e9a31da6 to your computer and use it in GitHub Desktop.
Save christiannwamba/49d2d8a20f3632ffb3536283e9a31da6 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
ds-realtime-chart--client.html
<html>
<head></head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
<script src="https://code.deepstreamhub.com/js/2.x/deepstream.min.js"></script>
<script>
var client = deepstream('wss://154.deepstreamhub.com?apiKey=430ca16b-b7f1-40e4-bf08-dca693e913df')
// Login
client.login()
client.rpc.make( 'price-chart', { }, ( err, results ) => {
var dataPoints = results;
console.log(dataPoints)
var chart = new CanvasJS.Chart("chartContainer", {
title : {
text : "BTC Realtime Price"
},
axisY: {
title: "Price in BTC",
titleFontColor: "rgb(0,75,141)",
minimum: 750,
maximum: 1700,
},
data : [{
type : "area",
color: "rgba(0,75,141,0.7)",
dataPoints : dataPoints
}]
});
chart.render();
var curPrice = client.record.getRecord('BTC/price');
curPrice.subscribe('price', price => {
dataPoints.length > 300 && dataPoints.shift()
dataPoints.push({y: price})
console.log(price)
chart.render()
})
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment