Visualize: Change Chart Type API

Test plugins

by Yuriy Bablyukh

HTML

<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://build-master.jaspersoft.com:7580/jrs-pro-feature-amber-embedded-report/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>ender r

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

JavaScript

var chartTypes = [
	"Bar", "Column", "Line", "Area", "Spline",
	"AreaSpline", "StackedBar", "StackedColumn", "StackedLine", "StackedArea",
    "StackedSpline", "StackedAreaSpline", "StackedPercentBar", "StackedPercentColumn", "StackedPercentLine",
    "StackedPercentArea", "StackedPercentSpline", "StackedPercentAreaSpline", "Pie",
    "DualLevelPie", "TimeSeriesLine", "TimeSeriesArea", "TimeSeriesSpline",
    "TimeSeriesAreaSpline", "ColumnLine", "ColumnSpline", "StackedColumnLine",
    "StackedColumnSpline", "MultiAxisLine", "MultiAxisSpline", "MultiAxisColumn",
    "Scatter", "Bubble", "SpiderColumn", "SpiderLine", "SpiderArea"
];

var chartTypeSelect = $("#chartType");

$.each(chartTypes, function(index, type) {
   chartTypeSelect.append("<option value='" + type + "'>" + type + "</option>"); 
});

visualize({
    auth: {
        name: "superuser",
        password: "superuser"
    }
}, function (v) {
    var chartComponent;
    
    var report = v.report({
        resource: "/public/Samples/Reports/9.CustomerDetailReport",
        container: "#container",
        success: function(data) {
            chartComponent = data.components[0];
            $("option[value='" + chartComponent.chartType + "']").attr("selected", "selected");
        }
    });
    
    chartTypeSelect.on("change", function() {
        report
            .updateComponent(chartComponent.id, { chartType: $(this).val() })
            .done(function(component) { chartComponent = component; })
            .fail(function(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); });
    });
});