Comentarios
Cómo integrar una visualización de Tableau en un sitio web
Editado 1 hace un día por ExtremeHow Equipo Editorial
TableauInserción WebVisualización de DatosInteligencia de NegociosDesarrollo webIntegraciónAnalíticaWindowsMacHTML
Traducción actualizada 1 hace un día
Integrar visualizaciones de Tableau en un sitio web es una excelente manera de compartir datos y paneles de control interactivos con una audiencia más amplia. Es un enfoque útil para integrar inteligencia empresarial en su aplicación web, permitiendo a los visitantes del sitio explorar datos directamente desde la página web. En esta guía, lo guiaremos a través de los diversos pasos y requisitos para integrar visualizaciones de Tableau con éxito en su sitio.
Entendiendo las opciones de integración de Tableau
Antes de adentrarnos en los procedimientos técnicos, es importante entender qué significa integrar. Cuando integras una visualización de Tableau, esencialmente estás incorporando un fragmento de datos interactivos directamente en una página web. Esto puede ser un reporte, panel de control o cualquier representación visual de datos que crees utilizando Tableau.
Aquí están los principales métodos mediante los cuales puedes integrar visualizaciones de Tableau:
- Usando Tableau Public.
- Usando Tableau Server o Tableau Cloud.
- Usando la API de JavaScript de Tableau.
Usando Tableau Public
Tableau Public es una plataforma gratuita donde los usuarios pueden compartir visualizaciones de Tableau públicamente. Para usar este método, sigamos estos pasos:
- Crea una visualización en Tableau Desktop.
- Públícala en Tableau Public.
- Obtén el código de integración de Tableau Public.
Paso 1: Crea la visualización en Tableau Desktop
Comienza creando una visualización completa en Tableau Desktop. Asegúrate de que tus datos estén limpios y que tu visualización refleje con precisión la historia que deseas contar. Una vez que estés satisfecho con la visualización, estarás listo para publicarla.
Paso 2: Publicar en Tableau Public
En Tableau Desktop, haz clic en el botón del menú etiquetado como "Archivo" y luego selecciona "Guardar en Tableau Public como...". Necesitarás iniciar sesión en tu cuenta de Tableau Public. Si no tienes una cuenta, tendrás que registrarte gratuitamente. Una vez que inicies sesión, tu visualización se cargará en Tableau Public.
Paso 3: Obtén el código de integración
Una vez que tu visualización esté en Tableau Public, ábrela en un navegador web. Habrá un botón para compartir (a menudo titulado "Compartir"), usualmente ubicado cerca de la parte inferior de la ventana. Al hacer clic en este botón, verás varias opciones para compartir tu visualización. Selecciona la opción "Código de integración". Esto te proporcionará un fragmento de HTML que puedes insertar en tu sitio web.
<iframe src="https://public.tableau.com/views/TuVisualización aquí" width="800" height="600" frameborder="0" scrolling="no"></iframe>
Copia y pega este código de iframe en el HTML de la página web donde deseas que aparezca la visualización.
Usando Tableau Server o Tableau Cloud
Si estás usando Tableau Server o Tableau Cloud, tienes más opciones para controlar el acceso a tus visualizaciones que Tableau Public. Estas plataformas brindan capacidades de integración junto con seguridad y autenticación de usuarios, pero los pasos básicos para integrar permanecen algo similares.
Paso 1: Publica tu visualización en Tableau Server o Tableau Cloud
Crea tu visualización en Tableau Desktop y publícala en tu Tableau Server o Tableau Cloud. Selecciona la opción “Servidor” en el menú principal, luego elige “Publicar libro de trabajo” y sigue las instrucciones.
Paso 2: Obtén el código de integración
Una vez que el libro de trabajo esté cargado, dirígete a la versión en línea y busca el botón “Compartir”. Esto mostrará las opciones para integrar. Dependiendo de la configuración de tu organización, es posible que necesites acceso de administrador para obtener el código de integración.
Tableau Server o Tableau Cloud generalmente proporciona el código de integración como un iframe, o puedes personalizarlo usando la API de JavaScript. Un ejemplo de código de integración de iframe proporcionado por Tableau podría verse así:
<iframe src="https:// /views/TuVisualización aquí" width="800" height="600" frameborder="0"></iframe>
Coloca este código en el HTML de tu sitio web donde deseas que se muestre la visualización.
Usando la API de JavaScript de Tableau
Para necesidades de integración más sofisticadas, la API de JavaScript de Tableau proporciona más flexibilidad y control. Te permite interactuar programáticamente con las visualizaciones.
Paso 1: Incluye la API de JavaScript de Tableau en tu HTML
Primero, asegúrate de que tu página web incluya la biblioteca API de JavaScript de Tableau. Añade la siguiente línea a la sección <head> de tu documento HTML:
<script type="text/javascript" src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>
Paso 2: Crea un contenedor para la visualización
Configura un marcador de posición o contenedor en tu archivo HTML para sostener la visualización de Tableau. Por lo general, esto es un elemento <div> con un ancho y alto especificados.
<div id="tableauViz" style="width: 800px; height: 600px;"></div>
Paso 3: Inicializar e integrar la visualización
Usando JavaScript, puedes inicializar e integrar visualizaciones de Tableau en la página. Aquí hay un ejemplo de script:
<script type="text/javascript">
var containerDiv = document.getElementById("tableauViz"),
url = "https://public.tableau.com/views/TuDashboard aquí",
options = {
width: containerDiv.style.width,
height: containerDiv.style.height,
hidetabs: true,
hideToolbar: true
};
viz = new tableau.Viz(containerDiv, url, options);
</script>
El script anterior apunta a un <div> en la página con el ID “tableauViz”. Carga la visualización de Tableau desde la URL dada y aplica opciones personalizadas como ocultar las pestañas y la barra de herramientas predeterminadas.
Implementación de seguridad y autenticación
Al integrar visualizaciones de Tableau, especialmente para uso interno, es importante asegurar los datos. Tableau Server y Tableau Cloud proporcionan autenticación basada en usuarios y gestión de permisos para asegurar que solo los usuarios autorizados puedan acceder a las visualizaciones.
Algunas opciones de seguridad que puedes considerar incluyen integrar con autenticación SAML, habilitar la autenticación confiable que te permite omitir el inicio de sesión en Tableau Server, o usar OAuth.
Gestión de diseño responsivo
Si el sitio web es responsivo, es posible que necesites asegurarte de que la visualización integrada también sea responsiva para ajustarse a diferentes pantallas de dispositivos. Una forma de lograr esto es ajustar dinámicamente el iframe o el <div> contenedor mediante CSS y JavaScript.
Ejemplo de CSS responsivo
<style>
#tableauViz {
width: 100%;
height: 0;
padding-bottom: 56.25%; /* relación de aspecto 16:9 */
position: relative;
}
</style>
El ejemplo de CSS anterior permitirá que tu visualización mantenga una relación de aspecto 16:9 en todos los dispositivos utilizando el truco de “padding-bottom”, que es una técnica común en diseño web responsivo.
Reflexiones finales
Integrar visualizaciones de Tableau en un sitio web agrega valiosos conocimientos de datos interactivos directamente a tu página web. Ya sea que estés usando Tableau Public para datos disponibles libremente, aprovechando Tableau Server o Cloud para escenarios empresariales, o usando la API de JavaScript para soluciones personalizadas, tienes varias opciones para integrar poderosas visualizaciones de Tableau en tu entorno web.
Una cuidadosa consideración de la seguridad, el diseño responsivo y las necesidades de tus usuarios ayudará a asegurar que tus paneles de control de Tableau integrados sean útiles y seguros. Experimenta con diferentes enfoques y encuentra la solución que mejor funcione para tus necesidades únicas. ¡Feliz visualización de datos!
Si encuentras algo incorrecto en el contenido del artículo, puedes