VIsualize.js Render

HTML

<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script type='text/javascript' src="http://visualizejsdemo.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>
<select id="selectCity"></select>
<button id="previousPage">Previous Page</button>
<button id="nextPage">Next Page</button>
<div>
    <div style="width:20px;"></div>
    <div style="width:500px;" id="main"></div>  
</div>

CSS

#main{
   float: left; 
}

#drill-down{
    float: right; 
}

JavaScript

visualize({
    auth: {
        name: "joeuser",
        password: "joeuser",
        organization: "organization_1"
    }
}, function (v) {
    
    var $select = $("#selectCity"),
        report = v.report({
            resource: "/public/viz/Hyperlinks/Drill_Reports_with_Controls/main_report",  
            container: "#main",
            success: refreshSelect,
            error: showError
    });

    function refreshSelect(data){
        console.log(data);
        var options = data.links.reduce(function(memo, link){
                console.log(link);
                return memo + "<option>"+link.tooltip+"</option>";
            },"");
        $select.html(options);
    }
   
    $("#previousPage").click(function() {
        var currentPage = report.pages() || 1;
        goToPage(--currentPage);     
    });
    
    $("#nextPage").click(function() {
        var currentPage = report.pages() || 1;
        goToPage(++currentPage);
    });
    
    function goToPage(numder){ 
        report
            .pages(numder)
            .run()
                .done(refreshSelect)
                .fail(showError);
    }   
    
    function showError(err){
        alert(err.message);
    }
    
});