JSFiddle - React, Tailwind, and code Playground

by Pavel Savushchyk

HTML

<script src="http://localhost:8080/trunk/client/visualize.js?_opt=true"></script>

<select id="selected_resource" disabled="true" name="report">
  <option value="Table">Table</option>
  <option value="Crosstab">Crosstab</option>
  <option value="StackedBar">StackedPercentBar</option>
</select>

<div id="container"></div>

CSS

#selected_resource {
  margin-bottom: 20px;
}

#container {
  height: 450px;
  width: 600px;
  border: 1px solid black;
}

JavaScript

visualize({
  auth: {
    name: "superuser",
    password: "superuser"

  }
}, function(v) {
  var adv = v.adhocView({
    resource: "/public/Samples/Ad_Hoc_Views/01__Geographic_Results_by_Segment",
    container: "#container",
  });


  //render initial view
  setInitialType();

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

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

  function handleError(err) {
    console.log(err);
  }

  $('#selected_resource').prop('disabled', false);

  $("#container").resizable({
    resize: function(event, ui) {
      adv.resize();
    }
  });
});