Edit in JSFiddle

// Visualize: Change Chart Type  (5.6)

// This Fiddle uses a non-standard demo Report Unit:
//    /public/viz/PersistedId/1._Geographic_Results_by_Segment_Report

visualize({
    auth: {
        name: "superuser",
        password: "superuser"
    }
}, function (v) {
    
    //persisted chart name
    var chartName = "geo_by_seg", 
        $select = buildControl("Chart types: ", v.report.chart.types),
        report = v.report({
            resource: "/public/viz/PersistedId/1._Geographic_Results_by_Segment_Report",
            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;
                            })
                            .pop();
        if (component) {
            $select.find("option[value='" + component.chartType + "']")
                   .attr("selected", "selected");
        }
    }

    function buildControl(name, options) {

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

        console.log(options);

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

        var template = "<label>{label}</label><select>{options}</select><br>",
            content = template.replace("{label}", name)
                .replace("{options}", buildOptions(options));

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

});

<!-- Visualize: Change Chart Type  (5.6)
  -->
<script type='text/javascript' src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script type='text/javascript' src="http://localhost:8080/jasperserver-pro/client/visualize.js"></script>
<div id="container"></div>