Visualize: complex sample 4 reports

HTML

<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://visualizejs-preview.eng.jaspersoft.com:8080/jasperserver-pro-branch/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>

CSS

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

JavaScript

visualize({
    auth: {
    name : "admin",        
    password: "dev",
        organization: "TimeWarnerCable"
    }
}, 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());
            }
        });
    });


});