Python Dashboard with Tkinter and Matplotlib tutorial [for beginners]

hello everyone and welcome back to my channel so in today's video we are going to build this dashboard using tikenter so this dashboard will use tikenter to create this interface this window with the sidebar and the charts inside it the charts themselves will be created using matplotlib which is a very popular python library for data visualization the use case in this case is going to be for a sample shop they have some sales some inventory some product details and what they want to do is to create charts based on their data to generate this visualization dashboard with tikenter this project is definitely beginner friendly you don't need to have any experience with either ticketer or matplotlib if you do have some experience with either of those then great this will really help you but even if you don't you can definitely get this project going the source code will be in the description as always I will break down every single line of code step by step so without further Ado let's get started so let's first start by talking a bit about some setup this is how my project folder looks looks like I named the tikenter dashboard you can name it anything you want inside it I have two main files I have dashboard.pi and data.pi one thing I have to mention is I'm using vs code you can use any editor that you like so long as you're comfortable with it and you're able to run python alright so what are these two files that I have data.pi will house all of my dummy data so here I have my sales data inventory data and so on so we'll talk about those as we go through the project but basically this is where I'm putting my data in this python file you can choose to have your data inside a Json file inside a CSV file but for simplicity's sake what I'm going to do is I'm going to have it inside a python file called data.pi now the second file is dashboard.pi this is where we're going to write the code for the dashboard this is where we'll produce the charts add them in ticketer and everything else alright so how does this dashboard.pi look like for now for now it's just a bunch of imports I'll go through them in just a second but before that one thing I want you to do is to actually install matplotlib to install matplotlib what you need to do is simply pull up a terminal so I'm using the integrated terminal in vs code you can use any terminal you can use the regular CMD on your machine it doesn't matter in my case I prefer using the integrated terminal so I'll use that so I just have to say pip install matte plot lip and it's that easy you just wait a minute and everything should get installed and you should have it on your machine ready to go so I'm not going to do this because obviously I already have it but essentially this is how you install it now regarding these Imports so inside data.pi you notice we just have some variables we have the sales underscore data inventory underscore data product data sales year data and inventory month data so we don't really have any code that is executing anything obviously this is also being executed this information is being added into those variables but that's all we have so we just have variables containing our data in this case this is just some dummy data I use chat GPT to generate it so this is a really interesting use case of chat GPT make sure you can use it to generate any kind of data that you want so in dashboard dot Pi I just say import matplotlib dot pipelot as PLT so this is a common way to refer to matplotlib we imported as PLT standard and the next thing is from data so here I'm saying from the data.pi file I'm importing all these variables containing my dummy data so this should be straightforward I'm importing sales data inventory data and everything else all right so now I have my imports I have matplotlib installed the first thing we're going to work on after we have set up everything like we just did first thing we'll do is to actually create the plots so let's totally forget about tikenter for now forget about the dashboard forget about anything related to Teak enter let's just work on matplotlib and creating these plots ourselves so first things first I'm going to change the color scheme of matplotlib so matplotlib has some default colors that it usually works with but in our case what we want to do is we want to have a uniform color scheme for all our charts so what I'm going to do is I'm going to set this to be this few shades of purple you can see right here there are five different shades of purple I'm going to set this as my color scheme to set this as my color scheme I use the RC params from matplotlib and I set this like so so I specify the color attribute and I give it this list of five different purple Shades you can choose any number of Shades that you want you can have five different red shades or yellow Shades or whatever you want you can even choose to keep the default matte plot lip colors but I chose to do this so that we have a much better looking interface when we combine all of these plots together alright so we have the Colors Let's Start by actually plotting these charts the first chart we're going to plot is going to be related to this one the sales data in this case let's take a look at our data you can see we have product a it has 100 sales product B has 200 Sales product C has 600 sales and so on what we want to do is to plot a bar graph or a bar chart for this data so this is very straightforward in matplotlib and you will see that once we know how to plot the first or the first and the second charts everything else will come super easy it's very similar so let's plot the first chart so we're going to say chart one is going to be bar chart of sales data first things first we have to do plt.subplots this will create the figure and the subplots object so in this case this returns two things figure one or fig one in this case is going to be our figure this is going to be the general figure produced by matplotlip and acts 1 will represent the axis and this will be inside the figure which will contain our data and the way it is formatted so okay we created plt.subplots but how do I make this into a bar chart to make this into a bar chart it's very easy I just say ax1 or axis1 dot bar so bar will help me create a bar chart and then I have to specify the variables so in this case the x-axis will contain the sales data.keys and the y-axis will contain the sales data dot values so what do I mean by keys and values going back to our sales data you can notice that this is a python dict a python dict is a dictionary in Python you are probably familiar with it but basically what we're saying is these are sets of key value pairs so product a is a key and 100 is the value and in this case product B is the key and 200 is the value so when I say sales data.keys basically this is going to be product a product B product C product D and product e so basically we just extracted all of the keys and when I say sales data.values here on the y-axis this will get me all the data on the y-axis so this will be 100 200 300 whatever so the data that you see here the numbers okay so we have the data we placed them in the bar chart so the next thing we're going to do is we will set the title of the chart this is going to be sales by product or whatever you want to call it but I chose to call it sales by product the next thing we're going to set the labels on both the X and the y-axis so this will be set X label product and set y label sales and finally I just have to show my plot so this will be plt.show if you don't run the plt.show you will not really see anything produced by matplotlib this is just how matplotlib works so you should be acquainted with this type of syntax okay so we have created everything related to the bar chart what's left is to actually just run it so running it we see we have a bar chart produced as you can see the title says sales by product just how we specified here and the X label says product and the Y label says sales so this is the point of using this x label and Y label and as you can see we have a bar chart produced so you have here the product a with 100 product b200 and all the values are matching according to our sales data variable in Python so we have totally finished producing our very first chart this is a bar chart now the second chart is related to the inventory data so you can see here we have this inventory data it's very similar to the sales data but in this case we're kind of referring to quantities so before we were saying that product a had 100 sales in this case product a had 150 units in inventory meaning we had 150 units of product a again this is just dummy data you can create any data that you want you can replace this with any type of data that you want especially if you have your own use case all right so we have the inventory data we're also going to create a bar chart but this time it's going to be a horizontal bar chart so to create the horizontal bar chart it's also very similar so we say figure 2 axis 2 is equal to plt.subplots so the exact same thing next I say X2 dot bar H so bar h means horizontal bar chart this is how we create the bar chart horizontally and then we say list inventory data.keys and then inventory data.values the reason I specify it here as a list because bar H has to take a list object so here inventory.keys this will return a dict Keys object what we want to do is simply convert it into a list object all right so I've passed the data I've created the bar chart next thing I want I set the title this will be inventory by product and then I set the x label to inventory the Y label to product and then I just plt.show so it's the exact same thing that we did for the first chart very similar we just changed a few things when creating the chart but the rest of the code is pretty much the same now running it so you see first we have our first chart which was the sales by product all I have to do is simply press on X and now I have the inventory by product which is our second chart and this is how our second chart looks like as you can see we have everything there and it has all of our data and it's a horizontal bar chart okay so we finished our first two chart now we just have three more the next one is going to be a pie chart so going back here you see we have our product data in this case this is a pie chart and we have these five products and there's a percentage of each of them so what we want to do is to generate the pie chart to do that very easy let me just scroll down a bit and we again we create plt.subplots in this case this will be figure 3 axis 3 and then we say X3 dot Pi so in this case the it's a pie chart and we will have the product data.values and then the labels will be equal to the product data.keys so product data values are the numbers here so 10 40 30 whatever and then the labels so the labels of the pie chart I'll explain more when we run it and this is going to be basically the keys so a b c d and e so we set the title and then we just do plt.show running it let's close the first two close this one as well and as you can see here this is our third chart which is the pie chart so the labels that we set here as okay let me show you labels is equal to product data.keys this is actually these guys so the letters here these are the labels of the pie chart they're here to label the data now one thing we could have added is some percentages so just to show how how like what's the percentage for each of these for each slice of the pie chart to do that it's very simple we do that like this so Auto PST PCT with this is auto percentage and you give it the format so in this case my format is going to look like this and I'll explain it to you when we run it so let's actually close these two okay so now you can see the format basically I'm saying I want one point after the decimal with the percentage sign and this is the numbers that we have now we can actually see the percentages on our chart all right we've created the first three charts let's go ahead and create the last two so the next chart is going to be the line chart again we do the subplots this time we just say ax4.plot so to create a line chart you just use the plot and then we convert the sales year data Keys into a list and the values into a list so going back here let me show you this is the sales year data so you have 2018 what the value is 2019 and so on this is going to be a line chart just add the title the label the Y label plt.show and let's run it so you should be familiar with this by now let's close these three and now you can see we have a line chart that says sales by year this is our fourth chart all right we just have one more so let's add and create the final one so we do this this is going to be area chart of inventory by month so going back here you can see this is our inventory month data and now what we do is we do the following so same thing subplots this time we say ax5.fill underscore between this is going to give us an area chart let me run it and actually explain what an area chart is so closing these this is our last one so when we say fill between basically we're saying that they should fill out this data this is what helps us give this area chart look so by filling up the colors under the line now we have this area chart and it has all of our data so we have the month the inventory and for each month we're checking the value of the inventory okay so we have created all five charts the next thing we want to do is to see how we can add them into tikenter and create the first thing we're going to do is to actually comment out all these plt.show functions the reason is we no longer want the charts to pop up as their own window as they were showing up before so before we had five separate Windows there each chart was showing up in a separate window we don't want that anymore so I just comment out all of these plt.show you can leave them but then you're still going to have these windows even as you create your Tech internet the first step for adding teak enter into our application is to actually add the respective Imports first thing we're going to next we're going to import matplotlib.backans.backan underscore TK AGG import figure figure canvas TK AGG so what this is is basically this is what will allow us to embed the matplotlib charts into a teak inter canvas it's a special type of canvas that we're going to use in tikenter and then this will contain our figure that was generated here when we did the plt.subplots this will contain our figure and will embed it inside our tikenter UI alright so we have imported everything let's start by actually creating our dashboard and adding all the charts to it to create the dashboard this is going to be our very first piece of code first things first you create the window so here root is going to be equal to tk.tk this creates the root window of our tikenter application the way ticketer works is that the widgets are in a hierarchy there is one big root in this case this is your main window and everything else is going contained inside it so if we look here at our reference image you can see that sorry okay so you can see that this is our window so this is going to be our root window in tikenter and everything else is going to be embedded inside of it so to create this root window simply we just say tk.tk then we give it a title of dashboard this means the title here of the window is going to be dashboard the same way VSCO chose vs code and things like that so root dot title will be dashboard next we say root dot State it's going to be zoomed so when we say Zoom this means it will be maximized and it will take up the entire screen the reason is our dashboard is pretty big we have five different charts so we actually wanted to take up as much screen space as possible all right so we have these the last thing we need to do is say root dot main Loop this is going to be the event Loop of teakinter what this means is that so long as your app is running this main Loop or this infinite Loop will be running as well this is what we call an event Loop and without it you would not be able to see anything in your application now running this to see what we have now as you can see we have an empty window since we haven't really added any of the charts to it yet it's titled dashboard and it's Zoom so it's totally maximized taking up the entire screen and it is totally empty now before we add it into tikenter what we want to do is to create a frame that's going to house our charts the reason is it's going to help us to better organize and position these charts the way we want so antique inter positioning can be a little tricky so when I say positioning this means how do I place these charts in my screen how do I allow them to take up this much space or how do I make sure that this one here is on the top left this one is in the top middle and this one is on the top right how do I position this in tikenter we have something called geometry managers now I'm not going to go into too much depth about geometry managers here and the different things you can do with them but basically what we are going to do is to create a frame so the frame in this case is going to be like this it will house our first three charts okay so this is supposed to be a square where just forgive me I'm just throwing this very quickly but basically this is going to be our first frame and it's going to contain our first three charts this is going to allow us to separate the two parts of our dashboard and put different charts in each part so we created the frame to create it it's very easy we just call it upper frame so we're going to have upper frame and lower frame the reason is one of them is obviously at the top and the other one is at the bottom so the parent of the tk.frame object is going to be root like I said before in tikenter widgets exist in a hierarchy so they are nested inside of each other so root is our biggest window it's the biggest widget and inside of it I'm going to have the upper frame so I have to specify that root is the parent of upper frame and now antique inter anytime you want to add a widget to a screen you need to perform two steps first you need to create it like we did here the second step is you need to position it using a geometry manager so we just say upper frame dot pack so back is one geometry manager and we just say fill equal both expand equal true so fill equal both means fill both the X and the y axis take up as much space as possible and expand is true so that means our widget can actually expand we've created the frame let's start by adding the charts into the frame the first chart is the bar chart so here this is figure one so figure one if you go back here you can see figure one is equal to the bar chart so what I do is I create this figure canvas TK AGG object and then I specify that the figure that's going to be in this figure canvas is going to be figure one and then I say the parent of this widget in this case this canvas is going to be the upper frame so remember how I was saying they're nested you have root it's the biggest widget then you have frame inside of root as you can see here and then you have the first canvas which is this figure inside of the frame so the parent is the upper frame next thing you need to do is you need to call canvas dot draw similar to how before we were saying plt.show to actually show the figure you need to call canvas.draw so that we can actually see it and finally we do the following so we say canvas1.gettk widget this will return the tikenter widget associated with this canvas so here this is an actual ticketer object that's being returned by this function then I can call the dot pack on okay oops so then I can call the dot pack on it you can see here I have the upper frame dot pack very similar I have a t Contour widget and I call Dot pack and I do the same thing I fill up both the X and the y axis I expand equal true and I say I want to pack this on the left side means place it on the left side let's actually run and see what we have so far in our project and as you can see we have the first chart ticking up the entire space this is because we don't have any other charts yet and basically this is our how our dashboard looks like for now now let's add the second chart to add the second chart it's the exact same three lines of code first thing we specify Canvas 2 it's equal to if to a figure canvas and the figure will be figure 2 and the parent will be upper frame we also call canvas dot draw to make sure it appears on the screen then we pack our canvas so we call the get TK widget and then we pack the canvas also on the side left so this will be to the like so the first one is on the side left and then this one will be after it on the side left as well and then we expand both the x and y axis and we expand true so now running it you can see we have two different charts and they are taking up equal amounts of space inside our dashboard alright so we have the first two charts let's go ahead and add the pie chart which was our third chart so the very like the very exact same thing in this case it's canvas 3 and we're using figure three but the lines of code are the exact same so let's run it and now you can see we have our pie chart right here as well so we have the first three charts in our dashboard they filled up our upper frame which is this Frame right here what we're going to do next is we're going to create the lower frame that's going to house our two different charts here okay so let's stop this and create the lower frame so we create the lower frame as follows it will be the same process as upper frame it will be TK dot frame parent as root fill both and expand equal true and then I create canvas 4 this will be associated with figure four and it will be we just call the same things it comes four dot draw we pack it same thing and then we do the same for canvas five so it's the exact same three lines of code we did for each chart all you need to do is you need to create a figure canvas you need to draw it and then you need to get the ticket the ticket widget and actually pack it to your screen so running this now let's see what we have and as you can see we have all five charts inside our dashboard on our screen the very last thing I want to do is to add this sidebar that you saw at the start of the video to our dashboard now this part is pretty easy but before I do that one thing I want to change let's go back here and take a look at our image so you saw how before we divided this into two frames the upper frame and the lower frame now what I'm going to do is I'm also going to combine these two frames the upper frame and the lower frame into one larger frame so let's change the color and this Frame is going to be here and it will contain both the upper and the lower frame as well and then I will add a side frame to the left so this will enable me to separate my dashboard from the sidebar okay so how do I create this Frame and how do I move these into it so to create the frame let's actually call it charts frame this will be again a tk.frame the parent will be root and we just have to so this is still straightforward it's the same thing we were doing before now what I want to do is I want to change the parent of upper frame and lower frame to in fact be charts frame so you can see here I just changed the parent for both upper frame and lower frame to put them inside the chart frame okay so now these two smaller frames are inside the charts frame so we can go ahead and create another frame on the left side so to create that one we're just going to call it side frame it will be equal to TK dot frame parent will be root this time we will specify a background color so this will be another purple color to match the rest of our dashboard and this will be the background color so of course we have the packet we say the side is equal to left and we say fill equal y to take up as much space on the y-axis as possible so we've added the frame now if we try to run it okay so we have an indent adder okay running it now as you can see it's still the same so we have no changes you can't even see the frame maybe you can see just a bit of purple right here it's a very small line but the reason is in tikenter they don't assign sizes to frames unless there's something inside of it so now the size of this Frame is zero therefore it's very tiny you can't even see it now to actually see this Frame we need to add something to it in this case we're going to add a label and this will contain the title of our dashboard to create the label it's very simple so we just say label equal TK dot label it will be inside side frame so the parent will be side frame the text is just going to say dashboard it will also have a purple background a white foreground this means the font color will be white and the font will be equal to 25 in size now I just have to pack it I choose to give it some padding pad y equals 50 and Pad x equal 20. now running it to see what this looks like as you can see we now have our sidebar it says dashboard as a title and all of our charts are on this side separated from the sidebar which is what we want the very last thing I want to do is if you take a look here at the Spy charge you can see the title product breakdown is kind of cut off this is due to the screen sizing so just to fix this I'm going to separate product and break down and put them on two different lines so to do that I just scroll back up so here we have chart 3 which is the pie chart and I just add this backslash n just to place breakdown on a new line let's run it again and as you can see now it's much more clear it's much more visible you can see product breakdown are on separate lines so this is our final result this is our dashboard that we built with tikenter so let's say we are a shop we're managing sales and inventory and different things related to products so this can actually really help us we can have this dashboard as a software at our shop and we can use it in our work so feel free to expand on this project maybe add different charts maybe add different pages with other kinds of elements visualize the tables this is a great project to add to your resume it shows initiative and it shows that you have created something different using the popular python tools alright thank you so much for watching this video and I'll see you in the next one bye bye

Channel: Code First with Hala

Views: 43,758

Keywords:

Id: 2JjQIh-sgHU

Length: 26min 58sec (1618 seconds)

Published: Wed Mar 29 2023