Visualize: Change visualization type

by Pavel Savushchyk

HTML

<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
   <script src="http://localhost:8080/trunk/client/visualize.js?_opt=true"></script>
    


Change visualization type by API: <select id="viz_type_list_2" name="viz_type_list_2"></select>

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

JavaScript

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"
    });
  }
  //render initial view
  renderView();

   $("#viz_type_list_2").html(createOptionsForVizTypes());
setinitialType();

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

  //show error
  function handleError(err) {
    console.log(err.message);
  }
  
  function setinitialType() {
   adv.canvas({
      	type: $("#viz_type_list_2").val()
    }).run().fail(handleError);
  }

});


function createOptionsForVizTypes() {
	var types = ["Table", "Crosstab", "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;
}