JSFiddle - React, Tailwind, and code Playground

HTML

<script type='text/javascript' src="http://code.jquery.com/jquery-2.1.0.js"></script>
    <script type='text/javascript' src="http://infra-platforms-phase2-6149-ztomchen.pfa.jaspersoft.com:8080/jasperserver-pro/client/visualize.js"></script>
    


Change chart type by API: <select id="chart_type_list_2" name="chart_type_list_2"></select>

<!--Provide container to render your visualization-->
<div id="container" style="height: 400px;position: relative"></div>

JavaScript

/*

    "/public/Samples/Ad_Hoc_Views/11__Top_5_Products_by_City",
    /public/Samples/Ad_Hoc_Views/01__Geographic_Results_by_Segment
*/
var adv;
visualize({
  auth: {
    name: "superuser",
    password: "superuser"
  }
}, function(v) {
  function renderView(chartType) {
    adv = v.adhocView({
      resource: "/public/Samples/Ad_Hoc_Views/01__Geographic_Results_by_Segment",
      container: "#container",
      canvas: {
          type: chartType || "Column"
      },
      success: function() {
      	

        console.log(arguments);
      },
      error: function() {
        console.log(arguments);
      }
    });
  }

  //render initial view
  renderView();
	
   $("#chart_type_list_2").html(createOptionsForChartTypes());

	$("#chart_type_list_2").change(function() {
  	adv.canvas({
      	type: $("#chart_type_list_2").val()
    }).run().fail(handleError);
  });

  //show error
  function handleError(err) {
    console.log(err.message);
  }

});


function createOptionsForChartTypes() {
	var types = ["Bar", "Column", "Line", "Area", "Spline", "AreaSpline", "StackedBar", "StackedColumn", "StackedArea", "StackedPercentBar", "StackedPercentColumn", "StackedPercentArea", "Pie", "DualLevelPie", "TimeSeriesLine", "TimeSeriesArea", "TimeSeriesSpline", "TimeSeriesAreaSpline", "ColumnLine", "ColumnSpline", "StackedColumnLine", "StackedColumnSpline", "MultiAxisLine", "MultiAxisSpline", "MultiAxisColumn", "Scatter", "Bubble", "SpiderColumn", "SpiderLine", "SpiderArea", "HeatMap", "TimeSeriesHeatMap", "SemiPie", "DualMeasureTreeMap", "TreeMap", "OneParentTreeMap"];
  var result = "";
	types.forEach(function(type) {
  		result += "<option value='" + type + "'>" + type + "</option>";
  });
  return result;
}