Perspective.js Shared Table Example

An example of loading JSON data once and sharing between multiple Perspective.js <perspective-viewer>.

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.css">
<script src="https://unpkg.com/@jpmorganchase/perspective-examples/build/perspective.js"></script>
<div id="container">
ahkjhhhhgjhsdasdas
    <perspective-viewer 
        row-pivots='["sport"]'
        column-pivots='["year"]'
        columns='["gold","silver","bronze"]'
        sort='[["gold","desc"]]'>

    </perspective-viewer>
    
    <perspective-viewer 
        view="x_bar"
        row-pivots='["country"]' 
        columns='["gold"]'
        sort='[["gold","desc"]]'>

    </perspective-viewer>
    
    <perspective-viewer
        view='xy_scatter'
        row-pivots='["athlete"]'
        columns='["age","sport","total"]'
        aggregates='{"total":"sum","age":"avg","sport":"dominant"}'>

    </perspective-viewer>
    
    
    <perspective-viewer
        view='x_bar'
        row-pivots='["year"]' 
        column-pivots='["country"]'
        filters='[["country","==","United States"]]'
        columns='["gold","silver","bronze"]'>

    </perspective-viewer>

</div>

CSS

#container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
}

perspective-viewer {
    overflow: hidden;
}

JavaScript

var url = 'https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json';
var xhr = new XMLHttpRequest();
var el = [0];

xhr.open('GET', url, true);
xhr.onload = function () {
var table = perspective.worker().table(JSON.parse(xhr.response));
	for (var el of document.getElementsByTagName('perspective-viewer')) {
    	el.load(table);
	}
}

xhr.send(null);