Visualize: Render report with pagination

Test plugins

by NesterOne

HTML

<script type='text/javascript' src="http://build-master.jaspersoft.com:7980/jrs-pro-bugfix/client/visualize.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<select id="repo-param">
    <option selected="selected" value="Drink/StackedBar">Drink & StackedBar</option>
    <option value="Food/Bar">Food & Bar</option>
    <option value="All/StackedColumn">All & StackedColumn</option>
</select>
<!-- <select id="chart-type">
    <option selected="selected" value="Line">Line</option>
    <option value="Column">Column</option>
    <option value="Bar">Bar</option>
</select>
 -->



<div id="container"></div>

JavaScript

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

    var report = v.report({
        resource: "/public/Samples/Reports/07g.RevenueDetailReport",
        params: {
            "ProductFamily": ["Drink"]
        },
        container: "#container",
        success: function(){
            console.log(this.data());
            var charts = this.data().components.filter(function(component){
                return component.componentType == "chart"
            });
            if (charts.length > 0){
                chartId = charts[0].id;
            }
        },
        error: showError
    });
    
    $('#repo-param').on('change', function(evt){
        
        if (!chartId) return;
              
        var paramValue = $(this).val().split('/')[0],
            chartType =  $(this).val().split('/')[1];
        
        console.log(paramValue);
  
        report
            .params({
            	"ProductFamily": [paramValue] 
        	})
            .updateComponent(chartId,{
            	chartType: chartType
        	});

    });
    
    console.log(v.report.chart.types);


    function showError(err) {
        alert(err);
    }
});