如何响应嵌入式Tableau javascript api中的滑块？

Question

I am fresh to Tableau and Javascript, however, I've been tasked to create slide bars in a webpage to input values to a Tableau report and the report should react and be displayed in the same page in realtime.

So far, I've got the sliders created on the page, I've written following code to communicate with the Tableau report.

// Global variables

var metrics = [
    {
        id:"Metric1",
        label:"5-25 ratio",
        isShortTermDefault:true,
        isLongTermDefault:false,
        tableauParamName: "P_5-25 ratio"
    },
    {
        id:"Metric2",
        label:"Existing ratio",
        isShortTermDefault:false,
        isLongTermDefault:false,
        tableauParamName: "P_Existing ratio
    },
    // Many other metrics that each of them correspond to one slider
];

var viz1;
var url1 = "https://...somelink.../FINAL_Results";
var vTableauPlaceholderId1 = "tableauViz_1";
var workbook, activeSheet, workbook1;

function init()
{
    //......

    // I've added a listener function here, so once the slider is changed, the new metric value will be sent to the report
    child1.addEventListener("change",
            function(metricId, viz, param_name){
                return function(){
                    updateTableauParameter(viz, param_name, this.value, workbook1);
                }
            }(metrics[i].id, viz1, metrics[i].tableauParamName));

    //......

    viz1 = initializeStaticViz( vTableauPlaceholderId1, url1);
    viz1 = dynamics1[0];
    workbook1 = dynamics1[1];

    //......
}


// Below is the function I used to initialize viz
function initializeViz(tableauViz_placeholderId, url) {
    var placeholderDiv = document.getElementById(tableauViz_placeholderId);

    var options = {
        width:placeholderDiv.style.width,
        height:placeholderDiv.style.height,
        hideTabs: true,
        hideToolbar: true,
        onFirstInteractive: function () {
            workbook = viz.getWorkbook();
            activeSheet = workbook.getActiveSheet();
            updateTableauParameter(viz, param_name, value);
        }
    };
    viz = new tableau.Viz(placeholderDiv, url, options);

    return [viz, workbook, activeSheet];
}

function updateTableauParameter(viz, param_name, value, vizWorkbook){
    workbook = viz.getWorkbook();
    vizWorkbook.changeParameterValueAsync(param_name, value);   // <<------- This line is not executed

//    viz.getWorkbook().changeParameterValueAsync(param_name, value).then(
//        function (){ console.log('Parameter set');}
//    );

    viz.refreshDataAsync();
}

However, the code above was stuck at function updateTableauParameter() , I've marked the exact location where the code was failed. Therefore, the viz.refreshDataAsync() was never executed and the report didn't react at all.

Could you please help me out? Any idea is appreciated. Many thanks.

Answer 1

One way to solve your issue without using javascript to provide parameter is

1. Create a parameter in tableau which will help you to get the parameter value

2. use it in the data source. I hope you will be having a datasource specified something like SQL or postgre. If Yes, you can pass your parameter value in the where condition something like in the below screenshot

Once you have setup this two things you can start to input values using the slider through tableau URL parameter.

Once the slider is changed, create a onchange event for the slider and pass the slider value to the tableau report using url parameter something like the below.

http://<your server address>/views/<workbookname>/<viewname>?@studentid=<slider selected value>&:embed=y&:tabs=yes&:toolbar=yes&:display_count=no&:refresh=yes&:customViews=no

This will load the visualization based on the slider value.