2015-11-13 12 views
7

Il problema:Salvataggio e ripristino visualizzazione corrente stato di un grafico Tableau tramite JavaScript API

Come posso conservare - e poi recuperare - lo stato personalizzato di una vista Tableau attraverso il javascript-API?

Descrizione:

Sto lavorando su un sito dove attualmente permettono a qualsiasi utente di collaborare una serie di punti di vista Tableau in una presentazione in linea di PowerPoint-like per un uso successivo. Nella nostra attuale implementazione, lo stato dei grafici del Tableau non viene memorizzato e l'utente deve quindi applicare il proprio filtro desiderato, selezionare i fogli di lavoro ecc. Mentre tiene la presentazione - ogni volta. Questo è ciò che ora vorremmo evitare.

La soluzione più semplice per questo sarebbe archiviare e recuperare uno dei collegamenti "Condividi" accessibili tramite l'interfaccia della barra inferiore; questi link contengono lo stato della vista corrente, ma finora non siamo stati in grado di farlo: in primo luogo, a causa di problemi di dominio, non possiamo semplicemente recuperare i link di condivisione dall'iframe del codice embed; e in secondo luogo, il metodo API workbook.getUrl() non sembra includere lo stato della vista corrente.

Sto currenty esaminando la workbook.rememberCustomViewAsync (nome) e workbook.showCustomViewAsync (nome) metodi, che sembrano come una possibile soluzione. Tuttavia, non riesco a ottenere alcun risultato ragionevole da nessuno di questi due metodi, poiché entrambi finiscono per dare errori oscuri e non informativi a 500 durante l'esecuzione.

un file di esempio, e gli errori:

Per meglio illustrare questo problema, ho creato un minimo demo (frammento sotto) che tenta di utilizzare il secondo metodo sopra descritto. Quando vengono aperti in Google Chrome, nessuno dei due pulsanti ('salva stato' e 'stato di recupero') funziona per me, e i seguenti errori possono essere visualizzati negli Strumenti per sviluppatori (rispettivamente il messaggio di risposta http e l'uscita della console di sviluppo): risposta

Http:

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

Console di errore:

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

qualcuno sa come posso risolvere questo problema, sia per maki ng l'esempio di codice fornito funziona (il secondo metodo descritto) o attraverso altri mezzi? Qualsiasi aiuto sarebbe apprezzato!

PS: Il simulatore di frammento qui causerà un errore Access-Control-Allow-Origin. Il file è stato anche pubblicato 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>

risposta

2

Okey, così mi è stato in contatto con il supporto Tableau clienti, e sembrano aver trovato il problema.

Apparentemente, alcuni elementi di javascript-API sono disponibili solo per Tableau Online e Tableau Server - non Tableau Public.

In altre parole, la funzione workbook.rememberCustomViewAsync('customViewName') non è supportata per i grafici ospitati da Tableau Public - come quello utilizzato nell'esempio sopra (https://public.tableau.com/views/...).

+1

Ehi, ho una domanda. So che le visualizzazioni personalizzate sono condivise su tutti i dashboard di una cartella di lavoro. C'è un modo per applicare una vista personalizzata dalla dashboard1 della cartella di lavoro1 alla dashboard2 della cartella di lavoro2 con gli stessi filtri? –

+0

@DeepanshuKalra, temo di non poterti aiutare con quello. Raccomando di pubblicare una domanda nei forum di supporto ufficiali. Alla fine mi hanno aiutato! –