Python Adidas Sales Dashboard using Streamlit and Plotly-II

hi guys I hope you are doing well today's video is one of the most awaited second video of data visualization and dashboard using python streamlet all right and I hope everyone of you watched the very first video of interactive dashboard using python streamlet okay guys and I will be share this video link again in the description below I would like to recommend this video to watch in case you haven't watched this in this video we have seen how we can design an interactive Dash mode from the scratch all right and now in this video we will be discuss or develop end to endend interactive dashboard using python streamlet with pandas and plotly all right so first of all let me tell you how this dashboard look like so this dashboard is look like like this you can see in this snapshot and we will be double up the same from the scratch step by step so guys in this video I will we use this data set so guys this data is basically from Adidas outlet and you can see here this data is neat and clean where we have you know this information about the retailer and this is the reason state and city some information about the product and its price and this is the total sales and profit and its margin so first of all as I just mentioned we will be designed this particular dashboard using python pandas and streamlet and plotly all right so guys what is the streamlit so streamlit is an open- Source python library and it is basically designed for you know helping the data scientist engineer or data analyst to build a VB application for their data with minimal efforts okay and without the need of web development knowledge all right so a simple python programmer can produce a datadriven solution in interactive web apps in the matter of ours okay so I will tell you the designing of this dashboard using python streamlet from the scratch okay so let's jump on the VSS code so now let me go to the vs code so guys you can open any kind of ideally right create a new file let's say app.py simple right so here I want the necessary library right for this projects okay so I need a import streamlit as SD and I need a pandas as I just mentioned about the data handling and we need a date and time and guys I will be you know add this logo editas logo okay so I need a plow library right so from p and I want to import image all right or I need of the plotly do Express ASX and I need import plotly dot graph object as go so Guys these are the basic Library we need a stream lit for the streamlet and for the pandas for data handling and in case we want some date and time so this is for date and time in case you want to process some images so we need of this p and for the interactive data visualization we need a plotly all right so first of all I want to read the data okay so what I'm doing here reading the data from Excel file okay so simple I'm taking a variable which is DF equal to pd. read Excel and here I am supplying the file name that is called editas Excel SX so guys using this line of statement we can read the data okay now using the streamlet let's say I am going to set a page config and here I want a layout that is called wide simple concept all right and now let me write some markdown okay so using the markdown let's say we can design you know some heading some padding we can do that so do markdown and here let's say I want is style and block container and here I'm using a pading okay in the last video right we have used the same concept and now simple concept okay and here we are using unsave allow asml equal to True right so it is a very simple concept and now in the next line let me import our image okay so I am taking a variable that is called image and here image. open and I'm going to supply that logo the logo name is editas logo.jpg simple now let me save this and now I want to run this particular block of code okay so let me run python file so guys how we can execute this script so simple stream lit okay and run app.py and here I am using a server. port which is 80 and 80 now let me run this it will take couple couple of second to launch in your web browser so guys you can see here we have launched a successfully app using the streamlit on a web browser okay so it is very very easy all right and now let's say we can do you know some setting in case if I'm going to rerun again or whenever you will be save your script it will be run automatically all right so now let me proceed now I am going to create a very simple a column let's say column one and column two and here St do columns so guys here you need to supply the width of the column so let's say the very first column width is 0.1 and the next column width is 0.9 okay so in case let's say if you are going to create a three column so you can create based on let's say of these position so when whenever you will add this so it will be approximately one right now what I'm doing here with column number one what I want I want to insert that image okay uh image and I want to supply a width equal to let's say 100 simple okay now let me save this and we'll see what will happen here so guys you can see here we are able to dis play this image simple this is for the editas logo and now I want to write you know some HTML title so how we can write the HTML title so simple let's say this is the style all right now let me let me pass this heading to the column two okay so with column two and here st. markdown and here I am supplying here let's say HTML title and again unsave allow HTML equal to True let me save and we'll see what will happen okay guys so let me check the syntax so guys let me correct the alignment so now it is perfectly fine let me save this and we'll see so guys it is perfectly working fine editas interactive sales dashboard from now your main work will be begin okay so you can see here right it is very very easy simple I have creat a two columns and in the First Column let's say I have added my image on the second column let's say I used a HTML title simple now what I'm doing here now I am going to create a three column so column three and column 4 and I need of column five and again St do columns and here I am going to do the segregation so 0.1 it means the very first column width will be 0.10 and the second column width will be 0.45 and for the third column Also let's say I'm using here 0.45 all right now what I'm doing here with column three and here I am using a box date okay it means I I want a current date right so St Str let's say date time date time. date time all right and I'm using here the now and St strf time guys and now I am going to formate my the date and time so simple let's say person d and I want B and I need of you know capital Y and now I am writing here st. WR let's say I'm using a app string concept last updated by sln and here I'm using a box date let me save this so guys you will see here the date will come all right simple right so this is last update by 4th of November so we can do let me provide one more space and then contrl s and now it will be the next line right it is perfectly fine okay and now I am going to make a chart based on the column four so with column number four and guys uh I am using here a plotly right so px. bar bar chart I want so my data frame in the form of DF and the x equal to okay so you can see here I have lots of information so so on the x-axis I am taking a retailer so simple retailer I am taking and on the Y AIS let's say I need a total sales this one so I am taking a total sales and I want to define the labels so total sales I am going to I saying let's say total sales in the form of dollar just an example dollar all right now comma and I want to supply the title let's say this is the total sales by retailer simple concept you want the H data yes we want H data as well so I need a total sales and guys I want to use a specific template so my favorite template is [Music] gridon all right and you can supply you know some height and width in case you want so I'm supplying height equal to 500 and now st. plotly chart and fig and again use container width equal to true now we'll see so guys you can see here we have generated a total sales retailer now when we have over so now we are able to display the sales as okay it is very interesting all right now similarly in this area also let me create another chart so that particular chart I want to supply column number five okay so guys but before that let let's say in case this chart is created on XYZ data okay so guys let's say if I'm a non- stakeholder and I want to check the source data of this chart okay so how how we can check so let me do one thing I'm taking this Z know underscore and I want view one and I'm taking a download one view two and the download to okay so you will understand let me write the entire statement so let's say I want 0.15 0.20 comma 0.20 and again 0.20 and 0.20 okay so 1 2 3 4 5 all right so look at this what I'm trying to do here I am using here view one okay view one means let's say I am going to leave a blank space 0.15 right here I'm I want to leave some Blank Space here okay so you will understand let me write this line of statement now let's say I am writing a variable that is called expander St do expander and here I am saying retailer y Dev sales all right and here data equal to DF and I need of a retailer and I need a total sales dot group bu okay and the column name is a retailer and I need a total sales do sum okay so based on that right we are creating the bar chart now this data right whatever the data we have created the data I want to write in the expander simple let me contrl S and we'll see so you can see here right retailer VI sales so when I'm going to expand this now you are able to see that sales as well okay very interesting now what I'm doing here similarly let's say in case you need of that data right you want to download that data in the form of CSV so I am writing here with down one all right so are you able to understand this underscore if I will not write let's say 0.15 for this underscore so this retailer will be you know here underneath of this logo I don't want here right I want underneath of the chart right so I have you know leave us some Blank Space simp similarly if I want to perform st. download button I'm saying get data and here a data equal to data 2 CSV and guys in case you have any kind of encoding so generally we use utf8 all right and now if I want to supply a file name let's say retailer sa. CSV you can supply any file name or right and here the format will be text or CSV simple concept all right now let me save it and we'll see here you will have the download button look at this get data so once you click on it so the data will be Sav here that is called retailer. CSP simple concept all right now let me close this okay similarly guys let's say I want to create a another chart all right so what I'm doing here so with column five right with column five means let's say on this column I want to create that chart right so what I'm doing here so guys let's say fig one equal to px. line chart let's say I want to create okay based on the month and year so I don't have month and year in the data set okay so what we can do this is the data frame and I'm going to create a new column that is called month uncore year and we have a invoice date look at this we have a invoice date so from this invoice date can we extract the month and year so answer is yes we can so what I'm doing here DF and the column name is invoice date and this is the DD right and Str strf time and I want percent B and I want percent y like this okay so the data will be saved in the DF do Monon year okay in the in this particular column so and what I'm doing here I'm going to create a you know data based on this so DF that which is Group by and by equal to DF and month and year all right and then guys I need a total sales of some well in case you want to reset the index so you can reset the index because right now I am going to create a group by statement based on single column so it will give you the you know series if you will reset that series then you will have a data frame so that entire data frame of I will be store in the form of result variable okay or result data frame now what I'm doing here I am taking an entire data frame that is called result X on the xaxis I need of a month of year y should be caps and then on the y axis I need a total sales and the title I am going to supply which is let's say total sales over time and then again I'm using a template that is called gridon all right simple concept okay and now St do plotly chart fig one and again use container with equal to true and now let me save this so we are having some error month year okay the spelling is wrong so it should be capital Y all right now it is perfectly fine so guys you can see now this is the total sales over the time and you are able to see here the month and year okay perfectly fine right and now same thing let's say whatever we have done here the same thing we can do underneath of this CH all right so how we can do that so let's say uh with you remember we I have created a variable let's say V2 V1 so this one view2 and download two so I am using here view2 and now again I'm going to create an expander equal to st. expander and I'm saying monthly sales monthly sales and now data equal to result right and expander expander equal WR and I want the data and now download to st. download button and again get data okay and data equal to result to uh CS V and incode so guys in case you want to save the data set right in the form of CSV so I would recommend let's say you can mention encoding which is udf8 okay to ignoring the bad characters from the data set so name and here you can use monthly sales. CSV and again file type should be text file and CSV F simple concept all right so now you can see here this is the monthly sales so whenever you will check so you are having all the sales in case you want get data so simple you can click it so you can see the beauty of expender in case you don't want to download simple you can you know collapse or in collapse right very very interesting all right guys and guys one more thing let's say so it is a very interesting part right and as I just mentioned so in case you want to download or view the data so you can navigate these button similarly let's say I want to draw some chart here okay but before creating the chart let's say I want to create a simple line here okay so what I'm doing here let's say in case you want to supply a simple line so simple you can use here st. divided simple now let me save this now you will see the you know the line will came here look at this all right easy okay now similarly let me create you know some more chart so now what I am doing I am going to create a chart based on total sales and unit so I am taking a variable that that this is result one equal to DF do group by and I'm going to create a chart based on the state column all right and I need a two things I need a total sales against the state and I need a total unit total units sold okay and I want some and then reset index simple concept all right now guys I want to you know what I'm doing let me write here I'm adding the units sold as a line chart on a secondary axis on a secondary Axis or you can say that Y axis so what do you mean by this so let's say what I'm trying to do here right now I am going to create a chart based on two sources so this total sales will be a column chart and unit sold will be a line chart okay so I'm going to create a dual exit chart right so how we can create a dual AIS chart so first of all let's say let me take a variable this is figure three and here the go and figure all right so we have created a library that is called go okay simple now what I need so guys let's say fig 3. address and here go and bar chart so x equal to result one and I need a state perfectly fine okay on the Y AIS I need a result one and I need a total sales and I want to supply a name as well okay so the name equal to total sales it's easy okay now that line chart I want to supply on a second secondary axis okay so look at this figure 3. address and go do skatter okay so go. SC and x equal to Result One okay and state so are you understanding what I'm trying to do here okay let me tell you in Excel so let's say let me create a pivot table very quickly and I need a state so this is the state right and I need a sales so this is the sales and then I need a unit sold so this is the unit sold simple concept and now I am going to create a chart so this is this is the state this is total sales and this is unit sold simple okay now I am going to create a chart like this so you can see here right now I have a this in the blue color I have a total sales and in the in this orange color I have unit sold okay but right now I'm not able to see the unit sold so what I'm doing here let's say you can click here and the right click go to the change series chart type right and now you can see here the unit sold okay so I am going to create on a on a secondary access and this particular chart I want to change into the line chart then click okay so guys this chart let's say I want to create now this chart is more readable how you can read let's say for Albama this is the sales and in case you want to check the unit sold so this is the unit sold approximately or you can say that more than 40,000 so the same chart I want to create in Python so first of all let's say I need a column chart then I need a line chart all right so the same thing I am trying to do here so I have created right bar chart now scatter and state and here y equal to result one and I need a unit sold unit sold and here the mode equal to you need to supply the mode equal to lines simple in case you want to supply a name yes so you can say that this is unit units sold and on the y axis I'm saying Y2 simple concept all right and now I want to update this layout okay so figure 3 Dot update layout [Music] update layout yes and here guys I need some information let's say a title I need that is called total sales and units sold sold by state so any sensible name you can you know Supply here and I need a XX equal to in the dictionary let's say a title uh which is equal to State comma I need a y AIS equal to dictionary title and let's say total sales and comma I don't want to show the grid right so I'm using here the false comma and Y AIS to dictionary and the title and here units sold over lay equal to Y and the side equal to right okay we'll understand okay on the x-axis and the comma again I'm using a template that is called gridon gridon and now I want to supply a Legend So guys using this approach you can c customize the chart or its layout or its component okay y equal to let's say maybe one all right now let me do one thing again so I am going to create a column six right so this is the very long chart right so st. columns and here I need 0.1 and I need let's say one or maybe 0.9 and now with column six and now I am going to insert that chart right how can I insert st. plotly chart and figure three and again use container V equal to two simple concept okay so right now here I'm going to create a bar chart and using the scatter function I'm going to access the state and unit sold and the chart I'm going to change into the lines and based on that let's say I'm going to supply the x-axis y axis and the title and the template and Legend So guys you can see here okay so again so for Alama it is greater than 20 million and but if I'm talking about the you know a profit or you can say that sorry unit sold it is approximately 63k okay and now here you know we are not able to see this after 100K right what is the number so what we can do here let me you know Legend let me shft this and now we'll see yeah so now this chart is more readable all right okay so in case let's say you want a more grid line so you can you know you can say that is a true and save this so you will have the grid line right so again I'm going to set the false in case you don't want the grid line for the y axis 2 as well so again you can write here show grid equal to false so those grid line also will be removed from here okay so it is very interesting right so the same chart we have created in the Excel and the same chart we have created in the python using the plotly and streamlet all right and for the same thing let's say we can write here the view and expander or we can perform the download button okay again let me create a view three for the viewing the data and for downloading the data st. columns and here's 0.5 and 0.45 and 0.45 so you can adjust you know this kind kind of width according to your need and look and feel expander equal to st. expander and here view data data for sales by units sold and again expander do right I am saying result one and it is view3 right and with download three st. download button again get data data equal to Result One .2 CSV and incode UTF 8 and you can supply the file name file name right and which is sales sales by units so. CSV and this is the file type this is a text and CSV simply concept and again std. divider divider all right simple guys right it is interesting okay similarly in case let's say you want to you know Supply you know some filter here let's say 2016 and 2017 or maybe you want to you know create a laugh pain as well so you can create right as we have seen in the last in the last video from the streamlet okay I'm not going to do that but in case you want you can do that right it is very easy not a rocket science all right now now guys one more thing let's say I want to create a tree map chart okay because tree map it is a very interesting chart right based on that let's say we can easily find out the sales or based on reason and City we can easily monitor the sales and its performance so I am using here the column 7even okay and st. columns so 0.1 and 1 I am going to create a tree map chart right tree map so DF and here I need a reason look at this guys here I need a reason or I need a city I don't want a state okay I need a reason in case you want to supply you can supply and here I need a total sales do group bu bu equal to I am going to you know aggregate my data based on two columns what are those two columns so I have a reason I have a city based on that I need a total sales so guys as I just mentioned in the last session if you are aware about the pandas okay or data visualization using the plotly then you will be the master in terms of data visualization in terms of creating an interactive dashboard all right so simple sum and the reset index simple concept now I'm taking a variable let's say figure 4 equal to px. tree map simple now I have the data in into the tree map here the path path means let's say I want based on the reason and City simple concept you want the values yes values I want only the total sales I want to show the hover name and hover name will be let's say total sales okay and here I need a hover data that is called I need a total sales whatever the column name right uh H data again in the form of total sales and I need a color based on the city and here I am going to supply height equal to 700 and the width equal to 600 simple and figure 4 figure 4. update dresses and here I want guys text info label plus value all right now what we can do let's say now we can display this chart on the column number seven st. subheader in case you want to supply you can supply so let's say I'm going to point to the right side and here total sales by reason and City and tree map whatever you want you can supply it st. plotly chart and here figure four and use container with equal to true all right easy so we are getting some exception part reason total sales okay let me check let me remove this and the H data let's say total sales and color and then height and width let me try again so it's working fine and here we are able to display the sales as well all right so guys you can see here but in case let's say you know if this sales is not readable in the data labels okay although this is the comma comma you know separation but here we are not able to read you know clearly so for that let's say what we can do let me create a basic function so let's say DF format sales by the value so if your value is greater than equal to zero then I need to return in the form of I need only the two decimal point two decimal point okay in the form of lack do format value divided by so 0 z z and0 right and here tree map I need a total sales let's say total sales which is formated okay formated let me copy this equal to tree map and the actual column name is a total sales okay do apply format sales simple and right now let's say we can supply here the hover name equal to this one and here also we can supply this one in the double code now let me run this I'll explain this part so I forget the comma yeah okay now now guys you can see here right total sales is uh 34539 lakh right we are able to see 26331 lakh right on the second uh second last time okay so this is interesting now let me tell you let's say what I have done it so in case you are getting a very long number although you can you know you know divide in in the form of millions as well in case you want but I have divided my numbers in the form of La so this is the you know simple I am using here on the two decimal point okay in the form of lack and I whatever the number I have I have divided in the using the one L and now using the apply function I have applied this particular you know functionality on the total sales okay and then that particular you know sales I have used here total sales format okay so it is very easy all right you can see here guys this is the you know title and we are able to see here all right so guys similarly in case you want to download the data or view the data based on this chart and sometime let's say client want no I want to download the entire data as well okay so let me build that functionality here as well okay so again let's say I am going to create a view4 and the download 4 right equal to St do columns and here I need a 0.5 0.45 and 0.45 okay so look at this in case if I'm going to you know saying 0.1 okay we'll see let's see what will happen and now with vew 4 the result I'm taking a variable 2 equal to DF I need a few things the reason I need I need a city I need a total sales and then I am using here the group by by uh guys reason and City okay so reason and City and here I need a total sales total sales and I need a s simple concept and here expander equal to St do expander and here view data for total sales by reason and City and expander do write result two similarly let's say with download 4 and here st. download button and get data not g data is a get data and data equal to uh result 2. CSV and do encoding here utf8 all right and then I can supply the file name which is sales by reason whatever right let me do one thing and text uh let's say text and CSV simple concept Okay so this is perfectly fine right and our download button is not working UTF okay let me close my bracket and let me save and let me run it again so guys is working right you can see here in case you want to get the data now we are able to get the data okay sales by reason but look at this in case let's say this particular expander right it will be towards to the right right side right it's look good so if you are saying let's say 0.5 okay 0.5 and now I am going to save this now you can see here it will be shifted to the right side look at this now it's look good all right and now let's say if you want to view the entire data set so view five and the download five so I'm not creating a more chart right so you got the flavor right how we can create a multiple chart so St do columns and again I will be Supply a same sequence 0.5 and 0.45 and 0.45 simple concept now with view5 and here expander equal to st. expander and here view sales raw data simple concept all right and here expander and then write entire data frame I'm writing and now with download five and now st. download button and now get raw data and here data equal to df2 CSV and in code utf8 and then file name which is sales ra dat. CSV and here either text or either CSV okay and then last St dot divid simple guys okay now let me run this so look at this so in case you want to view the entire data set so you can view the entire data simple count in I can you know expand the width of this particular you know uh data frame right but I'm not doing this simple and in case you want to get raw data so you can easily get the data as easy so guys this is very interesting okay so now you can see this entire dashboard so first of all this the this dashboard is updated by the 5th of November 2023 in case you want to supply the time or you can supply the time as well so this is the particular title which is idas interactive sales dashboard and here let's say I'm going to display the total sales by retailer and total sales over time and in case you want to read the data or in case you want to get the data so you can have it and then now we are having total sales and unit sold by the state so based on the state let's say what is my total sales and what is my unit sold all right and again for this also let's say if you want to view the data or you want to get the data so you can do that and this is very interesting right creating a tree map based on the reason and City if I want to you know fetch out the information for the Northeast so simple I can switch again if I want to go back on a different reason so simple I can click on it and I can see the data okay and you can see here we have customized the H information as well right so it is displaying let's say this is the parent is Southeast and I have selected the Miami and this is the total sales formatted okay so lots of information I'm having right now and again in case you want to view download the data based on the tree map so simple you can download it you can see here and the last let's say if you want to download the entire data set based on that let's say we have created this entire dashboard so simple you can see here all right guys so this is very interesting and in terms of the programming I'm not using any kind of Rocket sign so simple pandas and plotly I am using and once those chart is created and I am saying st. plotty chart and whatever the variable of the chart I am supplying here and this is the you know column management you need to remember in case you are changing this particular number so your chart will be shifted towards to the left side or to the right side So based on your understanding or based on your requirement you can custom is this number okay so guys I hope you really enjoy in the session and I'm sure you learn something new in this tutorial and the source code link you can find in the description and I would recommend to practice of this session as well as the last session from the streamlet okay and in case if you are facing any issue or concern or difficulty to understand anything from this session please let me know in the comment box all right so for now thanks for watching and have a great day [Music] he

Channel: Programming Is Fun

Views: 4,240

Keywords: Streamlit interactive plots, Uploading data into Streamlit dashboard, Streamlit titles and headings, Pandas data handling with Streamlit, Transforming data in Streamlit with Pandas, Visualizing data with Plotly in Streamlit, Time Series Analysis in Streamlit tutorial, Downloading data from Streamlit plots, Data Analysis and Visualization with Python Streamlit, Streamlit tutorial, Exploring Streamlit features, Step-by-step guide Python Dashboard, Streamlit date, Sales Dashboard

Id: 6Eu2b34alsE

Length: 50min 11sec (3011 seconds)

Published: Mon Nov 06 2023