JSFiddle - React, Tailwind, and code Playground

by Pavel Savushchyk

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type='text/javascript' src="http://infra-platforms-phase2-4592-psavushc.pfa.jaspersoft.com:8080/jasperserver-pro/client/visualize.js"></script>
<!--Provide container to render your visualization-->
<div id="container1"></div>
<div id="container2"></div>

CSS

#container1, #container2 {
    border: 1px solid black;
    height: 250px;
    width: 500px;
    overflow: scroll;
}

JavaScript

visualize({
    auth: {
        name: "jasperadmin",
        password: "jasperadmin",
        organization: "Organization_1"
    }
}, function (v) {

    //render report from provided resource
    var report1 = v.report({
        resource: "/reports/interactive/TableReport",
        error: handleError,
        container: "#container1",
        defaultJiveUi: {
            floatingTableHeadersEnabled: true
        }
    });
    
    //render report from provided resource
    var report2 = v.report({
        resource: "/public/Samples/Reports/State_Performance",
        error: handleError,
        container: "#container2",
        defaultJiveUi: {
            floatingCrosstabHeadersEnabled: true
        }
    });
     
    //show error
    function handleError(err){
        alert(err.message);
    }
});