Anvil: Web Apps with Nothing but Python Transcripts
Chapter: Charts and graphs
Lecture: Adding the plot
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Here's the component that represents the logged in view on the Home screen. When we run it, this section right here this is actually what you see.
0:09
Now before we actually get to adding the chart if we move around between all these different things you'll see that this one has a pretty good
0:17
add measurement top piece, but the rest of 'em they're really kind of boring. What I want to do is have something that looks like this
0:25
instead this. Let's go ahead and put that like so. I'll just take this one out. Now let's just change the value
0:32
it's just going to be something like Your Health History. We don't want the scale let's maybe put some kind of chart
0:42
so we'll do a little search and the bar chart that looks pretty good to us. Great. Everything's working in terms of having this look
0:51
we're going to just now add our chart. That's it, we've now integrated Plotly but let's do a little bit more work here. Let's go ahead and give it
1:01
a better name instead of Plot One let's call it Plot Weight History so we know what this is about. Really it's weight and heart rate, but that's fine.
1:10
That's it. We're going to have this here. It would be great to just leave it like this and put it here but it turns out that what we need to do
1:17
is we need to only show this element if they actually have entered measurements. If they don't we want to maybe show them
1:25
a picture and a button that says Hey, you haven't added any history to your health click the button to get started, right?
1:31
Kind of an onboarding type thing. Let's roll that back. What we're going to do is we're going to put a card down here
1:37
like so, and we're going to put out plot into that. Perfect, and let's give this card a special name. We'll call it card_with_data, like so
1:49
and let's it right while we're at it another one at the bottom and only one of these is going to be visible at any moment.
1:55
This would be card_no_data, something like that. When the thing loads it's going to show either the one data or the one without data.
2:05
Honestly I think just having this chart here that's probably what we want, maybe we'd have a button to have more, I'm not sure
2:11
we're just going to leave it like this for now, though. However for the one that has no data what I want to do is I want to put a picture here
2:17
to kind of inspire them what it might look like. I want to put some text below that and below the text I want to put a big ole button like this.
2:28
Let's put something here for the image. Let's go down here and where's our data? We're just going to load
2:34
I got this thing on my desktop here, just a picture no data, something like that. Let's change that to Zoom To Fill
2:42
so it looks nice and big, along those lines. Then maybe we could make this a little bit taller there we go. It's going to look nice.
2:50
Now for the label, I just want to put some text You haven't recorded any measurements yet as soon as we have some data on you
2:56
we'll be able to track it here. Finally, for our button, let's put the text Add your first measurement, like so. We could also give it a role.
3:10
Secondary, sure let's go with that. Let's give it the plus role, plus plus circle I'll go with the plus circle.
3:20
This is going to be our button, and of course you want these elements to be named because we're going to have an event handler for them.
3:29
Okay, I think everything's working. Let's go ahead and run it and see what's here. Probably not what we're expecting or hoping to have.
3:35
Well there's our chart, that's not really doing anything and here is our image. Oh it looks like I didn't put that in the second card
3:43
so I got to drag that over, but that's no big deal. We can just take this and we'll put it down in here. There we go, now it's in the right spot.
3:55
Notice we saw both of them. Let's go and write the code to figure out whether or not which one we're going to show. Let's just set this to be
4:04
even though we were pulling this in let's set this just to show the empty view at first 'cause that's going to be real easy.
4:10
We'll just say self.card_with_no_data Not Visible it's going to be whether or not the length of measurements is zero and then we'll have
4:21
self.card_with_data Not Visible something super similar, but greater than. Now we can run it. First I'm setting it just at no data, see how it works
4:35
perfect you have no data so you haven't recorded anything, click here to get started. Maybe on large screens we want to center this text
4:44
probably would look good, but there you have it. That's working well. We saw before that we were actually getting three or four measurements back here
4:51
so let's go get those again. Here you hate it, a completely empty and boring chart but the visibility thing that we're working on
4:59
is totally good. What's up next? Well, we've got to put the data into the chart and figure the chart to be a bar chart.
5:05
We're off to a good start with this graph here.