Create Dashboard Web App (Plotly Dash Tutorial)


hello folks so in this video I am going to create a – sample app from scratch okay to give you a flavor of components involved when writing code for these kind of applications so this is Nitin who is determined to democratize the artificial intelligence big data and cloud computing to the world and with this aim I will be creating associated content and going to you know publish it periodically and made it available for you so you can subscribe to my channel to get the latest updates regarding hottest technologies of 21st centuries so let’s get started so for this I will be using anaconda for our building or writing the code and in anaconda I will be using the spider application okay so here is the anaconda and we have various applications here I will be using this spider application to build the Python code okay so when you click on this an interface like this gets open this is the interface or Python okay spider spider application and we will be writing the code on this particular in this particular application okay so let me import a few important libraries here so first of all we have import – okay and then we have import okay Oh – Stearman components as HTML and then import – core confidence as DCC okay so this particular class as – HTML components basically contains the details of HTML tags okay and this particular class or library is you know is the library which contains classes for all classes of core components like slider dropdowns text area etc and you can also build your own you know components using Java scripts and vhj s so I showed you an example in the previous video where we used different kind of components like slider checkboxes etc so we can make use of those components using this particular library okay now in order to start an application we type something like so we’ll type something like f equals two – dot – okay all right so this is the way you know to start an application but then after that we will create our layout okay of our web application it’s more specifically than layout of our chart or graph okay so how can we do it we can do it by writing something like this dot layout equals two HTML which is this particular shortcut we are using okay so HTML dot div is nothing but a you know HTML tag and then you in the inverted commas we can write something like lochley or sample – – that’s it we can so this is the HTML like we have you know div tags in HTML so this is that div HTML tag okay because primarily we are creating the web application so we can include those these kind of ads here now this is the code we include to build the HTML page for our application so remember – is a web application as I told you earlier so here we are in you know kind of including these tests so this is not only tag we can include some various other HTML tags like paragraph you know then we have header tags h1 h2 h3 like those right the centreline tents all those sort of you know HTML tents now we can do modifications – above you know – this particular line of code okay and if in case let’s say we want to include any other classes elements you know a particular string or a number or you know single component or a list of component as a matter of fact in order to differentiate different entities we can do so by you know including or using a particular property called children okay so we include a property called children and which can actually signify a list containing several elements so how can we do it let me show you so I can modify this particular code and as I told you at earlier I can use a property called children right so inside this I will type children so this children basically or the differentiates is with each element from other element okay so I’ll show you how so here they will include children and then in equals two in the solid brackets okay I will in the solid brackets smooth closing solid brackets I will then include a header tag okay so how can we use that so again HTML so I’m using this HTML component here so HTML dot if I want to use header component for so if header is depicted by h1 right we all know and then after that we will type children equals two and then this particular text which we already when showing M that will close this okay so this one and then after that what we can do is we can include let us say another element okay which is let us say HTML dot okay so div tag essentially we are using here so div and then in the brackets again I can type children should it well okay equals to let us say I want to include our text like you know like – that is based in show and then close it okay so now this particular children property is differentiating this h1 tag of so basically this children property is differentiating h1 tag with this children property of div tag okay so using children we can differentiate what is h1 tag what is div tag and let us say if you want to include any other element here or tag you can again mention the children so these two you know this framework will automatically identify that okay so these two kind of statements are different these two kind of pens are different and how can how are we differentiating these two terms using this children property okay so this is basically the way we create the or you utilize these HTML tags differentiating using children property now these are the HTML tags now next I want what I want to do is I want to plot the graph okay so for plotting the graph I want to use the component called core components library so DCC so I will be referring DCC here because now I am creating graph which and this graph is a part of – core components library okay not HTML one okay so any HTML code will be created using this particular library and class and any specific component core component like graphs sliders dropdowns etc can be created using this but that’s why I am going to refer DCC here so this is e dot and what I’m trying to do here is I’m creating a graph so I will type graph here okay and after that in brackets I will mentioned you know different attributes okay so there is one attribute called ID and then there is attribute called figure so let us say so I won’t include ID – ID e5 invention – graph okay all right so this is the ID and then in the figure so there is another attribute called figure and then this figure attribute what I’m trying to do is I am going to mention the data for plotting this particular graph okay so this particular section what it is doing is is it is essentially going to plot a graph which contains details like ID layout and data for the graph okay so figure is what will contain the data for the crap okay and how can we do that so it mention something like this so data and in the data so we will include the X&Y coordinate details okay so essentially what are we going to do is we are going to create you know dictionary in basically a list of dictionaries so this is a list and I will be creating a dictionary elements here which and those dictionary elements will contain the X&Y coordinate details okay so again here let us say X and for the X let us say we have values 1 2 3 4 & 5 ok and for y I will include other details like four six three eight one okay and then after this we will mention what type of graph they are going to create so type of graph is depicted by this property type and what are we going to create the bar graph okay so then I should power here and we will name we will name this data as let us say Brad okay all right now let’s do one thing let’s copy-paste this data several times okay okay so copy pasting the within this particular data several times so that you know you can see various elements on the same graph okay I’ll show you what I’m trying to say here so I need to call my here and then again comma focus opposite with the basically I am creating three types of data one is for bread okay so there will be a bar graph for the bread details x and y coordinates are given here then we will have that I can change this data object annoying for and the type of graph is bar so you will see another bar graphs I just ended this particular paragraph and this will be for milk okay and for just one third one will create a line graph angle limiters let us say okay so there will be three elements on the same graph there will be two bar graphs and one graph of the Brad bar graph adjacent to milk bar graph and then there is a line chart depicting the sugar okay then after that we will have basically layout okay so will mention that layout details as well here layout okay and what will be the value of layout it will be okay in let us say I want to include that title so in the layout you can include various details like xf x labels wine labels title etc so here i am including the title okay so title is going to be tested – pig Stanfill okay so yeah so this is what we have mentioned for graph so you can see various elements like ID or the attributes like ID so I’d even shoulder – graph figure then figure will contain that data for this particular app and you saw that we contain three types of data one for bread one for milk and one for sugar and first two data elements were bar over for a paragraph and the third one is for line graph okay now one thing to note here is that each HTML and you know core components are separated by comma so you can see that this HTML element is separated by comma from this particular one and this one is separated for by this core data and core component so there are two HTML components and one core components and each of them is separated by comma okay so let’s say you want to add one more graph on the same web page what you can do is you can just copy paste this particular element okay so this is ending here right so you can copy this and you can put comma here and you can paste the value so you can create multiple graphs on the same web page so I here I am showing you that you can include two graphs on the same page and let’s say change the value is there – graph – simple example that – in order differentiate okay and that’s change the value of thesis also plain car let’s train okay or to differentiate the data elements the data points will be the same but the values will get changed okay so this way you can create two graphs on the same webpage okay now in order to run the application we will type the code like this okay so something like this so if underscore underscore name equals two remain okay basically email and then app dot run server and then debug equals to true all right so for this code exactly mean is that – will automatically refresh your browser when you make a change in your code okay now let’s save this a script as Python file okay and then we will run this app in browser using the local server okay so let me save it why – let us say I will name this as pi – my gosh dot py so I’m saving it as a Python file okay now this has been saved and that’s what I’m going to do is okay I will run this app using a command line okay so let me open the command line okay okay so this is my command line and I will type command net Python and the name of our save define bitches which was Python pi dash dot EUI right so let’s run it okay so looks like it is giving me some error or – object has no attribute run server okay all right so here I need to loot underscore in between so let’s let me save this one sign ctrl s and let me read on this command once again wall so this is the link now you could copy this particular link okay and you can run it inside your browser so you can you have already copy copy that link let me paste it in the browser okay and let me R so I have tasted this particular URL from the command line so you can see that on the command line it was mentioned as this HTTP local server and then port number is it zero five zero so I ran that link on browser and now you can see that it is loading okay so let’s see if it loads our craft if everything is fine we haven’t missed any money details then it should show the graph perfect now you can see your both of the crabs so this is what I was talking about right you can basically create multiple graphs on the same Vantage so our code was this one right so I copy pasted this DCCC dot graph once again right here correct so that’s why we are able to two graphs okay one is this one and another one is this one in the first one we had bread milk sugar okay so these two bar graphs one is for bread another one is for milk and this line graph is for sugar right so bar graph for bread okay bar graph bar graph for milk and then line graph for sugar and similarly we have created another element or component and that was a graph component and for aeroplane car and train so that’s why we we are able to see the airplane car and train details distance data elements are same so the these two graphs are kind of identical but you can see that the title has been changed to – example two which we did here – example to write a tournament’s are same so that’s why both of the graph sir same here okay so this is the way you can actually create your you know graphs or dashboards using – application you can see that sample – this was you know h1 tag white header tag so that’s why it is shown in bold here correct alright so forth so this is it for this video to conclude I created a sample – app and explain the structure of it that is explain the building blocks like core components and HTML components we also saw how to run – on local server to see the output in web browser right so here’s today’s question do you think that your business users or end-users can resonate with these kind of – Web Apps please share comments in your in the comment section given below and if you’re watching this video and you are not already a subscriber then subscribe to our Channel in fact consider clicking that little subscribe button and in case you are already subscribed then click on the band icon to receive the notification whenever I will be released a new video so thanks for hanging out with us guys I will be covering next topic in the upcoming video so keep on watching thank you

Danny Hutson

Leave a Reply

Your email address will not be published. Required fields are marked *