Tableau JavaScript API

Using the Tableau JavaScript API to download the visualization in various formats to be used both internally and externally within an organization to understand key trends and shifts to immediately impact, change, or create ad-hoc marketing campaigns and/or adjust future campaigns depending on market share shifts for specific product categories. The below API will be extremely useful for product managers and product directors to quickly understand market and competitor shifts/trends for their own products, and then rapidly create a marketing campaign and/or change the product development calendar for future product releases if a competitor has increased their market share.

You can export the various visualizations in different formats as a PDF file, image file, CSV file, Excel file, or as a PowerPoint file. Additionally, the capability to open the Download dialog box to let the user choose is an option as well.

A non-obvious insight that I would be able to extract from my data would be which specific competitor SKUs/models caused our market share in that specific product category to decline rapidly. This insight would quickly alert product marketing and product planning teams in the immediate changes in the marketplace and would be enough cause to perform an immediate marketing campaign, shorten the product launch timeframe for new products, increase the speed to market for new products, and potentially alter pricing and promotional calendars.

The data would live within the Tableau Server that is in corporate headquarters in Nagoya, Japan. Once the data is downloaded from the secondary data vendors website (currently long-term agreement with specific vendor to provide very granular market, industry, and competitor data), the data is then cleaned, formatted, and uploaded into the internal corporate SAP system. In an overnight process that occurs every day, when the new data enters the SAP system, it will appear on Tableau server the next day. Then, all internal corporate employees can see their respective products and how they are underperforming/overperforming in certain markets and can adjust their strategies accordingly. If we did not have this data, we would have NO visibility (Both high level and very granular)

The functions that had to be created are function initViz (), and function exportToPDF. Additionally, an src type (used to specify the URL of the image to be used), and var viz (entry point into the object model is to instantiate a new Viz object, creating a new viz object generates the HTML code necessary to embed a Tableau visualization).

If I were to use my corporate confidential data for this example, I can see the specific market share shifts for the Scanner’s product category, I am able to see those certain competitors (Fujitsu and Epson to name a few) have increased market share in the past several months (My corporation’s market share for scanners has decreased, quite possibly due to the increase from Fujitsu and Epson). I can specifically isolate and understand which Fujitsu and Epson’s models have overperformed against my corporation models, and we can quickly make strategic decisions (ad-hoc marketing campaign, reduce time to market for new products, price change, etc.) internally within the organization.

Many bugs that have occurred is specific permissions given to specific individuals for certain Tableau visualizations. As a large multi-national organization we have a high number of Tableau dashboards and Tableau visualizations. Therefore, specific marketing, sales, and product individuals have various permissions for specific Tableau visualizations that they can see and view. Understanding these permissions is essential for making sure the visualization can be downloaded and viewed using this API. I would like to mention there is a specific Tableau JavaScript API for adding and remove user permissions!

In addition to the bugs, the other element for any visualization in Tableau or any other business intelligence visualization tool, is the cleaning/cleansing process of the data. With the availability of using a variety of tools (Alteryx, Tableau Prep, Knime) a user can completely automate the cleaning process of the raw data. Once a cleaning process is built within the appropriate data pipeline in Alteryx or Tableau Prep, the steps do not need to be repeated, rather a “flow” can be re-ran on a daily, weekly, monthly, or quarterly basis. The raw data that I have used professionally in Tableau dashboards all have macros implemented in each raw data excel file for cleaning purposes, then these macros along with the respective excel file are connected through Alteryx. An Alteryx to Tableau server connection is available to use. It is extremely important to understand the cleansing steps in each file/data sources once the Alteryx flow is finalized. A slight schema revision in one or many files will cause a major issue!

