5 Replies Latest reply on Jan 17, 2019 9:13 AM by Helen McLennan

    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

                • 5. Re: Embedding a dashboard in Joomla
                  Helen McLennan

                  Though this may be a bit late to be of use to Olivia, you need to go to your user profile in Joomla and set your editor to "none".

                  Go back and paste the code directly from ryansleeper.com into your page and save.

                  Don't forget to modify the code to show your own information.

                   

                  You can turn the editor back on for other pages, but do not save this page again while the editor is turned on or it will change your code on saving.

                  I hope this helps.