Visualize: zoom, pagination

HTML

<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<!--Provide URL to visualize.js-->
<script type='text/javasc0ipt' 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 id='refr' 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 ">
       ...

CSS

#container1 {
    background-color: #cccccc;
}

JavaScript

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

    var report = v.report({
        //skip repport runnig during initialization
        runImmediately: !alwasyRefresh,
        resource: "/public/Visualize/Adhoc/Ad_Hoc_View_All_column_types_Report",
        container: "#container1",
        defaultJiveUi: {
            enabled: true
        },
        isolateDom: false,
        events: {
            beforeRender: function (el) {
                console.dir(el);
            },
            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) {
            console.dir(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);
            });
        }
    });

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

    $("button#refr").click(function () {
        report.refresh()
            .done(function () {
            console.log("Report Refreshed!");
        })
            .fail(function () {
            alert("Report Refresh Failed!");
        });
    });


    zoom = 1;
    
     $("#chartType").on("click", function () {
         console.dir(chartName);
 ...