Using More of the Screen4:18 with Ben Deitch
In this video we'll see how we can use price information to make our chart fit better on the screen!
When we look at our data on one of the shorter time frames, 0:00 it kinda just looks like a line. 0:02 To fix this, instead of plotting our points just as they are, let's modify 0:04 our graph to have the lowest value of the subset be the bottom of the screen, and 0:09 the highest value be at the top. 0:13 That way, no matter what time frame we choose, our data will be easily visible. 0:15 To do this let's create two new float fields, 0:20 for the maxPrice and the minPrice. 0:27 Then, inside the original show last function, 0:31 below where we update our subset, let's call a method that doesn't exist yet 0:34 called updateMaxAndMin. 0:39 And then lets use alt Enter to create it. 0:45 Inside our new function, let's start off by setting maxPrice equal 0:48 to something much lower than anything in our data like, -1. 0:53 And let's also set minPrice equal to 0:57 something much higher, like 99999. 1:01 Then we just need to loop through our subset and update our max and min. 1:06 So let's type, for (StockData) which 1:10 we'll call stockData and subset. 1:15 And for each stockData, 1:20 if stockData.high is greater than maxPrice, 1:23 then let's set maxPrice equal to stockData.high. 1:29 Likewise, if stockData.low is less than minPrice, 1:37 let's set minPrice equal to stockData.low. 1:44 Nice, now that we've got the maximum and minimum of our subset, 1:50 let's see if we can't use those to make our chart look a lot nicer. 1:53 To do this, let's create a function named, getYPosition, that takes on a price and 1:56 returns the y-coordinate for that price. 2:01 So let's add some room after our on draw call and 2:04 then type private float getYPosition, 2:08 which takes in another float named price. 2:12 Then, inside this function, let's start off by figuring out where we fall 2:19 between our minPrice and our maxPrice. 2:23 So let's create a new float named scaleFactorY, 2:26 and set it equal to, in parentheses, 2:32 price minus minPrice divided by, 2:36 also in parentheses, maxPrice minus minPrice. 2:40 So the y-position of our price 2:45 would just be the height of our canvas times scaleFactorY. 2:49 But since our canvas is flipped, 2:53 what we really need is the height minus that value. 2:55 So let's return, 3:00 height minus height times scaleFactorY. 3:03 And back inside our call to drawRect, 3:09 instead of passing in height minus stockData.high, 3:12 let's call our new getYPposition function and pass in stockData.high. 3:18 And let's do the same thing for stockData.low. 3:25 Awesome. 3:31 For the last step, since we now need a max and min to draw anything, 3:32 we need to call our update max and min function and our constructor. 3:35 So inside our constructor, let's delete the line where we set subset equal to data 3:39 and instead let's just call showLast with no parameters. 3:45 Which will update our subset and our max and min, perfect. 3:50 Now let's run the app and see what happens. 3:53 Looks good so far. 4:00 It's the same graph as before, but now it's using a lot more of the screen. 4:01 And if we click through to the other views. 4:04 They all look just as good. 4:11 In the next video, 4:13 we'll start turning these boring green bars into exciting colorful candlesticks. 4:14
You need to sign up for Treehouse in order to download course files.Sign up