Tutorial de Tableau Javascript API para torpes. Volumen 1. Cuándo no es necesaria.

Enlgish version here.

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?

Si la interacción no necesita estar incrustada en un objeto web, el consumo habitual es a través del servidor de Tableau. Si se requiere que la visualización esté en un objeto web, hay dos métodos principales:
  1. Iframe.
  2. Código para incrustar la imagen (web embed).
¿En qué consiste cada uno / cuándo usarlos?

iframe

Un iframe es, simplificando, una página web dentro de otra página web. Se puede usar en puro HTML:

<iframe src="https://www.example.com/" name="SubHtml" width="400" height="500" frameborder="1" scrolling="auto">
Texto alternativo para navegadores
que no aceptan iframes.&nbsp;

</iframe>
y, en el caso de WordPress y otros, se puede usar un plug in que permita convertir una url en un iframe:
Listado de plugins disponibles para incrustar iframes en WordPress
Listado de plugins disponibles para incrustar iframes en WordPress

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:

Obtaining the URL for the iFrame
Example of how to get the URL for the iFrame

embed

Usando el código nativo (HTML + Javascript)  proporcionado directamente por Tableau (Public/Server)

HTML:

<div id="viz1549747309453" class="tableauPlaceholder" style="position: relative;">
<noscript><a href='https://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&amp;: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>
Parece complicado, pero lo único que hay que hacer es copiar el código generado por Tableau:
Basta copiar este código generado por Tableau para incluir la visualización en tu página/blog.

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

  1. Crea un nuevo post/página en WordPress.
  2. Obtén la url de la visualizació de Tableau Public.
  3. 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>
  1. 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).
  2. Modifica los parámetros hasta que se adecuen a la visualización.
Vídeo con los pasos:
  1. Comprueba que hay algún plugin para iframes ya instalado y, si no, instálalo.
  2. Crea un nuevo post/página en WordPress.
  3. Obtén la url de la visualización de Tableau Public.
  4. 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
  1. Modifica los parámetros hasta que se adecuen a la visualización.
Vídeo con los pasos:

embed

Usando el código nativo (HTML + Javascript)  proporcionado directamente por Tableau (Public/Server)
  1. Crea un nuevo post/página en WordPress.
  2. Obtén el código para incrustar la visualización de Tableau Public.
  3. Copia el código en un elemento HTML.
  4. Modifica los parámetros hasta que se adecuen a la visualización.
Vídeo con los pasos:

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.

Leave a Reply

Your email address will not be published.