Skip to content

Instantly share code, notes, and snippets.

@timkpaine
Last active Mar 25, 2020
Embed
What would you like to do?
license: apache-2.0

This is an example of getting IEX financial data into the perspective viewer.

var PUB_TOKEN = "Tpk_ecc89ddf30a611e9958142010a80043c";
var IEX_URL = "https://sandbox.iexapis.com/beta/stock/";
var QUERY1 = "/chart?token=" + PUB_TOKEN;
var QUERY2 = "/stats?token=" + PUB_TOKEN;
var QUERY3 = "/balance-sheet?token=" + PUB_TOKEN;
function run(input, psp, string, wrap=false, index=null){
let xhr = new XMLHttpRequest();
xhr.open('GET', IEX_URL + input.value + string);
xhr.onload = evt => {
let data = JSON.parse(xhr.responseText);
if(index){
data = data[index];
}
psp.delete();
if(wrap){
psp.update([data]);
} else {
psp.update(data);
}
};
xhr.send();
}
window.addEventListener("WebComponentsReady", function() {
// Get element from the DOM.
var psp1 = document.getElementsByTagName("perspective-viewer")[0];
var psp2 = document.getElementsByTagName("perspective-viewer")[1];
var psp3 = document.getElementsByTagName("perspective-viewer")[2];
let input = document.getElementById("ticker");
run(input, psp1, QUERY1);
run(input, psp2, QUERY2, true);
run(input, psp3, QUERY3, false, 'balancesheet');
input.addEventListener('keyup', (ev) => {
if(ev.keyCode === 13){
run(input, psp1, QUERY1);
run(input, psp2, QUERY2, true);
run(input, psp3, QUERY3, false, 'balancesheet');
}
});
});
perspective-viewer {
flex: 1;
height: 400px;
}
perspective-viewer#two {
height: 150px;
}
input {
height:25px;
}
body{
display: flex;
flex-direction: column;
}
<!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="fetch.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>
<input id="ticker" type="text" value="JPM"></input>
<perspective-viewer id="one" view="y_line" columns='["open", "high", "low", "close"]' limit="500"></perspective-viewer>
<h4>More charts below! Hit open</h4>
<perspective-viewer id="two" limit="500"></perspective-viewer>
<perspective-viewer id="three" view="heatmap" limit="500"></perspective-viewer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment