Como incorporar uma visualização do Tableau em um site

Editado 1 dia atrás por ExtremeHow Equipe Editorial

TableauIncorporação na webVisualização de dadosInteligência empresarialDesenvolvimento WebIntegraçãoAnáliseJanelasMacHTML

Incorporar visualizações do Tableau em um site é uma ótima maneira de compartilhar dados interativos e dashboards com um público mais amplo. É uma abordagem útil para integrar inteligência empresarial em sua aplicação web, permitindo que os visitantes do site explorem dados diretamente da página da web. Neste guia, vamos orientá-lo pelas várias etapas e requisitos para incorporar com sucesso as visualizações do Tableau em seu site.

Compreendendo as opções de incorporação do Tableau

Antes de mergulharmos nos procedimentos técnicos, é importante entender o que significa incorporar. Ao incorporar uma visualização do Tableau, você está essencialmente integrando um pedaço de dados interativos diretamente em uma página da web. Isso pode ser um relatório, um dashboard ou qualquer representação visual de dados que você crie usando o Tableau.

Aqui estão os principais métodos pelos quais você pode incorporar visualizações do Tableau:

1. Usando o Tableau Public.
2. Usando o Tableau Server ou Tableau Cloud.
3. Usando a API JavaScript do Tableau.

Usando o Tableau Public

O Tableau Public é uma plataforma gratuita onde os usuários podem compartilhar visualizações do Tableau publicamente. Para usar este método, siga estas etapas:

1. Crie uma visualização no Tableau Desktop.
2. Publique-a no Tableau Public.
3. Obtenha o código de incorporação do Tableau Public.

Etapa 1: Criar a visualização no Tableau Desktop

Comece criando uma visualização abrangente no Tableau Desktop. Certifique-se de que seus dados estão limpos e que sua visualização reflete com precisão a história que você deseja contar. Quando estiver satisfeito com a visualização, você estará pronto para publicá-la.

Etapa 2: Publicar no Tableau Public

No Tableau Desktop, clique no botão do menu rotulado "Arquivo" e selecione "Salvar no Tableau Public como...". Você precisará fazer login na sua conta do Tableau Public. Se você não tiver uma conta, precisará se inscrever gratuitamente. Depois de fazer login, sua visualização será carregada no Tableau Public.

Etapa 3: Obter o código de incorporação

Depois que sua visualização estiver no Tableau Public, abra-a em um navegador da web. Haverá um botão de compartilhamento (geralmente intitulado "Compartilhar"), geralmente localizado próximo à parte inferior da janela. Quando você clicar neste botão, verá várias opções para compartilhar sua visualização. Selecione a opção "Código de Incorporação". Isso fornecerá um trecho de HTML que você pode inserir em seu site.

<iframe src="https://public.tableau.com/views/YourViz here" width="800" height="600" frameborder="0" scrolling="no"></iframe>

Copie e cole este código iframe no HTML da página da web onde você deseja que a visualização apareça.

Usando o Tableau Server ou Tableau Cloud

Se você estiver usando o Tableau Server ou Tableau Cloud, terá mais opções para controlar o acesso às suas visualizações do que no Tableau Public. Essas plataformas fornecem capacidades de incorporação juntamente com segurança e autenticação de usuários, mas as etapas básicas para incorporação permanecem um tanto semelhantes.

Etapa 1: Publicar sua visualização no Tableau Server ou Tableau Cloud

Crie sua visualização no Tableau Desktop e publique-a no seu Tableau Server ou Tableau Cloud. Selecione a opção “Servidor” no menu principal, depois escolha “Publicar Workbook” e siga as instruções.

Etapa 2: Obter o código de incorporação

Depois que o workbook for carregado, vá para a versão online e procure o botão “Compartilhar”. Isso exibirá as opções para incorporação. Dependendo da configuração da sua organização, você pode precisar de acesso de administrador para obter o código de incorporação.

