Visualize: Change Chart Type

Test plugins

by Pavel Savushchyk

HTML

<script type='text/javascript' src="http://localhost:8080/trunk/client/visualize.js?_opt=false"></script>
<div id="container"></div>

JavaScript

visualize({
    auth: {
        name: "superuser",
        password: "superuser"
    }
}, function (v) {
    
    //persisted chart name
    var chartName = "3df243ec-41de-4152-80da-0e433cf8715f", 
        $select = buildControl("Chart types: ", v.report.chart.types),
        report = v.report({
            resource: "/public/BZ41350",
            container: "#container",
            success: selectDefaultChartType
        });

    $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>",
            content = template.replace("{label}", name)
                .replace("{options}", buildOptions(options));

        var $control = $(content);
        $control.insertBefore($("#container"));
        return $control;
    }

});