4 Replies Latest reply on Aug 16, 2018 1:55 PM by Olivia Reggins

    Embedding a dashboard in Joomla

    Olivia Reggins

      I am having difficulty embedding a Tableau dashboard in our joomla website.

       

      I followed the suggestions in this post from 2014: Tableau report embedding into joomla but it still isn't working for me. I put the embed code into the HTML source view of the editor, and this reads as a dotted line in the main editor view, and nothing at all on the website.

       

      Suggestions?

        • 1. Re: Embedding a dashboard in Joomla
          Naveen B

          Hi Olivia,

           

          Check this below link

           

          Adding Javascript code to Custom HTML modules in Joomla – Ecwid Help Center

           

          It seems it will help

           

          If it helps kindly mark this answer as correct/helpful so that it will help others if it didn't what is the error you are getting or screenshot would help

           

          BR,

          NB

          • 2. Re: Embedding a dashboard in Joomla
            Ken Flerlage

            I don't know anything about Joomla, but the following blog has been a great resource for embedding in other sites. It may be of some help: https://www.ryansleeper.com/how-to-embed-tableau-public-visualizations-without-borders-scroll-bars-or-spacing-issues/

             

            Any possibility of you sharing a screenshot of the result as well as the embed code?

            • 3. Re: Embedding a dashboard in Joomla
              Olivia Reggins

              Yes, this article was referenced in the 2014 post. I've followed all three steps outlined in the article, but a simple copy & paste of the embed code still doesn't work for me.

              • 4. Re: Embedding a dashboard in Joomla
                Olivia Reggins

                The suggestion from ryansleeper.com is useful. But this creates a link to the public page on tableau.com. My problem with this solution is the tableau dashboard we want to embed on our website actually belongs to another organization....so I don't want to create a link that obviously goes to someone else's tableau profile. I just want the dashboard!

                 

                I've copied the embed code from the share option at the bottom right of the tableau page...but Joomla doesn't recognize it.

                 

                In fact, it looks like after I save the article with the embed code provide by Tableau, Joomla re-writes the code. ?? I don't understand why this happens.

                 

                I only have a basic understanding of html and Joomla, and I'm at a loss trying to figure out why Joomla doesn't recognize this code.

                 

                Original code from Tableau:

                <div class='tableauPlaceholder' id='viz1534451945130' style='position: relative'><noscript><a href='#'><img alt=' ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;OH&#47;OHArtsEdDataProject2_6&#47;Welcome&#47;1_rss.png' style='border: none' /></a></noscript><object class='tableauViz'  style='display:none;'><param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' /> <param name='embed_code_version' value='3' /> <param name='site_root' value='' /><param name='name' value='OHArtsEdDataProject2_6&#47;Welcome' /><param name='tabs' value='yes' /><param name='toolbar' value='yes' /><param name='static_image' value='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;OH&#47;OHArtsEdDataProject2_6&#47;Welcome&#47;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>                <script type='text/javascript'>                    var divElement = document.getElementById('viz1534451945130');                    var vizElement = divElement.getElementsByTagName('object')[0];                    vizElement.style.width='1100px';vizElement.style.height='1450px';                    var scriptElement = document.createElement('script');                    scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                    vizElement.parentNode.insertBefore(scriptElement, vizElement);                </script>

                 

                 

                After saving article in Joomla the code appears a bit differently:

                <div id="viz1534451945130" class="tableauPlaceholder" style="position: relative;"><noscript>&lt;a href='#'&gt;&lt;img alt=' ' src='https:&amp;#47;&amp;#47;public.tableau.com&amp;#47;static&amp;#47;images&amp;#47;OH&amp;#47;OHArtsEdDataProject2_6&amp;#47;Welcome&amp;#47;1_rss.png' style='border: none' /&gt;&lt;/a&gt;</noscript></div>

                <script type="text/javascript">// <![CDATA[

                                    var divElement = document.getElementById('viz1534451945130');                    var vizElement = divElement.getElementsByTagName('object')[0];                    vizElement.style.width='1100px';vizElement.style.height='1450px';                    var scriptElement = document.createElement('script');                    scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                    vizElement.parentNode.insertBefore(scriptElement, vizElement);               

                // ]]></script>

                 

                 

                If it helps...(lol)...this is what it looks like in the editor:

                 

                joomla screenshot.jpg