O Tableau Server ou Tableau Cloud geralmente fornece o código de incorporação como um iframe, ou você pode personalizá-lo usando a API JavaScript. Um exemplo de código de incorporação iframe fornecido pelo Tableau pode parecer assim:

<iframe src="https:// /views/YourViz here" width="800" height="600" frameborder="0"></iframe>

Coloque este código no HTML do seu site onde você deseja que a visualização seja exibida.

Usando a API JavaScript do Tableau

Para necessidades de incorporação mais sofisticadas, a API JavaScript do Tableau oferece mais flexibilidade e controle. Ela permite que você interaja programaticamente com visualizações.

Etapa 1: Incluir a API JavaScript do Tableau em seu HTML

Primeiro, certifique-se de que sua página da web inclua a biblioteca API JavaScript do Tableau. Adicione a seguinte linha à seção <head> do seu documento HTML:

<script type="text/javascript" src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>

Etapa 2: Criar um contêiner para a visualização

Configure um espaço reservado ou contêiner em seu arquivo HTML para conter a visualização do Tableau. Isso geralmente é um elemento <div> com uma largura e altura especificadas.

<div id="tableauViz" style="width: 800px; height: 600px;"></div>

Etapa 3: Inicializar e incorporar a visualização

Usando JavaScript, você pode inicializar e incorporar visualizações do Tableau na página. Aqui está um exemplo de script:

<script type="text/javascript">
  var containerDiv = document.getElementById("tableauViz"),
      url = "https://public.tableau.com/views/YourDashboard here",
      options = {
          width: containerDiv.style.width,
          height: containerDiv.style.height,
          hidetabs: true,
          hideToolbar: true
      };

  viz = new tableau.Viz(containerDiv, url, options);
</script>

O script acima aponta para um <div> na página com o ID “tableauViz”. Ele carrega a visualização do Tableau a partir da URL fornecida e aplica opções personalizadas, como ocultar as abas e a barra de ferramentas padrão.

Implementação de segurança e autenticação

Ao incorporar visualizações do Tableau, especialmente para uso interno, é importante proteger os dados. O Tableau Server e o Tableau Cloud fornecem autenticação baseada em usuário e gerenciamento de permissões para garantir que apenas usuários autorizados possam acessar as visualizações.

Algumas opções de segurança que você pode considerar incluem incorporação com autenticação SAML, habilitar autenticação confiável que permite ignorar o login no Tableau Server, ou usar OAuth.

Manipulação de design responsivo

Se o site for responsivo, pode ser necessário garantir que a visualização incorporada também seja responsiva para se adaptar a diferentes telas de dispositivos. Uma maneira de conseguir isso é ajustar dinamicamente o iframe ou o div contêiner via CSS e JavaScript.

Exemplo de CSS responsivo

<style>
  #tableauViz {
      width: 100%;
      height: 0;
      padding-bottom: 56.25%; /* proporção de 16:9 */
      position: relative;
  }
</style>

O exemplo de CSS acima permitirá que sua visualização mantenha uma proporção de 16:9 em todos os dispositivos usando o truque “padding-bottom”, que é uma técnica comum em design de web responsivo.

Pensamentos finais

Incorporar visualizações do Tableau em um site adiciona valiosas informações interativas de dados diretamente à sua página da web. Seja utilizando o Tableau Public para dados livremente disponíveis, aproveitando o Tableau Server ou Cloud para cenários empresariais, ou usando a API JavaScript para soluções personalizadas, você tem uma variedade de opções para integrar poderosas visualizações do Tableau em seu ambiente web.

Considerações cuidadosas sobre segurança, design responsivo e as necessidades dos seus usuários ajudarão a garantir que seus dashboards do Tableau incorporados sejam tanto úteis quanto seguros. Experimente diferentes abordagens e encontre a solução que funcione melhor para suas necessidades únicas. Feliz visualização de dados!

  Compartilhe Este Artigo

Se você encontrar algo errado com o conteúdo do artigo, você pode solicitar uma atualização