Tableau with AngularJs

February 3, 2017
No Comments

Tableau API and references

Tableau charts are very helpful to represent simple/complex data in various chart forms. Recently, got a chance to work with Tableau with AngularJs. First, lets see some useful links that helped me to start thinking:
Tableau Javascript API reference – contains the complete classes and their methods/properties – which is very useful in designing advanced level apps.

But, that is not required for all the developers, if we need simple actions, these samples are enough to understand the basics and these concepts will give little bit more idea.

I took this Angular sample to develop the angularJs directive.

Tableau Filter with AngularJs

By combining this directive and the sample there, this is a simple another DEMO.

Tableau Sheet Types

There are three types of sheets we have in Tableau

  • Worksheet
  • Dashboard
  • Story

In the above sample, we can see how to apply filters to Worksheet and Dashboard

Tableau with Story – how to apply filter

If we know how to get the sheet, we can do whatever we want to do with a story sheet. Here is a simple method to get the active sheet, irrespective of its type.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function getActiveSheet() {
    var workbook = viz.getWorkbook();
    var sheet = workbook.getActiveSheet();
    var sheetType = sheet.getSheetType();
    var activeSheet;
    // WORKSHEET, DASHBOARD and STORY
    if (sheetType === tableau.SheetType.WORKSHEET) {
        activeSheet = sheet;
    } else if (sheetType === tableau.SheetType.DASHBOARD) {
        activeSheet = sheet.getWorksheets();
    } else if (sheetType === tableau.SheetType.STORY) {
        var currentSheet = sheet.getActiveStoryPoint().getContainedSheet();
        activeSheet = currentSheet.getWorksheets();
    }
    return activeSheet;
}

Download Tableau chart as image or PDF

To get the image or PDF version, we can add :format=png or :format=pdf in the same url
With the help of download attribute, we can enable the user to download the chart as image or PDF.

Tags: , ,