Friday, May 15, 2020

Tableau - How to Embed Tableau Viz into React?

Tableau has placed itself on a leading position in business intelligence area. React has taken the center stage as a user interface development library for single page applications. Here I will give a quick demo of how to embed a Tableau viz into React. With how to create a React project, it is not included in this blog.

1. Import Tableau js


In this demo, I put Tableau js import statement in head tag in Index.html.

    <head>
        <script type="text/javascript" src="http://public.tableau.com/javascripts/api/tableau-2.min.js">
        </script>
    </head>

2. Create Viz Object


In this example, I create a js file by the name of tableauviz.js. TableauViz class is defined in this file and exported as well. Below are the contents of the file.
   
    import React, { Component } from 'react';

    class TableauViz extends Component{

        componentDidMount(){

            //
            //-- Specify the div container for the viz.
            var containerDiv = document.getElementById("vizContainer"),

            //
            //-- Specify the URL of the viz.
            url = "http://public.tableau.com/views/AQuickGuideToReferencesForTableau/Main",

            //
            //-- Specify a set of options for the viz
            options = {
                hideTabs: false,
                hideToolbar: false,
                onFirstInteractive: function () {
                    //
                    //-- Define a callback function called when the viz object finishes instantiating.
               }
            };

            //
            //-- Create a viz object.
            this.vizContainer = new window.tableau.Viz(this.refs.vizContainer, url, options);

        }

        render(){
            return (
                <div id="vizContainer" />
            );
        }
    }

    export default TableauViz;

3. Use TableauViz in Other Component


To use TableauViz defined as above, you simply import and use it  as a normal component. Below is an example.

//-- TableauComponent.jsx --

    import TableauViz from "./js/tableauviz.js";

    class TableauComponent extends Component {
        render() {
            return (
                <div id="tableauPage">
                    <h2 className="text-center">Tableau Demo</h2>
                    <br />
                    <hr />

                    <TableauViz />

                </div>
            );
        }
    }

No comments:

Post a Comment

React - Makeover in React: W3Schools How To

When it comes to building a React app, I get used to searching for a UI library to build the front pages, a straightforward way to achieve f...