How to place a live Tableau dashboard on a web page

hey everyone now that you learned a little bit of HTML CSS and you become dangerous you know how to put a page together and now that you also learned if you're taking this as part of the class how to use tableau no reason not to show you one more very simple and powerful technique how to put a live tableau dashboard just like the one you made in tableau desktop on the web so here's how you do it you're going to go to public tableau com now you need to create a new account here that is separate from the one you already created to download tableau so come here I'm going to sign out all right you're going to hit sign in you don't have an account so you're going to click create one now for free go ahead and create your account I'm going to let you pause the video or assume that you're going to pause it create it and then sign in so assuming you've done that I'm going to proceed now sign in cool here's some past tableau charts and dashboards I put on tableau public leave this here for now so let's go now to tableau here we go I just for simplicity I'm going to grab one of these existing sample workbooks so you may have created one you can use that instead I'm just going to use one of these is your country obese fantastic we already know the answer that one so what I'm going to do from here I'm actually have to move my screen up so you can see my options up top okay there we go hopefully you see these tableau options here at the top now I'm going to try one more time there we go what we want is this one server okay click server tableau public and we want to save this tableau whether it's a chart doesn't matter if it's a story chart or dashboard we're going to save the tableau public as wait a sec it's going to pop this thing up and say times you to sign in so with the account you just created go ahead and sign in so hopefully see if I remember that right perfect okay and it's going to say save this to tableau public under what name will be city dashboard or whatever you want to call it save and it's going to have to export your data to the web now don't worry you can hide this on tableau public if it's something sensitive typically we'd only use this for something we don't mind sharing with people but I'll show you here in a second you'll have the option to hide it all right here we it opened up a web page for us on tableau public I'm going to scroll down here you see it's live just like it was in tableau desktop here on the web and here's my other options Corrections with diet exercise is interesting anyway we have more options down here I'm gonna click edit details and I can rename it online give a description and I can also say by default this is unchecked allow workbook and its data to be downloaded by others so other people can I have to correct I said earlier other people can see this once you put on tableau public but they can't download the tableau desktop file or the data unless you check this so I'm going to leave that unchecked cancel what we want now is the code that comes right here when you click on share so there's this embed code you should know what div and class means by now even ID I'm going to click in here and it selects everything and I'm going to command C or control C depending on your Mac or PC leave that stored memory now let's go to brackets here we go so my leftover stuff from the last video let's close all this out alright if you are doing the exam or project I make a tableau oh I'm looking the wrong folder alright right here in HTML I'm gonna make a new file tab dot HTML for my tableau page let's go ahead and put in our HTML tags the stuff we know we need of course since this is html5 remember that HTML head and body aren't actually necessary but we use them anyway just so you know what recognized they are when you see them they're still all over the web tableau let's get this one a name or title - board demo let's not forget our dot type okay let's put the body alright let's give this a nice title I don't want to think too big h5 will do is nice super awesome tableau - board online okay couple line breaks automatically added all I'm going to do now is command the or control V so let's take a look at what we just pasted this is all the stuff that was a moment ago right here in this embed code so it puts a div in here you know what a div is it's a section it's got a class that's defined somewhere where is it defined well just look further down here it's all in here we can leave it just like this because of course CSS and HTML ignore white space or you are welcome to break it out and make it nice and neat now you don't know what this no script tag is but don't worry about it image now there's our close a object parameter parameter feel free to skip ahead if you don't want have to sit here and watch me do all this stuff this is not terribly important oops this is just me trying to make things readable a bit okay so hopefully you didn't watch me do all that you skipped ahead or something let's take a look at what we've done here we've got a div from here to here with a couple of tags inside of it no script and object we haven't gone over those don't worry about though you're welcome to look them up I'm not going to spend time going into it but it's a little more HTML with some IDs and then down here we have a script tag we use to add JavaScript now you're welcome to put this up in the head if you want but it doesn't really matter script us fine anywhere actually and if you know JavaScript or if you go on and take other classes and learn it even create a couple of variables now there is an option back here on this page to there's ways we can do this differently we can import or link to JavaScript or jQuery files that are external and not have quite so much code on this page but don't worry about it this is good enough for now all I want to do is save it and let's run the page or pull up the page I'm just going to run it here from this little thing previewer here this is my super awesome tableau dashboard online we wait a second for it to load and here we go a fully functional tableau dashboard just like you would have it inside of tableau desktop I can filter give it a second there we go there's just that area I can select just one state and can't select that state's not in the Midwest so let's go to West then let's look state there we go cool everything I need because it's tableau public though it's going to include all this stuff down here but that's it that's how to put a live tableau dashboard on a web page

Channel: Mark Keith

Views: 73,692

Rating: 4.9465647 out of 5

Keywords: HTML, CSS, Tableau, JavaScript, live dashboard

Id: wJ2CHIJalNU

Length: 8min 59sec (539 seconds)

Published: Thu Mar 23 2017