Visualize: zoom, pagination

by Yuriy Bablyukh

HTML

<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<!--Provide URL to visualize.js-->
<script type='text/javascript' src="http://localhost:8080/jasperserver-pro/client/visualize.js?_opt=false"></script>
<!--Provide container to render your visualization-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<button class="btn btn-default ">Refresh</button>
<div class="btn-group offset1"> <a class="btn btn-default " title="Zoom IN" onclick="zoomIn()"><i
                            class="glyphicon glyphicon-zoom-in"></i></a>
 <a class="btn btn-default " title="Zoom Out" onclick="zoomOut()"><i
                            class="glyphicon glyphicon-zoom-out"></i></a>
 <a class="btn btn-default " title="Fit Height" onclick="fitHeight()"><i
                            class="glyphicon glyphicon-resize-vertical"></i></a>
 <a class="btn btn-default " title="Fit Width" onclick="fitWidth()"><i
                            class="glyphicon glyphicon-resize-horizontal"></i></a>
 <a class="btn btn-default " title="Fit Page" onclick="fitContainer()"><i
                            class="glyphicon glyphicon-fullscreen"></i></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 class="btn btn-default " onclick="openFirstPage()">First</a>
 <a class="btn btn-default " onclick="openPreviousPage()">Previous</a>

    <div class="btn ">
        <input...

CSS

#container1 {
    background-color: #cccccc;
}

JavaScript

function handleError(err){
        console.log(err.message);
    }

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

    var report = v.report({
        //skip repport runnig during initialization
        runImmediately: !alwasyRefresh,
        resource: "/organizations/organization_1/AdditionalResourcesForTesting/Reports_With_Controls/Date/Date_equals_2_1",
        container: "#container1",
        defaultJiveUi: {
            enabled: true
        },
        isolateDom: false,
        events: {
            beforeRender: function (el) {
                $(el).find("jrcolHeader")
                         .each(function(i, e){
                               // make them red
                               $(e).css("color","red")
                                   .attr("data-my-attr", "test");
                          });                     
            },
            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");
                }
            },
            changeTotalPages: function(totalPages) {
                $("#total").html("Total Pages:" + totalPages);
            },
            reportCompleted: function(status) {
                console.log("Report status: "+ status+ "!");
            },
            pageFinal: function(el) {
                console.log("Page is final!"+el);
            }
        },
        success: function (data) {
            addDeleteBtn(report);
            console.dir(data);
           ...