1 2 Previous Next 15 Replies Latest reply on Aug 19, 2013 11:17 AM by Justin Rockwood

    TABLEAU 8 API & Dynamic/Programmatic Pages

    Peter Maslin



      i am trying to use the tableau8 api , but the issue i am having is with Dynamic pages.


      i am using ASP.net


      the issue is that i want to be able to put different charts on a page based on different criteria , i am also using the secure ticket system.


      so i want to be able to initialise the Viz with parameters passed to it like url, ticket and placeholder name , but i am getting java errors saying page not found, do you have an guidance to help using the API in a dynamic fashon.


      unfortunately i cannot provide any code examples as i have not been able to get this to work at all so far.




        • 1. Re: TABLEAU 8 API & Dynamic/Programmatic Pages
          Russell Christopher

          Hey Peter!

          Please post sample code?

          • 2. Re: TABLEAU 8 API & Dynamic/Programmatic Pages
            Peter Maslin



            i dont have any sample code as i have not been able to achieve even close to what i want.


            i need a way of being able to dynamically pass a url, ticket and possibly the placeholder to the API for it to render the chart , i cant seem to find any way of getting this to work within your API at all , at development time i would not know what chart is being displayed so i cannot code it in , and of course i need to generate a ticket to pass to the control as well , so these bits need to be able to be programatically passed at run time to the page so it can render the control.


            all your examples are based on a fixed static page , i need to be able to work with a dynamic page where content and number of charts etc can change.



            • 3. Re: TABLEAU 8 API & Dynamic/Programmatic Pages
              Russell Christopher

              Hey Peter -


              Forget trusted tickets for the moment - that's the cherry on top and easy to do once the real work of instantiating the vizzes is done.


              You'll need a <div> in your page for each viz you want to create. So, your first step will be to load up your asp.net html with a bunch of 'em.


              Then, you're essentially going to reference each one (just like you would in a static page) and pass the div into the method which creates the viz in the div - just like in the samples you've been looking at. At this time you can reference any viz that you want to be created...and you can also dispose of the viz with dispose() in case you need to destroy it and fill the div with a different viz.

              • 4. Re: TABLEAU 8 API & Dynamic/Programmatic Pages
                Peter Maslin



                ok ignoring tickets for the moment.


                the issue is that as its a dynamic page the div required doesnt exist until i have dynamically added it to the page at run time.


                i have been experrimenting with this , but i cant seem to get it to work , is there any chance of providing some examples of dynamically embedding tableau charts onto a page where the number of charts and the chart content can change.

                • 5. Re: TABLEAU 8 API & Dynamic/Programmatic Pages
                  Russell Christopher

                  Hey Peter


                  The documentation folks do this sort of work, and it's unlikely they can turn something like this around quickly enough for you - this also doesn't seem to be a Tableau problem, based on your description.  It's a JavaScript/JQuery question...The problem as stated above is "how do I get a reference to a DIV (that I've just added to the page dynamically)  so I can pass it somewhere" (in this case, to Tableau's API code).


                  I don't consider myself a JavaScript expert, but it seems you should be able to handle this with JQuery:


                  jQuery selectors with variables - Stack Overflow

                  jquery variable in input name selector - Stack Overflow


                  Both of the threads above show how you can use a selector to grab an element when that element name isn't entirely known at design time. All of the information needed to successfully reference a specific element is only known at run time - like in your scenario.


                  So, you'd do something like this:


                  • Add your <divs> dynamically
                  • Once they are present in the DOM, use the technique above to reference them in variables
                  • Give them to Tableau


                  Anthony Krinsky, Justin Rockwood, Michael Kovner do you guys have any other ideas on this?

                  • 6. Re: Re: TABLEAU 8 API & Dynamic/Programmatic Pages
                    Peter Maslin

                    right i have got it partially working , i have put it all in a user control for now to try and organise things.


                    now the issue i am having is that the java calls dont seem to be working , in particular


                    selectMarksAsync or




                    ill include the code for this which may help a bit , if i can get this working i will move onto trying multiple charts on a page.




                    • 7. Re: Re: TABLEAU 8 API & Dynamic/Programmatic Pages
                      Russell Christopher

                      Using DevTools in Chrome / IE or Firebug in Firefox you should be able to see the error getting thrown to the console. What is it?


                      Have you checked to make sure that the worksheet variable is indeed defined and points to the right thing when it executes?


                      What about your selectedItemText variable? Are you sure it's a JS array? What if you hardcode a value instead of using the variable to test?


                      I don't see anything obviously wrong, so I think you'll need to put the debugger to work a bit.

                      • 8. Re: Re: TABLEAU 8 API & Dynamic/Programmatic Pages
                        Peter Maslin

                        the only error that occurs is that is says that applyFilterAsync does not exist as an option.


                        does the variable need to be an array ? your examples indicated that it can be a single value or an array of values.


                        even with hard coding i get the same error

                        0x800a01b6 - Microsoft JScript runtime error: Object doesn't support property or method 'selectMarksAsync'


                        ive run it all through the debugger etc, it will display the viz correctly but none of those two calls seem to work.

                        • 9. Re: TABLEAU 8 API & Dynamic/Programmatic Pages
                          Michael Kovner

                          Is the sheet a dashboard?

                          • 10. Re: TABLEAU 8 API & Dynamic/Programmatic Pages
                            Justin Rockwood

                            Michael's asking if the sheet is a dashboard, because you'll need to figure out which worksheet you want to select marks on. Something like:


                            var worksheet = workbook.getActiveSheet().getWorksheets().get("WorksheetName");



                            selectMarksAsync() is only available on a Worksheet object and not a Dashboard object.

                            1 of 1 people found this helpful
                            • 11. Re: TABLEAU 8 API & Dynamic/Programmatic Pages
                              Peter Maslin

                              ok thanks , i dont have anything to do with the tableau side of things i just present whatever things they submit to me , so i didnt know if it was a dashboard etc , i have checked and managed to get an actual worksheet one now and the javascript works fine.


                              so i have it now working inside a user control, ill see how it works when trying to do multiple later.

                              • 12. Re: TABLEAU 8 API & Dynamic/Programmatic Pages
                                Michael Kovner

                                If you're not sure whether the sheet in question is Worksheet object or a Dashboard object you can check:


                                workbook = viz.getWorkbook();

                                sheetType = workbook.getActiveSheet().getSheetType();

                                if(sheetType === "dashboard) {

                                     //handle the filtering as per Justin's post

                                } else {

                                     //handle the filtering the 'normal' way



                                One thing to note here is that since you don't know anything about the embedded viz (whether its a sheet or if its a dashboard and if its a dashboard what the name of the sheets or how many there are), you won't be able to call getWorksheets().get("WorksheetName") because you don't know the Worksheet name. Instead, you can just call getWorksheets() which will return an array of the Worksheet objects and you can do whatever you want with them (iterate over them and filter all of them maybe).

                                • 13. Re: TABLEAU 8 API & Dynamic/Programmatic Pages
                                  Peter Maslin



                                  yes that was an issue i have got them to give me just worksheets to display and the controls work fine , so i now have a good user control, that renders the chart , as for the ticket i append it into the url to make things simpler.


                                  so far this seems to do what i need , the next stage is designing a version that can have multiple charts on a page with their own java calls etc.


                                  thank you for your assistance so far.

                                  • 14. Re: TABLEAU 8 API & Dynamic/Programmatic Pages
                                    Peter Maslin



                                    based on what i have managed so far i can get a single chart to dynamically appear on a page.


                                    for putting multiple charts i am a little bit stumped mostly because it seems to rely on a variable existing rather than an object on a page that can be referenced.


                                    because of this its hard to know how to dynamically assign a reference to the chart i want to manipulate as i cant have multiple variables named the same , do you have any idea of how to instantiate and reference the chart dynamically with a dynamic variable declaration.



                                    1 2 Previous Next