1 00:00:00,280 --> 00:00:02,790 When we look at our data on one of the shorter time frames, 2 00:00:02,790 --> 00:00:04,680 it kinda just looks like a line. 3 00:00:04,680 --> 00:00:09,144 To fix this, instead of plotting our points just as they are, let's modify 4 00:00:09,144 --> 00:00:13,746 our graph to have the lowest value of the subset be the bottom of the screen, and 5 00:00:13,746 --> 00:00:15,651 the highest value be at the top. 6 00:00:15,651 --> 00:00:20,963 That way, no matter what time frame we choose, our data will be easily visible. 7 00:00:20,963 --> 00:00:27,136 To do this let's create two new float fields, 8 00:00:27,136 --> 00:00:31,900 for the maxPrice and the minPrice. 9 00:00:31,900 --> 00:00:34,940 Then, inside the original show last function, 10 00:00:34,940 --> 00:00:39,890 below where we update our subset, let's call a method that doesn't exist yet 11 00:00:39,890 --> 00:00:43,145 called updateMaxAndMin. 12 00:00:45,110 --> 00:00:47,040 And then lets use alt Enter to create it. 13 00:00:48,570 --> 00:00:53,413 Inside our new function, let's start off by setting maxPrice equal 14 00:00:53,413 --> 00:00:57,852 to something much lower than anything in our data like, -1. 15 00:00:57,852 --> 00:01:01,916 And let's also set minPrice equal to 16 00:01:01,916 --> 00:01:06,775 something much higher, like 99999. 17 00:01:06,775 --> 00:01:10,980 Then we just need to loop through our subset and update our max and min. 18 00:01:10,980 --> 00:01:15,902 So let's type, for (StockData) which 19 00:01:15,902 --> 00:01:20,128 we'll call stockData and subset. 20 00:01:20,128 --> 00:01:23,504 And for each stockData, 21 00:01:23,504 --> 00:01:29,937 if stockData.high is greater than maxPrice, 22 00:01:29,937 --> 00:01:37,197 then let's set maxPrice equal to stockData.high. 23 00:01:37,197 --> 00:01:44,213 Likewise, if stockData.low is less than minPrice, 24 00:01:44,213 --> 00:01:50,330 let's set minPrice equal to stockData.low. 25 00:01:50,330 --> 00:01:53,810 Nice, now that we've got the maximum and minimum of our subset, 26 00:01:53,810 --> 00:01:56,910 let's see if we can't use those to make our chart look a lot nicer. 27 00:01:56,910 --> 00:02:01,670 To do this, let's create a function named, getYPosition, that takes on a price and 28 00:02:01,670 --> 00:02:04,020 returns the y-coordinate for that price. 29 00:02:04,020 --> 00:02:08,849 So let's add some room after our on draw call and 30 00:02:08,849 --> 00:02:12,956 then type private float getYPosition, 31 00:02:12,956 --> 00:02:17,320 which takes in another float named price. 32 00:02:19,820 --> 00:02:23,920 Then, inside this function, let's start off by figuring out where we fall 33 00:02:23,920 --> 00:02:26,850 between our minPrice and our maxPrice. 34 00:02:26,850 --> 00:02:32,358 So let's create a new float named scaleFactorY, 35 00:02:32,358 --> 00:02:36,553 and set it equal to, in parentheses, 36 00:02:36,553 --> 00:02:40,356 price minus minPrice divided by, 37 00:02:40,356 --> 00:02:45,888 also in parentheses, maxPrice minus minPrice. 38 00:02:45,888 --> 00:02:49,930 So the y-position of our price 39 00:02:49,930 --> 00:02:53,400 would just be the height of our canvas times scaleFactorY. 40 00:02:53,400 --> 00:02:55,330 But since our canvas is flipped, 41 00:02:55,330 --> 00:02:58,590 what we really need is the height minus that value. 42 00:03:00,410 --> 00:03:03,116 So let's return, 43 00:03:03,116 --> 00:03:09,210 height minus height times scaleFactorY. 44 00:03:09,210 --> 00:03:12,826 And back inside our call to drawRect, 45 00:03:12,826 --> 00:03:18,025 instead of passing in height minus stockData.high, 46 00:03:18,025 --> 00:03:25,157 let's call our new getYPposition function and pass in stockData.high. 47 00:03:25,157 --> 00:03:27,439 And let's do the same thing for stockData.low. 48 00:03:31,642 --> 00:03:32,390 Awesome. 49 00:03:32,390 --> 00:03:35,870 For the last step, since we now need a max and min to draw anything, 50 00:03:35,870 --> 00:03:39,270 we need to call our update max and min function and our constructor. 51 00:03:39,270 --> 00:03:43,500 So inside our constructor, let's delete the line where we set subset equal to data 52 00:03:45,190 --> 00:03:50,180 and instead let's just call showLast with no parameters. 53 00:03:50,180 --> 00:03:53,920 Which will update our subset and our max and min, perfect. 54 00:03:53,920 --> 00:03:55,905 Now let's run the app and see what happens. 55 00:04:00,119 --> 00:04:01,310 Looks good so far. 56 00:04:01,310 --> 00:04:04,950 It's the same graph as before, but now it's using a lot more of the screen. 57 00:04:04,950 --> 00:04:07,437 And if we click through to the other views. 58 00:04:11,565 --> 00:04:13,262 They all look just as good. 59 00:04:13,262 --> 00:04:14,217 In the next video, 60 00:04:14,217 --> 00:04:18,540 we'll start turning these boring green bars into exciting colorful candlesticks.