Using the current example in Tableau, we can clearly understand the obesity rates for a specific county, and how eating fruits/vegetables, not exercising, and smoking can correlate to the obesity rate for that county selected. In this specific example on county obesity in the United States, when we compare Bergen County and Salem County (both are counties in the State of New Jersey), we clearly see that one county (Salem County) who has a higher obesity rate, has individuals in that county who are smokers, do not exercise, and eat few fruits/vegetables than those in the other county (Bergen County). Bergen County has a lower obesity rate than Salem County in New Jersey, and it is clear that Bergen County has individuals who exercise more, smoke less, and eat more fruits/vegetables that those in Salem County. The question to ask here, is what is the specific driving force or key variable contributing to the overall issue with obesity? Looking and parsing through these factors, it is visibly clear that not exercising and smoking have a greater effect on obesity than consuming very little fruits/vegetables. Taking a closer look, it appears the key variable to obesity is not getting enough exercise or the lack of exercise. Local and state officials can utilize these insights to specifically focus in on promoting exercising, fitness, and recreational sports participation. Additionally, government officials may alter/enhance fiscal budgets and subsidies to specifically reduce spending on smoke addiction and healthy eating; increase spending/financial support to promote exercise events and exercise activities.

I will also incorporate an API from RapidAPI, specifically a Recipe API. This API returns all recipes that have steak incorporated into the recipe and/or meal which can be cooked and made in under 30 minutes. This would be beneficial to include in nutritional brochures and/or nutritional campaigns to those counties with a high obesity rate. Additionally, various Tableau clustering can be made to specifically illustrate and highlight the recipes with steak that can be made in under 30 minutes with the lowest calorie count. Then individuals will be able to isolate and understand not only which steak recipes can be made quickly, but also those that return the fewest calories. I think the combination of the Tableau API for the visualization, and the RapidAPI for recipes can be blended to showcase the areas of improvement when it comes to obesity, and specific meals that can help to deter future obesity rates to increase.

For the limitations of this API, I would state that understanding the complexity of user permissions can lead to many issues, also if you have many visualizations, it can be confusing to continuously modify code for every specific visualization within the corporation. You must also need to know how the visualization will look in the file specified, whether it is downloaded by PDF or by PowerPoint. Understanding the different file outputs can alter the size of the image and thus making it more difficult to understand the insights from the visualization. As long as the data is available on Tableau server, and the visualizations are already established/maintained, then this can be utilized.

Tableau JavaScript API Code available via the below link:

Export to PDF — Tableau
<!DOCTYPE html>
<html>
<head>
<title>Export</title>
<script type=”text/javascript”
src=”https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>
<script type=”text/javascript”>
var viz;
function initViz() {
var containerDiv = document.getElementById(“vizContainer”),
url = “http://public.tableau.com/views/RegionalSampleWorkbook/Obesity",
options = {
hideTabs: true
};
viz = new tableau.Viz(containerDiv, url, options);
// Create a viz object and embed it in the container div.
}
// Opens the Download to PDF dialog box
function exportToPDF() {
viz.showExportPDFDialog();
}
// Opens the Download Crosstab dialog box
function exportToCSV() {
viz.showExportCrossTabDialog();
}
// Downloads the crosstab data in an Excel file
function exportToExcel() {
viz.exportCrossTabToExcel();
}
// Opens the Download Image dialog box
function exportImage() {
viz.showExportImageDialog();
}
// Opens the Download PowerPoint dialog box
function exportPowerPoint() {
viz.showExportPowerPointDialog();
}
// Opens the Download dialog box
function showDownloadDialog() {
viz.showDownloadDialog();
}
</script>
</head>
<body onload=”initViz();”>
<div id=”vizContainer”></div>
<button onclick=”exportToPDF();”>Export to PDF</button>
<button onclick=”exportToCSV();”>Export to CSV</button>
<button onclick=”exportToExcel();”>Export to Excel</button>
<button onclick=”exportImage();”>Export as Image</button>
<button onclick=”exportPowerPoint();”>Export to PowerPoint</button>
<button onclick=”showDownloadDialog();”>Show Download 
Dialog</button>
</body>
</html>

CODE FOR RECIPE API:

import http.client
conn = http.client.HTTPSConnection(“tasty.p.rapidapi.com”)
headers = {
‘x-rapidapi-host’: “tasty.p.rapidapi.com”,
‘x-rapidapi-key’: “e2f0e02ec9msh977c04f8ff2e2b7p19cca4jsn05a7921ae124”
}
conn.request(“GET”, “/recipes/list?from=0&size=20&tags=under_30_minutes&q=steak”, headers=headers)
res = conn.getresponse()
data = res.read()
print(data.decode(“utf-8”))

Additional Tableau JavaScript API Sample codes:

Samples — Tableau