简体   繁体   English

通过javascript API保存和还原Tableau图形的当前视图状态

[英]Saving and restoring current view state of a Tableau graph through javascript API

The problem: 问题:

How can I store - and then later retrieve - the custom state of a Tableau view through the javascript-API? 我如何通过javascript-API存储(然后再检索)Tableau视图的自定义状态?

Description: 描述:

I am working on a site where we currently allow any user to collaborate a set of Tableau views into a PowerPoint-like online presentation for later use. 我正在一个网站上工作,目前我们允许任何用户将一组Tableau视图协作成一个类似PowerPoint的在线演示文稿,以供以后使用。 In our current implementation, the state of the Tableau graphs are not stored, and the user therefore has to apply his or hers desired filter, select worksheets etc. while holding the presentation - every time. 在我们当前的实现中,Tableau图形的状态未存储,因此用户每次保持演示文稿时都必须应用其所需的过滤器,选择工作表等。 This is what we now would like to avoid. 这就是我们现在要避免的。

The easiest solution for this would be to store and retrieve one of the "Share"-links accessed through the bottom bar interface; 最简单的解决方案是存储和检索通过底部工具栏接口访问的“共享”链接之一。 these links contains the state of the current view, but so far, we have not been able to do this: firstly, due to domain issues, we cannot simply fetch the Share-links from the embed-code iframe; 这些链接包含当前视图的状态,但是到目前为止,我们还无法做到这一点:首先,由于域问题,我们不能简单地从嵌入代码iframe中获取“共享”链接; and secondly, the API-method workbook.getUrl() does not seem to include the state of the current view. 其次,API方法workbook.getUrl()似乎不包括当前视图的状态。

I am currenty looking into the workbook.rememberCustomViewAsync(name) and workbook.showCustomViewAsync(name) methods, which seem like a possible solution. 我目前正在研究workbook.rememberCustomViewAsync(name)workbook.showCustomViewAsync(name)方法,这似乎是一种可能的解决方案。 However, I cannot seem to get any sensible results from either of these two methods, as they both end up giving obscure, non-informative 500 errors when run. 但是,我似乎无法从这两种方法中的任何一种获得任何明智的结果,因为它们在运行时最终都会给出模糊的,非信息性的500错误。

An example file, and the errors: 一个示例文件,以及错误:

To better illustrate this issue, I have created a minimal demo (snippet below) that attempts to use the second method described above. 为了更好地说明这个问题,我创建了一个最小的演示 (下面的代码段),尝试使用上述第二种方法。 When opened in Google Chrome, neither of the two buttons ('save state' and 'retrieve state') work for me, and the following errors can be seen in the Developer Tools (the http response message and developer console output, respectively): 在Google Chrome浏览器中打开后,这两个按钮(“保存状态”和“获取状态”)都不适合我,并且在开发人员工具中可以看到以下错误(分别为http响应消息和开发者控制台输出):

Http response: Http响应:

<br>
2015-11-11 16&#x3a;14&#x3a;17.916
&#x28;VkNpWQrCQaIAACQo2YYAAAPi,0,0&#x29;

Console error: 控制台错误:

POST http://public.tableau.com/vizql/w/Book6_426/v/YRKE/save_customized_view/sessions/208A699D34E14708A2268AA10A827C99-0:0 500 (Internal Server Error)

Does anyone know how I can solve this issue, either by making the provided code example work (the second method described), or through any other means? 有谁知道我可以通过使提供的代码示例正常工作(所述的第二种方法)或通过任何其他方式来解决此问题? Any help would be appreciated! 任何帮助,将不胜感激!

PS: The snippet simulator here will cause a Access-Control-Allow-Origin error. PS:此处的代码段模拟器将导致Access-Control-Allow-Origin错误。 The file has also been published here . 该文件也已在此处发布。

 <html> <head> <title>A simple Tableau API demo</title> <!--script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!--script type="text/javascript" src="https://online.tableau.com/javascripts/api/tableau_v8.js"></script--> <script type="text/javascript" src="https://online.tableau.com/javascripts/api/tableau-2.min.js "></script> </head> <body> <H2>Custom view storage demo</H2> <button id="remember-button"> Remember state 'test' </button> <button id="retrieve-button"> Retrieve state 'test' </button> <div id="viz-placeholder" style="width: 1000px; height: 1000px; display: block;"></div> <script> // Render tableau graph function initializeViz() { var placeholderDiv = document.getElementById("viz-placeholder"); var url = "https://public.tableau.com/views/Book6_426/YRKE"; var options = { width: placeholderDiv.offsetWidth, height: placeholderDiv.offsetHeight, hideTabs: true, hideToolbar: true, onFirstInteractive: function() { workbook = viz.getWorkbook(); activeSheet = workbook.getActiveSheet(); } }; viz = new tableau.Viz(placeholderDiv, url, options); } $(initializeViz) // Assign and set up button actions for storing and retrieving the custom view var customViewName = "test"; $('#remember-button').click(function() { console.log("Remembering: ", customViewName); // Try to save state, or print error viz.getWorkbook().rememberCustomViewAsync(customViewName).otherwise(function(err) { console.log("An error occured:"); console.log(err); }); }); $('#retrieve-button').click(function() { console.log("Retrieving: ", customViewName); // Try to retrieve state, or print error viz.getWorkbook().showCustomViewAsync(customViewName).otherwise(function(err) { console.log("An error occured:"); console.log(err); }); }); </script> </body> </html> 

Okey, so I have been in contact with Tableau Customer Support, and they seem to have found the issue. Okey,所以我已经与Tableau客户支持联系,他们似乎已经找到了问题。

Apparently, certain elements of the javascript-API is only available for Tableau Online and Tableau Server - not Tableau Public. 显然, javascript-API的某些元素仅适用于Tableau Online和Tableau Server- 不适用于 Tableau Public。

In other words, the function workbook.rememberCustomViewAsync('customViewName') is not supported for graphs hosted by Tableau Public - such as the one used in the example above ( https://public.tableau.com/views/... ). 换句话说,Tableau Public托管的图不支持功能workbook.rememberCustomViewAsync('customViewName') -例如上面示例中使用的图( https://public.tableau.com/views/... ) 。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM