Customized PPT Creation In Tableau Dashboard
“We need a feature which enables us to download our tableau dashboards as PowerPoint slides”.
“These PowerPoint slides should be highly customized which contain proper headings, dynamic commentary text based on a chart’s data and also individual charts placed in different slides for a deeper understanding of our insights”.
“The PowerPoint file should also contain an appendix slide which shows all the filter selections/inputs made by a user to generate insights”.
In order to satisfy these requirements, we devised a functionality which enables users to download tableau dashboards as PPT file. As the name suggests, these PPT slides are highly customized depending on the project’s requirement.
Most BI tools including Tableau have a feature that enables users to download a PPT version of their dashboards. However, this feature has some limitations:
1. Each slide present in a dashboard is exported as a single image in PowerPoint so it is not possible to export individual charts into separate images for a better understanding of the insights that we are trying to present.
2. There is no provision in BI tools to add slide headings in the PowerPoint version of a dashboard.
3. In addition to this, it is also not possible to add any kind of dynamic commentary text which derives insights from the visualizations present.
Our solution looks to overcome all these significant limitations and enables users to export highly customized PowerPoint versions of dashboards.
THE TECHNOLOGY BEHIND IT:
With the Tableau Server REST API functionality, we can fetch the high-resolution image of a specified view/slide of a tableau dashboard in real-time. In addition to this, we can also pass filter values in the URL which enables us to download an image for a specific set of filters.
For example, let us assume a dashboard is published on a tableau server (Server URL: https://tableau-server.com) under a site named Client-A. Dashboard’s name is Insights Dashboard and it contains slides named Demographics, Delivery, etc. Dashboard’s URL will look something like:
https://tableau-server.com/#/site/Client-A/views/InsightsDashboard/Demographics
To fetch an image of this slide, we can use Tableau’s REST API in the following way:
Over here:
1. <api_version>: This is the version of Tableau’s REST API that you want to use. For our example, we are using a 3.2 version.
2. <site_id>: The ID of the site that contains the view.
3. <view_id>: The ID of the view (or a slide under a dashboard) to return an image for.
4. <resolution_type>: If it is left blank, it returns the default resolution where the width is 784 pixels. If it is kept as high, it returns the high-resolution width of 1568 pixels.
For our example, let us assume that <site_id> value is a5a1ea15-bc9f-4e5b-b82d-38490aee22ad and <view_id> value is df950e74–1427–47b1–9ada-c237e43d904f. The GET request to fetch this view’s image will look something like:
In addition to this, if the dashboard contains some filters then they can be used in this GET request to fetch the image for a combination of filter values. For example, let us assume the dashboard contains filters like Advertiser & Year. If we want to fetch the image for Advertiser value 12345 and Year value 2019, then the GET request will look something like:
The following image is one example of an image returned using Tableau’s REST API:
Now once the process to fetch dashboard views’ images is finalized, the next step is to use these images and export them to a PowerPoint file. For this, we are using an open-source JavaScript PowerPoint generator named PptxGenJS. This service lets us create PowerPoint files using JavaScript commands. GitHub Repository URL is: https://github.com/gitbrent/PptxGenJS
Once the PptxGenJS library is download, this is how we can use it in our code:
<html>
<head>
<script type=”text/javascript” src=”PptxGenJS/libs/jquery.min.js”></script>
<script type=”text/javascript” src=”PptxGenJS/libs/jszip.min.js”></script>
<script type=”text/javascript” src=”PptxGenJS/dist/pptxgen.js”></script>
After this piece of code, we can consume this service to create our PowerPoint file. This is how a sample code looks:
//This is creating a new PptxGenJS variable named pptx.
var pptx = new PptxGenJS();
//Now we are using pptx variable to call the addNewSlide() function to add a slide in our PowerPoint file. In our example, we are adding 3 slides.
var slide1 = pptx.addNewSlide();
var slide2 = pptx.addNewSlide();
var slide3 = pptx.addNewSlide();
Now once the slides are created, we can start adding slide headings and use the above-created image in our PPT service. This is how it looks:
//Over here we are using the addText() function to add a text in slide1. We can decide the position and size of the text (using x, y, w, h values) and text-color, font-size, font-type, etc.
slide1.addText(‘What age was your audience?’, {x:0.3, y:0.3, w:9.5, h:0.6, font_size:20, font_face: ‘Arial’, color:’000000', bold:true });
//Over here we are using the addImage() function to crop the base64 encoded data of the image mentioned above.
//In our tableau dashboard, we know the overall height and width of the slide and in addition to this, we know x, y, w, h values of all the individual charts, image objects, etc. present.
//Using these values, we can precisely crop parts of the above-mentioned image according to our requirement.
//The following 3 lines are cropping some part of the above-mentioned image using specific values of x, y, w, h of individual elements and placing them in the slide.
slide1.addImage({data: ‘image/png;base64,’+demographics_slide_data, x:0.2952756, y:2.035433, w:10.0, h:7.0, sizing: {type: ‘crop’, x:10.0*(8/1120), y:7.0*(167/800), w:10.0*(132/1120), h:7.0*(60/800)}});
slide1.addImage({data: ‘image/png;base64,’+demographics_slide_data, x:1.543307, y:0.944882, w:10.8, h:7.0, sizing: {type: ‘crop’, x:10.8*(144/1120), y:7.0*(44/800), w:10.8*(772/1120), h:7.0*(261/800)}});
slide1.addImage({data: ‘image/png;base64,’+demographics_slide_data, x:7.996063, y:4.9645669, w:10.0, h:5.6, sizing: {type: ‘crop’, x:10*(893/1120), y:5.6*(704/800), w:10.0*(223/1120), h:5.6*(92/800)}});
Keeping the above-mentioned image in mind, this is how the PPT slide will look:
The 3 elements selected in the above-mentioned screenshot of PPT files are cropped-out from the original image of the dashboard view.
In addition to this, we can put dynamic commentary text in PPT slide. To achieve this, we need to establish a connection with the data source that is being used to populate the charts in our example. Once the connection is established, we can write SQL queries to fetch the data being displayed and then use the resultant values in our PPT service for dynamic commentary text.
In our example, we want to display a text below the chart’s image which contains data about the best performing data-point (for example the best performing age-group for the above-mentioned screenshot). To achieve this, we need to write the required SQL query (which connects to the data source in question) and fetches this data. After getting these values, we can use them in our PPT service code in the following way:
//Over here we are using the variables age_segment_name & age_segment_value to create a dynamic commentary text which will work perfectly in sync with the chart being populated since we are using the same data source to fetch this data.
//One more thing to observe over here is that we are formatting the below-mentioned text in a very customized way to make it look more prominent in the PPT slide.
slide1.addText(
[
{ text:’Users aged ‘, options:{ bold:false} },
{ text:age_segment_name, options:{ bold:true } },
{ text:’ were ‘, options:{ bold:false} },
{ text:age_segment_value + ‘%’, options:{ bold:true } },
{ text:’ more likely to ‘, options:{ bold:false} },
{ text:metric_type1, options:{ bold:true } }
],
{x:0.2992126, y:2.811024, w:9.44882, h:2.153543, font_size:20, font_face: ‘Century Gothic’, color:’000000', valign:’bottom’}
);
This is how the PPT slide now looks with this dynamic commentary text:
Notice the selected element in the above mentioned screenshot. This is the dynamic commentary text which is placed using the PPT service. This text will automatically change depending on the data shown in the chart.
Similarly, there are few more examples of such slides:
This is how we can create a highly customized and automated PPT service for our tableau dashboards. According to the project in question, we can use a lot of features of PptxGenJS in sync with Tableau’s REST API and create automated PowerPoint slides.
HOW IS IT HELPING CLIENTS?
This offering offers our clients and internal users the ability to effortlessly download highly customized & visually appealing PowerPoint slides (according to their needs) without having to manually write chart headings, cropping chart images and adding commentary texts in their PPT files. This also highlights the next step in MiQ’s quest to create robust and adaptable solutions that can be used across multiple use cases in an effortless manner.
