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