Chart View - REST API integration

General API usage

by Yuriy Bablyukh

HTML

<div id="dataSelector"></div>
    <div id="typeChooser"></div>
    <div id="filterPanels"></div>
    <div id="prPanels"></div>
<div id="dataView">
    
</div>
<link rel="stylesheet" href="http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv/scripts/adhoc/api/css/adHocView.css" type="text/css" media="screen">
<script>
    require = {
        baseUrl: "http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv/scripts"
    }
</script>
<script type="text/javascript" src="http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv/scripts/lib/require-jquery-2.1.2.js"></script>
<script type="text/javascript" src="http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv/scripts/adHocView.require.config.js"></script>

CSS

#typeChooser {
    width: 250px;
}
#dataSelector {
    width: 250px;
}
#filterPanels {
    width: 250px;
}
#prPanels {
    width: 250px;
}

JavaScript

require(["jquery", "adhoc/api/AdHocViewFacade", "common/transport/xdmRequest"], function ($, AdHocView, request) {
    "use strict";

    request.configure({
        urlContext: "http://build-master.jaspersoft.com:5780/jrs-pro-feature-amber-adhoc-rest-api"
    });

    var adHocView = new AdHocView({
        container: "#dataView",
        ichart: {
            layout: {
                typeChooser: "#typeChooser",
                dataLevelSelector: "#dataSelector",
                properties: "#prPanels"
            }
        },
        filterPanel: "#filterPanels"
    });

    adHocView.run("/public/Samples/Ad_Hoc_Views/1_Geographic_Results_by_Segment").then(function () {
        //    adHocView.components.chart.changeDataLevel(0, "Total");
        //    adHocView.components.chart.render();

        console.log(adHocView.components.ichart.getProperties());
        adHocView.components.filterPanel.setComplexExpression("A");
        adHocView.components.filterPanel.view.render();

        adHocView.components.ichart.setProperties("xAxisRotation", 90).renderAll();
    });
});