Edit in JSFiddle

// Visualize: Composition of 4 reports  (5.6)

visualize({
    auth: {
        name: "superuser",
        password: "superuser"
    }
}, function (v) {

    var reportsToLoad = [
        "/public/Samples/Reports/AllAccounts",
        "/public/Samples/Reports/01._Geographic_Results_by_Segment_Report",
        "/public/Samples/Reports/Cascading_Report_2_Updated",
        "/public/Samples/Reports/07g.RevenueDetailReport"];

    $.each(reportsToLoad, function (index, uri) {
        var container = "#c" + (index + 1);
        v(container).report({
            resource: uri,
            events: {
                reportCompleted: function (status) {
                    console.log("Report " + this.resource() + " is " + status);
                },
                beforeRender: function (html) {
                    console.log("Report " + this.resource() + " is about to render");
                }
            },
            success: function () {
                console.log("Report " + this.resource() + " is loaded");
            },
            error: function (err) {
                alert(err.message + " in report from" + this.resource());
            }
        });
    });


});

<!-- Visualize: Composition of 4 reports  (5.6)
  -->

<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<script type='text/javascript' src="http://localhost:8080/jasperserver-pro/client/visualize.js"></script>
<table class="sample">
    <tr>
        <td id="c1"></td>
        <td id="c2"></td>
    </tr>
    <tr>
        <td id="c3"></td>
        <td id="c4"></td>
    </tr>
</table>

html, body {
}
table.sample {
    width: 100%;
}
td#c1, td#c2, td#c3, td#c4 {
    width: 50%;
}