Perspective.js Arrow Example

An example of loading an Apache Arrow in Perspective.js\

by yairamon

HTML

<script src="https://unpkg.com/@jpmorganchase/perspective-examples/build/perspective.view.js"></script>
<script src="https://unpkg.com/@jpmorganchase/perspective-examples/build/hypergrid.plugin.js"></script>
<script src="https://unpkg.com/@jpmorganchase/perspective-examples/build/highcharts.plugin.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@jpmorganchase/perspective-examples/build/material.dark.css">
<div>
 FOOasdsaasdassdas BARvadad sdads
</div>

<div>


<perspective-viewer
    view="treemap"
    row-pivots='["Sub-Category","Region","Segment"]'
    sort='[["Profit","desc"]]'




    columns='["Sales", "Profit"]'>
                
</perspective-viewer>

</div>

CSS

perspective-viewer {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

JavaScript

var url = 'https://unpkg.com/@jpmorganchase/perspective-examples/build/superstore.arrow';
var xhr = new XMLHttpRequest();
var el = document.getElementsByTagName('perspective-viewer')[0];

xhr.open('GET', url, true);
xhr.responseType = "arraybuffer"
xhr.onload = function() {
    el.load(xhr.response);
    el._toggle_config();
}

xhr.send(null);