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