Visualize: Change Chart Type

Test plugins

by Yuriy Bablyukh

HTML

<script type='text/javascript' src="http://build-master.jaspersoft.com:7980/jrs-pro-bugfix/client/visualize.js?_opt=true& logEnabled=false"></script>
<button id='apply'>Apply</button>
<div id="container"></div>

JavaScript

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

    //persisted chart name
    var chartName = "6de026d7-450e-41df-9495-90da1be6ebf7",
        $select = buildControl("Chart types: ", v.report.chart.types),
        report = v.report({
            resource: "/public/BarChartFoodmart",
            container: "#container",
            success: selectDefaultChartType,
            error: function (error) {
                console.log(error);
                alert(error);
            }
        });



    $("#apply").click(function () {
        var params = {
            "product_name_1": ["ADJ Rosy Sunglasses"]
        };
        report.params(params).run().fail(function (error) {
            alert(error);
        });
    });

    $select.on("change", function () {
        report.updateComponent(chartName, {
            chartType: $(this).val()
        })
            .done(function (component) {
            chartComponent = component;
        })
            .fail(function (error) {
            alert(error);
        });
    });

    function selectDefaultChartType(data) {
        var component = data.components.filter(function (c) {
            return c.name === chartName || c.id === chartName;
        })
            .pop();
        console.log(component);
        if (component) {
            document.getElementById("chartType").value = component.chartType;
        }
    }

    function buildControl(name, options) {

        function buildOptions(options) {
            var template = "<option id='{value}'>{value}</option>";
            return options.reduce(function (memo, option) {
                return memo + template.replace("{value}", option).replace("{value}", option);
            }, "")
        }

        console.log(options);

        if (!options.length) {
            console.log(options);
        }

        var template = "<label>{label}</label><select id='chartType'>{options}</select><br>",
           ...