Vaya por delante que mi conocimiento de Javascript es cercano a nulo. Cuando digo “para torpes” me refiero a gente como yo, sin experiencia previa con JS.
Este es el primero de una serie de posts en los que pretendo hacer más cercana la API. Lo básico y fundamental.
Por ello, la primera pregunta que me viene a la cabeza es ¿Qué hace la API? y la segunda es ¿Cuándo es necesaria? En este post me centro en unos casos en los que NO es necesaria como, por ejemplo, incluir la visualización en WordPress (o en cualquier página web).
¿Qué hace la API? Permite integrar visualizaciones en páginas u objetos web, mantener la interacción original de la visualización y comunicarse con el entorno en el que se encuentra (pasar información de la visualización a la página y al revés).
¿Cuándo no hace falta la API?
En toda aquella ocasión en la que no sea necesario combinar información entre la visualización y la página web. Es decir, si sólo se va a interaccionar con la visualización, sin necesidad de que la interacción con la visualización modifique la página web o que la interacción con la página web modifique la visualización.
¿Cuál es la alternativa en estos casos?
- Iframe.
- Código para incrustar la imagen (web embed).
iframe
<iframe src="https://www.example.com/" name="SubHtml" width="400" height="500" frameborder="1" scrolling="auto"> Texto alternativo para navegadores que no aceptan iframes. </iframe>y, en el caso de WordPress y otros, se puede usar un plug in que permita convertir una url en un iframe:
Una vez instalado el plugin, bastará con seguir las instrucciones pertinentes al plugin (cada uno tiene una serie de opciones diferentes) que girarán en torno a algo así:
[<br />iframe src="https://www.example.com/"<br />name="SubHtml" width="400" height="500"<br />frameborder="1" scrolling="auto"]<br />Texto alternativo para navegadores<br />que no aceptan iframes.<br />[/iframe]
Tanto en uno como en otro caso, el url necesario se obtien directamente de Tableau Public:
embed
HTML:
<div id="viz1549747309453" class="tableauPlaceholder" style="position: relative;">
<noscript><a href='https://archived.dsmdaviz.com/2019/01/marginal-tax-rate-simulator/'>
<img alt=' ' src='https://public.tableau.com/static/images/Ma/MarginalTaxRateSimulator/MarginalRate/1_rss.png' style='border: none' /></a></noscript>
<object class="tableauViz" style="display: none;" width="300" height="150">
<param name="host_url" value="https%3A%2F%2Fpublic.tableau.com%2F" />
<param name="embed_code_version" value="3" />
<param name="path" value="views/MarginalTaxRateSimulator/MarginalRate?:embed=y&:display_count=y" />
<param name="toolbar" value="yes" />
<param name="static_image" value="https://public.tableau.com/static/images/Ma/MarginalTaxRateSimulator/MarginalRate/1.png" />
<param name="animate_transition" value="yes" />
<param name="display_static_image" value="yes" />
<param name="display_spinner" value="yes" />
<param name="display_overlay" value="yes" />
<param name="display_count" value="yes" />
</object>
</div>
Javascript:
<script type='text/javascript'>
var divElement = document.getElementById('viz1549747309453');
var vizElement = divElement.getElementsByTagName('object')[0];
if ( divElement.offsetWidth > 800 ) { vizElement.style.width='375px';vizElement.style.height='694px';}
else
if ( divElement.offsetWidth > 500 ) { vizElement.style.width='375px';vizElement.style.height='694px';}
else { vizElement.style.width='100%';vizElement.style.height='694px';}
var scriptElement = document.createElement('script');
scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';
vizElement.parentNode.insertBefore(scriptElement, vizElement);
</script>
Un ejemplo: incluyendo una visualización en WordPress paso a paso.
Voy a seguir usando de ejemplo la visualización anterior (mi calculadora de “Marginal Tax Rates”) que está disponible en Tableau Public. Decantarnos por usar un iframe en código nativo, con algún plugin o el código para incrustar en la página web proporcionado directamente por Tableau puede ser una cuestión de preferencias, comodidad o requerimientos. En algunos casos, por ejemplo, puede que el administrador no te permita usar <iframes>, pero que sí haya habilitado algún plugin que gestione el proceso.
iframe
- Crea un nuevo post/página en WordPress.
- Obtén la url de la visualizació de Tableau Public.
- Modifica el código para incrustar la imagen como iframe con esta URL.
<iframe src="https://public.tableau.com/shared/MJ7BTTN3K?:display_count=yes" name="SubHtml" width="400" height="700" frameborder="1" scrolling="auto"> Calculadora de "Marginal Tax Rate" o por qué no te afecta el incremento al 70% propuesto por @AOC. </iframe>
- Copia ese código en un elemento web del nuevo blog (o la opción “edit as HTML” de un bloque de texto en el nuevo editor).
- Modifica los parámetros hasta que se adecuen a la visualización.
- Comprueba que hay algún plugin para iframes ya instalado y, si no, instálalo.
- Crea un nuevo post/página en WordPress.
- Obtén la url de la visualización de Tableau Public.
- Sigue las instrucciones del plugin. Normalmente, alguna variación de rodear la url por “iframe” en corchetes.
iframe] https://public.tableau.com/shared/MJ7BTTN3K?:display_count=yes[/iframe
- Modifica los parámetros hasta que se adecuen a la visualización.
embed
- Crea un nuevo post/página en WordPress.
- Obtén el código para incrustar la visualización de Tableau Public.
- Copia el código en un elemento HTML.
- Modifica los parámetros hasta que se adecuen a la visualización.
Gracias por llegar hasta aquí. En el próximo post comenzaré a desgranar algunos de los posibles usos de la API. Despacito.
Deja aquí cualquier comentario o contacta a través de alguna de las redes sociales.
Buenas tardes. Se puede parametrizar el user y password para el logueo directo?
Hola Matías:
Si te refieres a incluir un dashboard en un iframe o similar, y que eso no requiera autenticarse con el servidor, igual esto te puede ser de ayuda: https://kb.tableau.com/articles/howto/embedding-tableau-server-dashboards-into-a-website-without-prompting-for-credentials
Otra opción es tener la licencia para “embedded analytics” (https://www.tableau.com/pricing/embedded) pero eso creo que es para unos usos muy particulares.