Visualize: zoom, pagination

by Yuriy Bablyukh

HTML

<script type='text/javascript' src="http://build-master.jaspersoft.com:6680/jrs-pro-feature-visualizejs/client/visualize.js?_opt=false"></script>
<!--Provide container to render your visualization-->



<button id='ref' class="btn btn-default ">Refresh</button>
<div class="btn-group offset1"> <a href="#" class="btn btn-default " title="Zoom IN" onclick="zoomIn()">+</a>
 <a href="#"  class="btn btn-default " title="Zoom Out" onclick="zoomOut()">-</a>
 <a href="#" class="btn btn-default " title="Fit Height" onclick="fitHeight()">Height</a>
 <a href="#" class="btn btn-default " title="Fit Width" onclick="fitWidth()">Width</a>
 <a href="#" class="btn btn-default " title="Fit Page" onclick="fitContainer()">Page</a>

</div>
<button id="undo" disabled="disabled" class="btn btn-default ">Undo</button>
<button id="redo" disabled="disabled" class="btn btn-default ">Redo</button>
<button id="undoAll" disabled="disabled" class="btn btn-default ">Undo All</button>
    <button id="chartType" class="btn btn-default ">Change Chart</button>  
<div class="btn-group offset1"> <a href="#"  class="btn btn-default "  onclick="openFirstPage()">First</a>
 <a  href="#" class="btn btn-default " onclick="openPreviousPage()">Previous</a>

    <div class="btn ">
        <input id="pageNumber" class="uneditable-input input-mini" type="text" onchange="openPage()" />
    </div> <a href="#" class="btn btn-default " onclick="openNextPage()">Next</a>
 <a href="#" class="btn btn-default " onclick="openLastPage()">Last</a>
  
    

</div>
    
<div id="container1"></div>

CSS

#container1 {
    background-color: #cccccc;
}

JavaScript

visualize({
    
    auth: {
        name: "superuser",
        password: "superuser"
    }
}, function (v) {
    var alwasyRefresh = false, chartName;

    v.inputControls({
                    resource: "/public/Samples/Reports/RevenueDetailReport",
                    success: function (data) {
                        alert(data);
                    }
                });
    
    var report = v.report({
        //skip repport runnig during initialization
        runImmediately: !alwasyRefresh,
        resource: "/public/Samples/Reports/RevenueDetailReport",
        container: "#container1",
        defaultJiveUi: {
            enabled: true
        },
        isolateDom: false,
        events: {

            canUndo: function (canUndo) {
                if (canUndo) {
                    $("#undo, #undoAll").removeAttr("disabled");
                } else {
                    $("#undo, #undoAll").attr("disabled", "disabled");
                }
            },
            canRedo: function (canRedo) {
                if (canRedo) {
                    $("#redo").removeAttr("disabled");
                } else {
                    $("#redo").attr("disabled", "disabled");
                }
            }
        },
        success: function (data) {

            data.components.forEach(function (c) {
                if(c.componentType==="chart"){
                    if(c.name!==undefined){
                        chartName=c.name;
                    }else{
                        chartName=c.id;
                    }
                }
                console.log("Component Name: " + c.name, "Component Lable: " + c.label);
            });
        },
        error: function (errr) {
            alert(errr);     
        }
    });

    if (alwasyRefresh) {
        report.refresh();
    }

    $("button#ref").click(function () {
        report.refresh()
            .done(function () {
            alert("Report Refreshed!");
        })
            .fail(function () {
...