Visualize: ISDom

HTML

<!--Provide URL to visualize.js-->
<script type='text/javascript' src="http://localhost:8080/jasperserver-pro/client/visualize.js"></script>
<script src="http://code.jquery.com/jquery-2.1.0.js"></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>
    
    
    
    

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

CSS

#container1{
    background-color: #cccccc;
}

JavaScript

visualize({
    auth: {
        name: "jasperadmin",
        password: "jasperadmin",
        organization: "organization_1"
    }
}, function (v) {
    var alwasyRefresh = false;    

    var report = v.report({
        //skip repport runnig during initialization
        runImmediately: !alwasyRefresh,
        resource: "/public/Samples/Reports/AllAccounts",
        container: "#container1",
        defaultJiveUi: {
                        enabled: true
                    },
                          isolateDom:false,
        events: {
            beforeRender: function(el){
                    jQuery(el).find(".jrcolHeader span")
                         .each(function(i, e){
                               // make them red
                               jQuery(e).css("color","red")
                                   .attr("data-my-attr", "test");
                          });                     
                },
            canUndo: function (canUndo) {
                    if (canUndo) {
                        jQuery("#undo, #undoAll").removeAttr("disabled");
                    } else {
                        jQuery("#undo, #undoAll").attr("disabled", "disabled");
                    }
                },
                canRedo: function (canRedo) {
                    if (canRedo) {
                        jQuery("#redo").removeAttr("disabled");
                    } else {
                        jQuery("#redo").attr("disabled", "disabled");
                    }
                }
        },
        success: function (data) {
                chartComponent = data.components.pop();
                jQuery("option[value='" + chartComponent.chartType + "']").attr("selected", "selected");
            }
     });
    
    if (alwasyRefresh){
        report.refresh();
    }
    
    jQuery("button").click(function(){   
        report
            .refresh()
            .done(function(){console.log("Report Refreshed!");})
           ...