Skip to content

Instantly share code, notes, and snippets.

@timkpaine
Forked from JHawk/.block
Last active January 31, 2019 18:42
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 timkpaine/064a50a309f25b80c9cfb0b2b84fbdf3 to your computer and use it in GitHub Desktop.
Save timkpaine/064a50a309f25b80c9cfb0b2b84fbdf3 to your computer and use it in GitHub Desktop.
Perspective Streaming Example
license: apache-2.0

This is an example of streaming IEX financial data into the perspective viewer. Active 9:30 am to 4:00 pm EST.

perspective-viewer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script src="https://unpkg.com/@jpmorganchase/perspective/build/perspective.js"></script>
<script src="https://unpkg.com/@jpmorganchase/perspective-viewer/build/perspective.view.js"></script>
<script src="https://unpkg.com/@jpmorganchase/perspective-viewer-hypergrid/build/hypergrid.plugin.js"></script>
<script src="https://unpkg.com/@jpmorganchase/perspective-viewer-highcharts/build/highcharts.plugin.js"></script>
<script src="streaming.js"></script>
<link rel='stylesheet' href="index.css">
<link rel='stylesheet' href="https://unpkg.com/@jpmorganchase/perspective-viewer/build/material.css" is="custom-style">
</head>
<body>
<perspective-viewer view="y_line" columns='["price"]' column-pivots='["symbol"]' limit="500"></perspective-viewer>
</body>
</html>
var PUB_TOKEN = "pk_a3b8e89dc25140098066fdfbee19352b";
var IEX_URL = "https://cloud-sse.iexapis.com/beta/last?symbols=jpm,gs,bac&token=" + PUB_TOKEN;
window.addEventListener("WebComponentsReady", function() {
// Get element from the DOM.
var elem = document.getElementsByTagName("perspective-viewer")[0];
// Add more rows every 50ms using the `update()` method on the `table` directly.
var source = new EventSource(IEX_URL);
var data = []
source.onmessage = function(event) {
for(let ev of JSON.parse(event.data)){
data.push(ev);
}
elem.update(data);
data = [];
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment