Visualize: Ad Hoc View Filter Parameters

HTML

<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="https://mobiledemo.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>

<a>Select data points to <b>drill-down</b> the view over time.</a><br><br>
<input id="backButton" name="goBack" type="button" value="< Back"/>

<div id="field" class="selected"></div>
<div id="measure" class="selected"></div>

<div id="firstContainer"></div>
<div id="secondContainer"></div>

CSS

.selected {
  display: inline;
  font-size: 1.3em;
  color: #3C1A06;
}

#field {
  margin-right: 20px;
}

#firstContainer {
  height: 350px;
  margin-bottom: 10px;
}

#backButton {
  display:none;
  outline: none;
  position: relative;
  float: right;
  top: -10px;
  margin-right: 10px;
  margin-bottom: 5px;
  font-size: 1.15em;
  border: 1px solid #524236;
  border-radius: 20px;
  background-color: #E8E6DF;
  color: #3C1A06;
}

JavaScript

var firstView = "/public/viz/Adhoc/Store_Sales3";

visualize({
  auth: {
    name: "joeuser",
    password: "joeuser"
  }
}, function(v) {
  function renderView() {
  	$("#backButton").hide();
    first = v.adhocView({
      resource: firstView,
      container: "#firstContainer",
      linkOptions: {
        events: {
          click: function(ev, data, defaultHandler, extendedData) {
            console.log(data);
            var measureSelected = data.Measures;
            var categorySelected = data.product_category;
            $("#field").html("<span>Field: <b>" + data.product_category + "</b></span>") 

            updateView(measureSelected, categorySelected)
          }
        }
      },
      success: function() {
        console.log("Available filters")
        console.log(first.data().metadata.inputParameters);
      },
      error: function(e) {
        console.log(e);
      }
  	});
  }
  
  renderView()
  
  function updateView(measure, category) {
  	var showCostView = "/public/viz/Adhoc/Store_Cost4";
    var showSalesView = "/public/viz/Adhoc/Store_Sales4";
    
    $("#backButton").show();
    if (measure[0] === "store_cost") {
    
    	$("#measure").html("<span>Measure: <b>Store Cost</b></span>")
    	var costView = v.adhocView({
    		resource: showCostView,
    		container: "#firstContainer",
        params: {
        	product_category_1: [category]
      	},
    		error: function(e) {
      		console.log(e);
    		}
  		});
      
    } else {
    	$("#measure").html("<span>Measure: <b>Store Sales</b></span>")
    	var salesView = v.adhocView({
    		resource: showSalesView,
    		container: "#firstContainer",
        params: {
        	product_category_1: [category]
      	},
    		error: function(e) {
      		console.log(e);
    		}
  		});
		}
	}
  
  function goBack() {
  	$("input[name='goBack']").click(doIt);
    
  	function doIt() {
      renderView()
  	} 
	} 
  
  goBack()
});