Inserir painéis

Você pode inserir um painel do Tableau em seu próprio site ou página wiki e exibi-lo em diferentes layouts com base no tamanho do iframe.

• Para fazer com que o layout certo apareça para os usuários, independentemente de que dispositivo estejam usando, crie layouts específicos de dispositivo para o painel no Tableau Desktop. Quando você faz isso, o Tableau Server e o Tableau Cloud exibem automaticamente o layout correto com base no tamanho do iframe, contanto que você use 100% da largura e da altura do iframe, em vez dos valores de pixel exatos (veja abaixo).
• Para sempre exibir determinado layout, independentemente do tamanho do iframe, use o parâmetro device no código inserido.

No exemplo a seguir, o código inserido exibe um painel com 800 pixels de largura por 600 pixels de altura. Os valores exatos de largura e altura são parte do código inserido padrão obtido ao clicar no botão Compartilhar na parte superior de uma exibição ou um painel:

<script type='text/javascript' src='http://mysite.myserver.com/javascripts/api/viz_v1.js'></script>
  <div class='tableauPlaceholder' style='width: 800px; height: 600px;' >
  <object class='tableauViz' width='800' height='600' style='display:none;'>
  <param name='host_url' value='http://mysite.myserver.com' />
  <param name='site_root' value='' />
  <param name='name' value='ProfitAnalysis/Sales_Dashboard' />		
  <param name='tabs' value='yes' />
  <param name='toolbar' value='yes' />
  <param name='filter' value=':original_view=yes' /></object></div>

Neste exemplo, em que o painel usa layouts específicos de dispositivo, os atributos de estilo da classe div foram removidos e os valores da classe de objeto para largura e altura foram substituídos por 100%. Na maioria dos casos, o layout é exibido; ou seja, se a largura e altura não estiverem sendo controladas em outro local do CSS.

<script type='text/javascript' src='http://mysite.myserver.com/javascripts/api/viz_v1.js'></script>
  <div class='tableauPlaceholder' >
  <object class='tableauViz' width='100%' height='100%' style='display:none;'>
  <param name='host_url' value='http://mysite.myserver.com' />
  <param name='site_root' value='' />
  <param name='name' value='ProfitAnalysis/Sales_Dashboard' />		
  <param name='tabs' value='yes' />
  <param name='toolbar' value='yes' />
  <param name='filter' value=':original_view=yes' /></object></div>

Se o layout correto não for exibido, pode ser porque a página HTML usada para a inserir a exibição tem uma tag <!DOCTYPE html> e esta tag está impedindo itens no corpo da página de serem redimensionados para 100% (consulte detalhe sobre Excedente de pilha). Uma solução alternativa é adicionar as seguintes linhas ao corpo da sua página HTML:

<style>
  html, body { height: 100% }
</style>

O exemplo a seguir presume que o painel incorporado tenha layouts específicos de dispositivo. O parâmetro device está definido como phone. Isso significa que, não importa qual dispositivo seja exibido no painel, o layout criado para telefones será mostrado.

<script type='text/javascript' src='http://mysite.myserver.com/javascripts/api/viz_v1.js'></script>
  <div class='tableauPlaceholder'>
  <object class='tableauViz' width='100%' height='100%' style='display:none;'>
  <param name='host_url' value='http://mysite.myserver.com' />
  <param name='site_root' value='' />
  <param name='name' value='ProfitAnalysis/Sales_Dashboard' />
  <param name='device' value='phone' />			
  <param name='tabs' value='yes' />
  <param name='toolbar' value='yes' />
  <param name='filter' value=':original_view=yes' /></object></div>

Dimensões do iframe e layouts do dispositivo

O layout do painel exibido por um dispositivo é baseado na menor dimensão (altura ou largura) do iframe na qual a exibição do Tableau é mostrada. Às vezes, os layouts de computador, tablet ou celular podem ser exibidos em outros tipos de dispositivos. Por exemplo, um layout de tablet pode ser exibido em um computador desktop se a tela ou a janela do navegador for pequena demais.

Para obter detalhes sobre como criar um painel que usa layouts específicos de dispositivo, consulte Criar layouts de painel para tipos de dispositivo diferentes.