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