Skip to content

Instantly share code, notes, and snippets.

@texodus
Forked from JHawk/.block
Last active July 15, 2019 17:30
Show Gist options
  • Save texodus/372d406997d5522ebaafb17f0f521d97 to your computer and use it in GitHub Desktop.
Save texodus/372d406997d5522ebaafb17f0f521d97 to your computer and use it in GitHub Desktop.
Perspective Superstore Arrow Example
license: apache-2.0
window.addEventListener('WebComponentsReady', function() {
// Fetch and load arrow data.
var xhr = new XMLHttpRequest();
xhr.open('GET', 'superstore.arrow', true);
xhr.responseType = "arraybuffer"
xhr.onload = function() {
// Get element from the DOM.
var el = document.getElementsByTagName('perspective-viewer')[0];
// Load the arrow response in the `<perspective-viewer>` DOM reference.
el.load(xhr.response);
// Toggle the config controls open.
el.toggleConfig();
}
xhr.send(null);
});
<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="arrow.js"></script>
<link rel='stylesheet' href="https://unpkg.com/@jpmorganchase/perspective-viewer/build/material.css" is="custom-style">
</head>
<body>
<perspective-viewer view="sunburst" row-pivots='["Sub-Category","Region","Segment"]' sort='[["Profit","desc"]]' columns='["Sales", "Profit"]'>
</perspective-viewer>
</body>
</html>
This file has been truncated, but you can view the full file.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment