// 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>