Visualize: Render report with pagination

Test plugins

by Yuriy Bablyukh

HTML

<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://localhost:8081/jasperserver-pro/client/visualize.js"></script>
<select id="chartType"></select>

<button id="logComponents">Log current components to console</button>
<button id="incorrectChartType">Set incorrect chart type</button>

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

JavaScript

visualize({
    auth: {
        name: "superuser",
        password: "superuser",
        organization: null
    }
}, function (v) {
    var chartComponent,
        report = v.report({
            resource: "/public/Samples/Reports/14g.PerformanceSummary",
            container: "#container",
            success: function(data) {
                chartComponent = data.components[2];
                $("option[value='" + chartComponent.chartType + "']").attr("selected", "selected");
            }
        });
    
    var chartTypes = report.schema("chart").properties.chartType.enum,
        chartTypeSelect = $("#chartType");

    $.each(chartTypes, function(index, type) {
       chartTypeSelect.append("<option value='" + type + "'>" + type + "</option>"); 
    });
    
    chartTypeSelect.on("change", function() {
        report
            .updateComponent(chartComponent.id, { chartType: $(this).val() })
            .done(function(component) { chartComponent = component; })
            .fail(function(error) { console.log(error); alert(error); });
    });
    
    $("#logComponents").on("click", function() {
        console.log(report.data().components);
    });
    
    $("#incorrectChartType").on("click", function() {
        report
            .updateComponent({ id: chartComponent.id, chartType: "foo" })
                .done(function(component) { chartComponent = component; })
                .fail(function(error) { alert(error); });
    });
});