timkpaine · February 20, 2025 19:01 · May 7, 2019 · Feb 1, 2019 · Feb 1, 2019 · Feb 1, 2019
diff --git a/fetch.js b/fetch.js
@@ -1,5 +1,5 @@
-var PUB_TOKEN = "pk_a3b8e89dc25140098066fdfbee19352b";
-var IEX_URL = "https://cloud.iexapis.com/beta/stock/";
+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;

diff --git a/index.html b/index.html
@@ -13,7 +13,7 @@
 <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>
-    <h2>More below!                                    hit open VVVV</h2>
+    <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>

diff --git a/index.html b/index.html
@@ -13,6 +13,7 @@
 <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>
+    <h2>More below!                                    hit open VVVV</h2>
     <perspective-viewer id="two" limit="500"></perspective-viewer>
     <perspective-viewer id="three" view="heatmap" limit="500"></perspective-viewer>
 </body>

diff --git a/fetch.js b/fetch.js
@@ -1,18 +1,46 @@
 var PUB_TOKEN = "pk_a3b8e89dc25140098066fdfbee19352b";
-var IEX_URL = "https://cloud-sse.iexapis.com/beta/last?symbols=jpm,gs,bac&token=" + PUB_TOKEN;
+var IEX_URL = "https://cloud.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 elem = document.getElementsByTagName("perspective-viewer")[0];
+    var psp1 = document.getElementsByTagName("perspective-viewer")[0];
+    var psp2 = document.getElementsByTagName("perspective-viewer")[1];
+    var psp3 = document.getElementsByTagName("perspective-viewer")[2];
 
-    // 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 = [];
-    };
+    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');
+        }
+      });
 });
diff --git a/index.css b/index.css
@@ -1,7 +1,15 @@
 perspective-viewer {
-position: absolute;
-top: 0;
-left: 0;
-right: 0;
-bottom: 0;
+    flex: 1;
+    height: 400px;
+}
+perspective-viewer#two {
+    height: 150px;
+}
+
+input {
+    height:25px;
+}
+body{
+    display: flex;
+    flex-direction: column;
 }
diff --git a/index.html b/index.html
@@ -11,7 +11,9 @@
     <link rel='stylesheet' href="https://unpkg.com/@jpmorganchase/perspective-viewer/build/material.css" is="custom-style">
 </head>
 <body>
-    <input id="ticker" type="text"></input>
-    <perspective-viewer view="y_line" columns='["price"]' column-pivots='["symbol"]' limit="500"></perspective-viewer>
+    <input id="ticker" type="text" value="JPM"></input>
+    <perspective-viewer id="one" view="y_line" columns='["open", "high", "low", "close"]' limit="500"></perspective-viewer>
+    <perspective-viewer id="two" limit="500"></perspective-viewer>
+    <perspective-viewer id="three" view="heatmap" limit="500"></perspective-viewer>
 </body>
 </html>
diff --git a/fetch.js b/fetch.js
@@ -1,16 +1,18 @@
 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 = [];
+    // 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 = [];
     };
 });
diff --git a/index.html b/index.html
@@ -11,6 +11,7 @@
     <link rel='stylesheet' href="https://unpkg.com/@jpmorganchase/perspective-viewer/build/material.css" is="custom-style">
 </head>
 <body>
+    <input id="ticker" type="text"></input>
     <perspective-viewer view="y_line" columns='["price"]' column-pivots='["symbol"]' limit="500"></perspective-viewer>
 </body>
 </html>
diff --git a/fetch.js b/fetch.js
@@ -0,0 +1,16 @@
+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 = [];
+    };
+});
diff --git a/index.css b/index.css
@@ -0,0 +1,7 @@
+perspective-viewer {
+position: absolute;
+top: 0;
+left: 0;
+right: 0;
+bottom: 0;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,16 @@
+<!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>
+    <perspective-viewer view="y_line" columns='["price"]' column-pivots='["symbol"]' limit="500"></perspective-viewer>
+</body>
+</html>
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+This is an example of getting IEX financial data into the perspective viewer.
diff --git a/.block b/.block
@@ -0,0 +1 @@
+license: apache-2.0
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		This is an example of getting IEX financial data into the perspective viewer.