如何響應嵌入式Tableau javascript api中的滑塊？

Question

我對Tableau和Javascript很感興趣，但是，我的任務是在網頁中創建滑動條以將值輸入到Tableau報告中，報告應該做出反應並實時顯示在同一頁面中。

到目前為止，我已經在頁面上創建了滑塊，我編寫了以下代碼來與Tableau報告進行通信。

// 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();
}

但是，上面的代碼卡在函數updateTableauParameter() ，我已經標記了代碼失敗的確切位置。 因此， viz.refreshDataAsync()從未執行過，報告根本沒有反應。

你能幫幫我嗎？ 任何想法都表示贊賞。 非常感謝。

Answer 1

不使用javascript提供參數解決問題的一種方法是

1. 在tableau中創建一個參數，它將幫助您獲取參數值

2. 在數據源中使用它。 我希望你有一個像SQL或postgre這樣的數據源。 如果是，您可以在where條件中傳遞參數值，如下面的屏幕截圖所示

設置完這兩件事后，您可以使用slidert tableau URL參數開始輸入值。

更改滑塊后，為滑塊創建onchange事件，並使用url參數將滑塊值傳遞給tableau報告，如下所示。

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

這將基於滑塊值加載可視化。