I am trying with Javascript API in Tableau. I was passing values from HTML to Tableau using applyFilterSync('Col Name','value','REPLACE'). It was filtering the dashboard based on the filter value successfully.

Now I have a pass the array of values to add new lines to the existing charts. In the existing charts(capture 1 image) I have 2 lines one for Actual value and other for Projected value.

I would like to add one or more lines to chart based on the user selection in HTML. In HTML, I have region Checkbox (Central,South,East,West).

In HTML(Capture 2 image) if I select region checkbox Central,South, i want to get 2 more lines to the existing charts like the image (Capture 3).

So in javascript ,I used the below code

Code in Javascript:

function Addlines()

{

var check = document.getElementsByName("Rgn");

var textArray = [];

for(var c = 0; c < check.length;c++)

{

if(check[c].checked){

textArray .push(check[c].value);

}

}

alert(textArray); // this textArray gives the list of region selected in the HTML checkbox

var filterName = 'ColumnName'; //This ColumnName will be 'Region'

sheet = viz.getWorkbook().getActiveSheet();

if(sheet.getSheetType() === 'worksheet') {

sheet.applyFilterAsync(filterName, textArray , 'ADD'); // For testing, I even hardcoded textArray with 'Central'

} else {

worksheetArray = sheet.getWorksheets();

for(var i = 0; i < worksheetArray.length; i++) {

worksheetArray[i].applyFilterAsync(filterName,textArray , 'ADD');

}

}

}

The above code is not adding the new line for region(ie applyFilterSync 'ADD'), instead it is doing the same function as 'REPLACE' filtering the Actual value for Region(Central/South/East/West).