JSFiddle - React, Tailwind, and code Playground

by Yuriy Bablyukh

HTML

<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?_opt=false"></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"></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(function(v) {

    adv = v.adhocView({
      resource: "/public/Ad_Hoc_View_Bar",
      container: "#container",
      success: function(data) {
      	
        console.log("done");
        console.log(data);
      },
      error: function() {
        console.log(arguments);
      }
    });

   $("#chart_type_list_2").html(createOptionsForChartTypes());

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

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

});


function createOptionsForChartTypes() {
	var types = [
                "column",
                "stacked_column",
                "percent_column",
                "bar",
                "stacked_bar",
                "percent_bar",
                "spider_column",

                "line",
                "spline",
                "area",
                "stacked_area",
                "percent_area",
                "spline_area",
                "spider_line",
                "spider_area",

                "column_line",
                "column_spline",
                "stacked_column_line",
                "stacked_column_spline",
                "multi_axis_line",
                "multi_axis_spline",
                "multi_axis_column",

                "line_time_series",
                "spline_time_series",
                "area_time_series",
                "spline_area_time_series",

                "scatter",
                "bubble",

                "pie",
                "dual_level_pie",
                "semi_pie",

                "heat_map",
                "heat_map_time_series",
                "dual_measure_tree_map",
                "tree_map",
                "one_parent_tree_map"
          ...