Drawing our Data7:09 with Ben Deitch
In this video we'll see how we can draw our data onto our Canvas!
static final String PAST_WEEK = "Past Week"; static final String PAST_MONTH = "Past Month"; static final String PAST_YEAR = "Past Year"; static final String ALL_DATA = "All Data";
We just finished learning that up is down and down is up. 0:00 But don't worry, it's really not that hard to get used to. 0:05 And to help you get used to it, here's a helpful graphic. 0:08 This is a pixel phone and it has a resolution of 1080 x 1920. 0:11 Meaning this width, is 1,080 pixels and this height is Is 1,920 pixels. 0:16 And as far as our canvas goes, the origin is up here on the left. 0:23 Meaning that this point at the bottom left would be 0,1920. 0:28 Also, if we rotate the device, the origin will still be at the upper left corner. 0:33 So this time, the point of the bottom left would be (0, 1080). 0:39 Now that we've got the basics of how to draw on our canvas, 0:43 let's see if we can draw our chart. 0:46 Let's delete this drawRect statement and 0:49 then the first thing we need to do is loop through our data. 0:52 But before we can do that we need to make a decision. 0:57 You see, our data is ordered with the most recent days on top. 1:00 So if we start drawing from the left, we'll be drawing the most recent days on 1:04 the left, and the least recent days on the right, which isn't what we're going for. 1:07 To fix this, we can either start drawing from the right instead of the left or 1:12 we can just loop through our data backwards. 1:16 Either way works. 1:18 But I'm going with looping backwards. 1:19 So, for int i equals data dot size. 1:21 Minus one to give us the last index. 1:28 While i is greater than or equal to zero which is the first index, i minus minus. 1:32 And let's start off by trying to draw a rectangle from the low to the high 1:41 of that day. 1:45 First let's create a variable to hold the days stock data, 1:46 StockData and let's call it stockData equals data.get at index i. 1:52 Then let's type canvas.drawRect. 1:58 And now we just need to pass in the values for our rectangle. 2:03 But first we need to know the width of our rectangles so outside our loop. 2:06 Let's create a new float named rectWidth and 2:12 set it equal to width divided by data.size. 2:18 Then let's create another new float name to left to represent 2:26 the left edge of the current rectangle and let's set it equal to zero. 2:31 Now inside our drawRect call, 2:38 let's pass in left for the left, 2:42 height- stockData.high for the top. 2:47 Left + rectWidith for the right. 2:55 Height Minus stockData.low for the bottom. 3:01 And finally paint for the paint. 3:07 Last but not least, on the next line let's update our left variable. 3:10 Left += rectWidth. 3:13 Now if we run the app, we can see two years of stock data, awesome! 3:19 And if we rotate the device, it looks even more awesome. 3:27 Though it is kind of a lot of data, and the green on red is definitely a bit much. 3:33 Also, I'm going to make my emulator a little bigger so it's easier to see. 3:39 Back in our chart view, let's go ahead and get rid of that red background. 3:44 And while we're at it, 3:50 let's also give the user the option to look at different amounts of data. 3:51 If you're only interested in the past month our chart isn't very useful. 3:56 Over in main activity, let's add an options menu to let users select data from 4:00 the past week, Month or they can select to see all the data. 4:05 Start by copying in the form menu strings from the teacher's notes below. 4:11 Also let's change our ChartView to be a field. 4:16 Nice, next let's use control o to override the on create options menu function. 4:25 And make it return true. 4:34 To tell Android that we're handling the menu, 4:41 then let's add a line above the return, and add in our menu items. 4:43 Menu.add, and pass in our past week string. 4:49 Then lets use command or control D to 4:55 duplicate this line three times, and 4:59 then change these to past month past year and all data. 5:04 Now that that's done. 5:12 We just need to handle what happens when a user selects an option. 5:13 Let's use control o again. 5:17 But this time lets override the on options item selected method. 5:19 And just like last time, let's start by making it return true. 5:24 Then let's add a line above the return and 5:30 add a switch statement on the title of the menu item, 5:35 on item.getTitle Which 5:41 gives us an incompatible types error, get title is giving us a car sequence 5:46 which isn't allowed in a switch statement, but luckily strings are allowed. 5:51 So let's just add .tostring and there we go. 5:56 Inside the switch statement let's add a case for the past week. 6:02 Case PAST_WEEK: and if past week was the selected option 6:06 let's call a function on our chart view that doesn't exist yet called showLast. 6:13 And let's pass in a value of 7. 6:20 Coming soon this will update our chart view to show the last seven 6:23 days of trading. 6:26 But right now, we need to finish up our switch statement. 6:27 So let's add a break, and then let's copy and paste these three lines three times. 6:30 And then update the string constants 6:40 to PAST_MONTH, past year and all data. 6:46 And also the values so this should be showLast, 6:52 let's go with 30 and 365 and let's make this last one empty. 6:56 Great work! 7:03 In the next video, we'll implement the show last function and 7:04 finally be able to see less of our data. 7:07
You need to sign up for Treehouse in order to download course files.Sign up