Selecting Marks

Important changes for the Tableau JavaScript API

As of February 2024, the Tableau JavaScript API is deprecated. Use the Embedding API v3 instead for embedding interactive views into web pages and applications. For guidance on embedding Tableau views, see the Tableau Embedding API v3 Help(Link opens in a new window).

Selecting marks is almost identical to filtering. For filtering,you use one of the Worksheet.applyFilterAsync() methods. For selecting marks, you use Worksheet.selectMarksAsync(). The parameters for mark selection are almost identical to those used for filtering.

worksheet.selectMarksAsync("Product", "Caffe Latte",
   tableau.SelectionUpdateType.REPLACE);

Here are samples of other types of selecting you can use:

var worksheet;

viz.getWorkbook().activateSheetAsync("Sheet 4").then(function (sheet) {
  worksheet = sheet;
})
// Single dimensions work just like filtering
// Single dimension - single value
.then(function () {
  return worksheet.selectMarksAsync("Product", "Mint",
    tableau.SelectionUpdateType.REPLACE);
})
// Single dimension - Multiple values
.then(function () {
  return worksheet.selectMarksAsync(
    "Product", ["Chamomile", "Mint"],
    tableau.SelectionUpdateType.REPLACE);
})
// Single dimension - Multiple values (delta)
.then(function () {
  return worksheet.selectMarksAsync("Product", ["Lemon", "Earl Grey"],
    tableau.SelectionUpdateType.ADD);
})
.then(function () {
  return worksheet.selectMarksAsync(
    "Product", ["Chamomile", "Earl Grey"],
    tableau.SelectionUpdateType.REMOVE);
})
// Quantitative selection
.then(function () {
  return worksheet.selectMarksAsync({
    "State": ["Florida", "Missouri"],
    "SUM(Sales)": { min: 3000, max: 4000 }
}, tableau.SelectionUpdateType.REPLACE);
})
// Hierarchical dimensions
.then(function () {
  return worksheet.selectMarksAsync(
    "[Product].[Product Categories].[Category]",
    "Bikes",
    tableau.SelectionUpdateType.REPLACE);
}, function (err) { /* ignore errors */ })
// Multiple dimensions - multiple values
// ((State = Washington OR Oregon) AND Product = Lemon)
// OR
// (State = Oregon AND Product = Chamomile)
.then(function () {
  return worksheet.selectMarksAsync({
    "State": ["Washington", "Oregon"],
    "Product": "Lemon"
}, tableau.SelectionUpdateType.REPLACE);
})
.then(function () {
  return worksheet.selectMarksAsync({
    "State": "Oregon",
    "Product": "Chamomile"
}, tableau.SelectionUpdateType.ADD);
})
// Round-tripping selection
.then(function () {
  return worksheet.selectMarksAsync(
    "Product",
    "Lemon",
tableau.SelectionUpdateType.REPLACE);
})
.then(function () {
  return worksheet.getSelectedMarksAsync();
}).then(function (marks) {
  // filter out only the Washington and Oregon marks
  var onlyWashingtonAndOregon = [];
  for (var i = 0, len = marks.length; i < len; i++) {
    var m = marks[i];
    var pair = m.getPairs().get("State");
    if (pair &&
      (pair.value === "Washington" || pair.value === "Oregon")) {
      onlyWashingtonAndOregon.push(m);
    }
  }
  return worksheet.selectMarksAsync(
    onlyWashingtonAndOregon,
    tableau.SelectionUpdateType.REPLACE);
})
.otherwise(function (err) {
  console.log(err);
});

Thanks for your feedback!Your feedback has been successfully submitted. Thank you!