Anvil: Web apps with nothing but Python Transcripts
Chapter: Charts and graphs
Lecture: Styling the plot
0:00 We saw the chart was on the screen
0:02 but it was empty.
0:03 It had no styles and it had no data.
0:05 So we're going to address this issue in two steps.
0:08 Let's first just make it look good.
0:11 Now, here's the thing about working with these charts:
0:15 We come over here and we can click on them
0:16 and we can get to some of their details like
0:20 things like what their height is
0:23 their tool tip, their user data
0:25 some of their events and things like this.
0:28 But to really program them and interact with them
0:30 what we have to do is basically use the Plotly API.
0:35 So I'm going to go over here and I'm going to put
0:36 some design stuff to make it look good
0:39 but there's no point in you watching me type it in.
0:42 It's just a bunch of, this part of the chart has this width
0:45 and this part has this line with this color and so on
0:48 so here it is. Phew, look at that.
0:50 We're going to say go to our plot here and set it's title
0:54 to "Your Quantitative Self."
0:56 Axis is the day
0:58 whether or not we'll show grids and ticks and colors.
1:02 The Y axis is going to have two things:
1:04 It's going to be your weight
1:05 and your beats per minute for your heart
1:08 and we'll have different types of graph.
1:10 One will be a line graph and one will be bars.
1:13 When I put all this on there
1:15 Now let's just run it and oops
1:18 maybe not run it just yet cause if we run it
1:20 nothing will happen.
1:21 So let's go over here and actually call this part here.
1:25 Okay. Give that a shot. Oh! Wow.
1:30 Remember I deleted that element and put it into a card?
1:33 Well, I forgot to rename it.
1:34 Let's do that real quick.
1:39 Here we go. Now we have that right there.
1:41 Let's give it a shot. There we have it.
1:44 It's not super interesting because our chart is empty
1:46 but look, we have all these cool little interactive
1:49 download as a .png, save and edit it to the cloud
1:53 we can pan and zoom and scale
1:55 and do all sorts of interesting stuff to it.
1:58 We have no data so I'm not going to do that yet.
2:00 Here it is. We have our days
2:02 we have our pounds and beats per minute
2:04 and our quantitative self.
2:05 So, getting the chart styled
2:07 even though you don't actually see the graph
2:09 element just yet 'cause we don't have any data
2:11 getting it styled we're off to a good start there.