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