JSFiddle - React, Tailwind, and code Playground

by Pavel Savushchyk

HTML

<script type='text/javascript' src="http://code.jquery.com/jquery-2.1.0.js"></script>
    <script type='text/javascript' src="http://localhost:8080/jrs1/client/visualize.js?_opt=false&userLocale=fr"></script>
    
<select id="selected_resource" disabled="true" name="report">
<option value="/public/viz/Adhoc/Ad_Hoc_View_chart">chart</option>
  <option value="/public/viz/Adhoc/Ad_Hoc_View_chart_domain">domain based chart</option>

</select>
<select id="chart_type_list_1" disabled="true" name="chart_type_list_1"></select>


By API: <select id="chart_type_list_2" disabled="true" 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(uri, chartType) {
    adv = v.adhocView({
      resource: uri,
      container: "#container",
      canvas: {
         chart: {
           type: chartType || "column"
         }
      },
      success: function() {
      	

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

var preselected = getCookie("preselected");
if (preselected) {
  $("#selected_resource").val(preselected);
}

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

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

	$("#selected_resource, #chart_type_list_1").change(function() {
  	// save selected to cookie
    setCookie("preselected", $("#selected_resource").val());
    //clean container
    $("#container").html("");
    //render selected view
    renderView($("#selected_resource").val(), $("#chart_type_list_1").val());
  });
  //enable report chooser
  $(':disabled').prop('disabled', false);

  //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",
           ...