VIsualize.js Render

by Yuriy Bablyukh

HTML

<!--Provide URL to visualize.js-->
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://visualizejs-preview.eng.jaspersoft.com:8080/jasperserver-pro-branch/client/visualize.js?log=true"></script>
<!--Provide container to render your visualization-->
<select id="selectCity"></select>
<button id="previousPage">Previous Page</button>
<button id="nextPage">Next Page</button>
<div>
    <div style="width:20px;"></div>
    <div  id="main"></div>  
</div>

CSS

#main{
   float: left; 
}

#drill-down{
    float: right; 
}

JavaScript

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

    function refreshSelect(data){
        console.log(data);
        var options = data.links.reduce(function(memo, link){

                //TODO: use 'link.tooltip' instead of 'link.parameters.city' 
            link.href='https://www.google.com.ua/search?q='+link.parameters.city;
            link.tooltip=link.parameters.city;
            $("span[data-id='"+link.id+"']").contents().unwrap().wrap("<a style='text-align:center;' target='_blank' id='"+link.id+"' title='"+link.tooltip+"' href='"+link.href+"'/>");
                            console.log(link);
            $("a#"+link.id+">span").css( "color", "blue" );
                return memo + "<option>"+link.parameters.city+"</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);
    }
    
});