render large report

by Stas_P

HTML

<script src="https://mobiledemo.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>

<div id="report" class="resource_report">
<div id="report-params" class="resource-params"></div>
<div id="report-content" class="resource-content"></div>
</div>

CSS

div.resource-content {
    height: 88vh;
    width: 79vw;
    margin-left: 10.8vw;
    padding: 0;
    background-color: lightyellow;
}

div.resource-params {
    height: 88vh;
    width: 10vw;
    margin-left: 0.5vw;
    margin-right: 0.5vw;
    float: left;
    padding: 0;
    background-color: lightgrey;
}

JavaScript

visualize({
    auth: {
        name: "joeuser",
        password: "joeuser",
        organization: "organization_1"
    }
}, function (v) {
    var report = v.report({
        resource: "/public/Samples/Reports/01._Geographic_Results_by_Segment_Report",
        container: "#report-content",
        scale: "container",
    });
    
});