Source/standalone.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Example Pivot view</title>
    <link rel="stylesheet" href="stylesheet.css" />
</head>

<!--
This is an alternative way of rendering the Pivot view using a remote query API server.

This avoids having to install and run Omniscope 3.0 which is currently in development.
See query API docs here:
http://staging.omniscope.me/_global_/customview/v1/docs/Reference/

Also read the top of render.js

Since it is not in the context of a view, but runs as an independent page, it uses a Visokio CORS enabled
query API server, and doesn't have any options for axes, so these are hard-coded in the query JSON below.
-->

<body>

<!-- Element where we are going to inject content dynamically: -->
<span id="main"></span>

<!-- Load the Visokio custom view API, providing data querying and UI integration into Omniscope: -->
<script src="omniscope.js"></script><!-- when standalone this emits a console error about communication channels, you can ignore it -->

<!-- Load our own pivot table render script -->
<script src="render.js"></script>

<script>
    // Check that omniscope.js loaded correctly
    if (!omniscope || !omniscope.query) throw new Error("Omniscope API is not loaded");

    // Create a simple GridQueryInput object - see notes in render.js
    var query = {
        axes: [
            // These options show a two-tier X axis and single tier Y axis.
            // You can ignore all other GridQueryInput options in the schema; the ones here are
            // all that should be used.
            // Y:
            { groupings: [
                { "inputField": "Implied Credit Rating" }
            ] },
            // X:
            { groupings: [
                { "inputField": "Is Snk" },
                { "inputField": "Is Perpetual" }
            ] }
        ],
        cellQueries: {
            // As per notes in render.js, we support only a single cell measure:
            main: { measures: [ { function: "RECORD_COUNT" } ] }
            // Some alternative suggestions:
            //main: { measures: [ { inputField: "Coupon", function: "MEAN" } ] }
            //main: { measures: [ { inputField: "Market Price", function: "SUM" } ] }
        }
    };


    var endpoint =
        // working query API (with CORS) endpoint for the sample data (bond prices):
        //"http://staging.omniscope.me/_global_/query/sample";

        // working query API (with CORS) endpoint for the hurricanes data
        // as per the online pivot custom view demo:
        //"http://staging.omniscope.me/custom+view+demos/Pivot+Differences.iok/api/query";

        // working query API (with CORS) endpoint for the bond prices data (alternative)
        "http://staging.omniscope.me/Bond+prices.iok/api/query";


    console.log("Query", query);
    omniscope.query.builder(endpoint)
            .grid.data(query)
            .on("load", function(event) {
                console.log("Result", event.data);
                render(event.data, document.getElementById("main"));
            })
            .on("error", function(err) {
                console.log(err);
                document.body.innerText = "Error - see browser developer console";
            })
            .execute(); // Submit the query for execution


</script>
</body>
</html>