Anvil: Web apps with nothing but Python Transcripts
Chapter: Charts and graphs
Lecture: Showing data int the plot
0:00 So final thing here
0:01 is to setup our graph with some data.
0:04 So let's all load data or something like that.
0:07 So down here we're going to write another function
0:10 kind of like this one, like that.
0:13 So, we're going to call this function
0:14 and it's going to load up all the data.
0:17 So first of all I'll go with measurements
0:19 is data_access.my_measurements.
0:23 Now, notice we're calling that here to do a little test
0:26 and we're calling it again down here.
0:28 If this was actually going every time to the server
0:30 this would be scary and slow
0:33 but remember we're caching it
0:34 it's going to go super fast.
0:36 It doesn't matter if we call it or pass it but
0:38 I'll just call it here.
0:39 So we can say, if not measurements
0:41 return cause there's nothing to do.
0:43 We don't need to add data if we have no data to add.
0:47 So now we're going to have three arrays but have
0:50 x for the x-axis, h for the heart rate
0:55 and w for the weight.
0:58 Now I don't like really short variable names most the time.
1:00 Like I wouldn't use m, I would use measurements
1:02 and I don't use p, I use plot weight history and so on.
1:06 But when doing math, you know this seems okay.
1:09 So what we're going to do is we're going to loop over
1:11 all of our measurements and we're going to get
1:13 what measurement number is that like
1:15 measurement one, two, three. We're not actually trying to
1:18 if we skip some days we're not putting gaps in the graph
1:21 we're just going to take it easy.
1:23 You can make this nicer if you want.
1:25 But what we're going to do is we're going to get the index
1:28 and we're going to get the measurement itself
1:31 in enumerate measurements like this.
1:37 That's cool, let's just do a print idx, m real quick
1:40 just to see what happens when we run that.
1:43 You can see zero, one, two, three and then
1:46 a row, a row, a row, a row.
1:48 All right so those are the four measurements
1:49 and the numbers.
1:50 Perfect, so now what we need to do
1:52 is enter the x list.
1:55 We're going to say idx plus one.
1:57 So that's one, two, three, four just because
1:59 that's the way people think.
2:01 For the height we're going to append measurement
2:04 the value that we have oh not height, sorry.
2:07 The heart is a resting heart rate.
2:11 That's what we called that I believe.
2:13 And then for the weight, we're going to say
2:15 append m of weight in pounds.
2:20 Alright, so that puts the data in to these three lists.
2:23 The next thing we got to do is just plot them in plotly.
2:26 So, so when I set the data here to be, a list.
2:31 In here we're going to create some graph objects
2:32 and when we did the drag and drop to put the plot here
2:35 it added some imports. import plotly.graph_objs as go
2:41 Okay? So here we're going to have a couple of things.
2:43 You see there's tons of stuff to work with.
2:46 We're going to have a scatter plot.
2:48 And in here we'll say x = x
2:50 not super surprising there.
2:53 y = h, for the heart rate.
2:56 The name is going to be, heart rate.
3:00 Alright, so that's one of the items in here.
3:02 Here there is one that has a bar, bar chart.
3:05 Again, x is still x.
3:07 These are the same days.
3:09 Y is going to be the weight.
3:11 And the name is going to be
3:13 weight in pounds. And this might do it.
3:17 We've got our data
3:18 we've converted it into these three arrays
3:21 or lists that we can send over in.
3:22 Let's just run and see what happens.
3:25 There it is.
3:26 Well, I haven't entered super different data.
3:28 So you can't tell so much.
3:30 But if I hover over it you see 181, 180, 179, 177
3:34 let's add one more.
3:36 Let's add one for today.
3:38 Let's say the weight is 165.
3:42 Who knows, maybe I was like super sick.
3:44 So whatever, I lost a bunch of weight.
3:47 Maybe I'm getting ready for some kind of wrestling.
3:49 I had to lose a bunch of weight in a few days.
3:52 Notice you here you can see there that did a drop off
3:54 and the heart rate went up. How cool is that?
3:56 Look how interactive this is.
3:58 Day three, four, five.
4:00 You can interact with all the different elements.
4:01 You got your heart rate, your weight.
4:03 Yeah, Plotly is pretty cool.
4:05 And it's super easy to use from anvil.
4:08 In fact, I would say this part of our app is basically done.