Resize
Resize a visualization to a size that you specify. Worksheets automatically resize to fill the div container for the visualization. However, dashboards and stories do not resize automatically unless you create them with the automatic size option in Tableau Desktop. Scroll down to see how to change the size of a visualization that contains a dashboard or story.
<!DOCTYPE html>
<html>
<head>
<title>Resizing</title>
<script type="text/javascript"
src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>
<script type="text/javascript">
var viz;
function initViz() {
var containerDiv = document.getElementById("vizContainer"),
url = "http://public.tableau.com/views/RegionalSampleWorkbook/Stocks",
options = {
hideTabs: true
};
viz = new tableau.Viz(containerDiv, url, options);
}
function vizResize() {
var width = document.getElementById("resizeWidth").value;
var height = document.getElementById("resizeHeight").value;
viz.setFrameSize(parseInt(width, 10), parseInt(height, 10));
}
</script>
</head>
<body onload="initViz();">
<div id="vizContainer" style="width:800px; height:700px; overflow:auto;"></div>
<div id="controls" style="padding:20px;">
<form id="resizeForm">
<input type="text" id="resizeWidth" placeholder="Width">
<input type="text" id="resizeHeight" placeholder="Height">
<button type="button" onClick="vizResize();">Resize</button>
</form>
</div>
</body>
</html>
To change the size of a visualization that contains a dashboard or story, use the following function instead.
function vizResize() {
var width = document.getElementById("resizeWidth").value;
var height = document.getElementById("resizeHeight").value;
var sheet = viz.getWorkbook().getActiveSheet();
sheet.changeSizeAsync(
{"behavior": "EXACTLY", "maxSize": { "height": height, "width": width }})
.then(viz.setFrameSize(parseInt(width, 10), parseInt(height, 10)));
}