Dynamic Graph based on User Input - Data Visualization GUIs with Dash and Python p.3

Key Takeaways

what's going on everybody and welcome to part three of our data visualization application development tutorial with python and - in this tutorial what we're be doing is building on the last tutorial where we basically made an interactive UI that accepted some text input output that exact text input and then later we accepted some input and tried to output that input ^ - but you can get much more you can get much more advanced than just that and that's kind of what I want to exemplify here so to begin I'm going to be using pandas and pandas data reader if you don't have them you can do a pip install upgrade pandas and pandas data reader in the future the methodology that I use here could very well change if it does check out the text-based version of this tutorial and/or make complaints in the comment section if there's no updates in the text-based version and we'll do my best to find it an upgrade old source maybe I'll use something like quando or something like that but basically the objective here for me is to show you that you can create like an input field and then graph based on whatever you type in that input field so you can graph any sort of symbol like Quan doll has all kinds of things that you could you could chart from housing markets to finance to agriculture stud to everything leaves just so many data sets so anyways this is just an example like I said before I feel like every time I do something finance related people tell me they don't know and understand finance and they hate it that's totally fine just ignore the fact this is finance it's just data organized by date okay that's it so so with that let's get into it so what we're gonna do is we're going to use the pandas data reader to pull in some stock information based on whatever ticker we want to pass so I think what I'm going to do here is kind of my objective here is to show you kind of in a much more higher level kind of way how you could piece together an app like this and how truly simple it is and I feel like if I type everything line by line it's kind of pointless so I'm just going to kind of show you and if you want you can go to the text-based version of this tutorial and copy and paste along with me or you can write it out if you want but anyways this is how to use the the actual data reader you just all you're really doing is you're specifying starting time and ending time and then you're gonna read that stuff into a data frame if you don't know what data frames are and you want to learn basically the rules the lowdown and skinny of what a data frame is is it's basically like Excel for Python it's just columns and rows but you can do like a lot of operations stuff like that so it's kind of like Excel for Python but if you want to learn more you can go to Python program in it go to data analysis and I have a whole series on doing data analysis with pandas anyway with that let's go ahead and run this real quick just so you can kind of see what's going on here so you'll get this warning or at least you might and then eventually it was just might not work and that's why I made that caveat in the beginning but at the end of the day hopefully you'll get some data that's like this it's indexed by date you've got open high low close volume and again if you don't know what that means just some values so close out of this and so so that's how we can grab that data but let's say we want to actually graph that data in in - well how might we actually go about doing that so what I'm gonna do is I'm gonna leave this here and I'm just gonna move this over I'm gonna come into here now and I'm gonna just copy and paste over some code that we used in the beginning so this is the code from part one of our tutorials so if you recall it just gave a simple graph hopefully if I save this I won't have server issue let's see what happens dang it oh it didn't restart you know okay hold on everybody just wait hold on let's see if I can get it otherwise I'm gonna have to open up the old the old task manager okay let me pause okay I really thought I had outsmarted it but I guess I didn't so let's try again okay start that server and come back over here that's refresh okay now we have our basic app and hopefully all the changes I make from here the what I tried to do is save this under a different name thinking that would circumvent all these problems but it didn't so bummer anyway so now what we want to do is rather than making this graph let's graph the the pandas graph instead so so basically what we're going to do is we need to bring in those imports from pandas 4 so the data reader and the date time so so if I just come over here like this is the script that we were using I basically like I'm gonna need all this information here so if I came down here pasted that in let's make the end time I think you give you date time date time dot now so let's just do whatever the time is right now for you you lovely folks then we can bring in the actual stock info so I'm just gonna say let's just say stock equals TSLA for Tesla and and then what we'll say is we'll bring over here we go DF and then rather than Tesla there we'll just throw it in there ok now inside of this graph layout the ID we still keep that example graph the title should now be let's just make the title stock and then let's get rid of one of these X and Y's we're going to leave the line version and then rather than being the SF example we can bring in a Tesla or rather stock and then let's bring in rather so the X and the y this should be DF index and then this will be DF and we'll just do dot close so DF dot capital C close once we've done that still line still stocks I think we're gonna need hello - I don't need this either we really could just do oh my god finance okay hopefully that updates let's see it says it's restarted let's see if the - gods approve and they do whoa okay so it was that simple to bring in the graph into - now how much more challenging might it be for us to - instead bring in have this live like let the user type in the actual ticker rather than hard coding it in the script so now what we're going to do is bebop on back over to our script arena here and what are the things that we have to change well the graph itself probably should maintain well we don't have to have a default I mean so so basically what we'd want to do is have like so as you'll see here what is the app dot layout well all the app dot layout really is it's a div tag that contains a graph so rather than interactively returning some text what if we interactively just return the graph element from that - core components right can we actually do that spoiler alert you've actually already seen it so you already know the answer is and yes we can so now what we're gonna do instead is let's get rid of this here and I think what we'll do is rather than this let's just call this symbol to graph and then rather than necessarily this being a graph let me make sure it should be this I'm just going to confirm that yes so we'll start with that that div element there of what symbol do we want to graph now what we want is an input field like we had before that'll be an ID we're gonna call this input value let's leave value blank that way your scheme seems kind of silly to have that pre-populated then every time you delete it's gonna like rerun we just want to do that so leave value empty and then we're gonna say type equals text okay so now let me make some space I always like it when it's up here okay so type equals text okay so that's our input now what you're gonna want to have is somewhere to stuff the output so we're gonna do that and in HTML div so a div tag ID will be output - graph cool so now what we have to do is like we had before we need that callback so we're gonna make app dock callback and again it'll just be a nice little wrapper that contains output from this time the oh we didn't import them it was - dot dependencies so from - dot depend and sees we're gonna import input my output leaves no typos that will cause too much of a headache the pendant sees it looks like I spelled it right okay back to work output okay so inside of output we're gonna say the component underscore ID is we want to output to the output graph the component property will be the contents basically so we're just gonna call that children so that's the output now again the input maybe someone can answer this actually no no for sure why does input need to be a list does it even need to be a list don't really want to test it live due to the annoying server issues if you hit a bug so I'd rather not but I'm curious actually to be honest component ID you equals input and then the components property that is of interest to us is whatever the value of that form is so okay and for stylistic sake we'll add that on a new line okay now we want to actually make that graph so define update will call this update graph we'll call it input data and now let's see if we're okay so now what we can do do we have date time and all that we did bring that and cool so now we want to do is we're just going to do it delete I did I guess we deleted that graph I'm gonna copy and paste our graph over just to save time there's no reason for us to be doing that we shouldn't have I should have left it open in like another window or something so you guys would have to anyways shows going to continue on starting in and again that should be end dot now and that was trying to sneak it's 1:00 and rather than Tesla it should be input data and just for clarity this is the ticker we want to pull this is the source from which we want to pull it and then start time end time okay so that's going to dynamically pull the data frame now all we knew need to do is graph it and because I've already shown you this the code to graph it just for the sake of doing it the the code to graph it was with DCC so is this DCC graph and then all this stuff you've seen it before rather than graphing it all you really need to do is return it because it's going to be a part of that it's just gonna be a child of that div right here okay I believe we're ready let's check it out let's see if when I save this if we err out a hidden err okay so let's run it more time see invalid syntax what do we close at all we closed it off why didn't somebody tell me now we're screwed damn I don't want to do this again okay I'm gonna have to probably restart a server but it's gonna be okay everybody it's gonna be okay let's see let me just see let me just see we can hope and pray oh oh oh are the gods favoring us today they might be nice okay the app actually works and we didn't have to restart the server thank the Lord okay okay so that's a slightly more complex example so going from just three outputting the same text that we've input to running a really simple function on that input to now you know generating an entire graph based on that input and even then really much the code it's this stupid graph code but yeah so so pretty cool how simple this really all this stuff really is I mean to do this in like flask plus even if you were using plotly or bouquet or whatever you might be using gosh it would be a pain it just really be a pain and to make it update live like that you'd have to know so many like different loop things and it would take a while whereas this is just so sample like you just uh I really like - I'm really impressed the server thing is annoying but the ease with which you can make these apps is just crazy and it's almost like like honestly it's tempting to use - to do a lot of stuff that isn't even graph related I just haven't seen a framework like I wish I wish I could do this sort of thing and maybe you can with like giant like I would expect Django to be able to do like live updating stuff would like react and stuff this simply but to my knowledge it doesn't at least come out of the box doing that but so and correct me or someone tell me if there exists a web framework for Python that is this absolutely lovely to use because I really like this and maybe that's just because I've tried to create so many so many of these like you eyes that happen to use graphs for like data analysis and stuff anyways won't waste any more of your time pretty cool and so now what we're going to do is move on so at this point it's what we've covered is you know how to make you know basically how to have a user's interactivity updated graph one of the other really common things to do is to just have a graph automatically update itself so in the next tutorial what I'm going to do is show how we can create live updating graphs that just update based on like an interval kind of like the the matplotlib graphs and stuff and pretty much everything is going to update based on an interval usually it's a little more challenging to update based on and like a like a database update or something like that but as you could imagine it actually wouldn't be the end of the world to do that via - but anyways we're just gonna update via interval so that's what we're gonna do in the next tutorial if you have questions comments concerns suggestions whatever feel free to leave them below also feel free to join our discord link in the description otherwise I'll see you in the next tutorial