Creating Candlesticks4:44 with Ben Deitch
In this video we'll make our graph look a lot better by adding in the candlesticks!
We just finished scaling our chart. 0:00 And now, it's time to get to work on our candlesticks. 0:02 But, before we get started, here's a quick refresher of what we're going for. 0:05 For each day, we have the open, the close, the high, and the low. 0:09 And, to draw a candlestick, we just draw a white line from the high to low and 0:14 then draw a rectangle from open to the close. 0:19 And that rectangle will be green or red depending on if the price went up or down. 0:23 Back on the code. 0:28 Let's start by updating our rectangle to be drawn from the open to the close. 0:29 The first thing will need to do is figure out which of those is the bottom and 0:34 which is the top. 0:38 So inside onDraw right below our left variable, let's create two 0:39 more float variables for the bottom and the top. 0:44 Then, inside the for loop, let's add a line after we get our stock data element 0:49 and then check if stockData.close is greater than or 0:53 equal to stockData.open. 0:59 And if it is, let's set our paint color to green. 1:03 So, paint.setColor Color.GREEN and 1:06 then let's set top = stockData.close and 1:12 bottom = stockData.open. 1:17 Then let's add an L statement and copy and paste in the three lines we just typed. 1:23 And let's change the color to color.red the top to stockData.open and 1:31 the bottom to stockData.close. 1:37 Finally instead of passing in stockData.high and stockData.low, 1:41 let's pass in top and 1:47 bottom. 1:52 Now if we run the app, we should have a bunch of colored rectangles 1:55 that are a little shorter than they were before. 1:59 And we do, perfect. 2:02 Now we just need to add in the lines from the low price to the high price. 2:04 To do that, let's start by creating a new paint field for our lines. 2:09 Let's use command or Ctrl+D to duplicate the existing paint field. 2:13 And then rename it to stroke paint. 2:17 Then, in our constructor, let's set our stroke color to white. 2:22 strokePaint.setColor(Color.WHITE). 2:26 Also, now that we're setting our paint color, and the onDraw call, 2:30 we can delete this set color line. 2:35 Next inside the onDraw function above our call to draw erect, 2:37 let's add a call to canvas.drawLine. 2:42 And for the startX parameter, lets pass in left + rectWidth / 2:47 2 to put it squarely in the middle of a rectangle. 2:54 Then let's pass in, getYPosition of stockData.high for 2:59 the startY parameter and for the stopX parameter. 3:04 Since it's a vertical line, let's just use left, 3:09 + rectWidth / 2 again. 3:17 And let's put that on a new line. 3:20 Then let's pass in getYPosition of stockeData.low for the stopY parameter. 3:23 And finally let's pass in our strokePaint, for the paint. 3:32 Then let's run the app. 3:38 And there's our candlesticks. 3:42 Though if we flip through some of these other views, 3:44 They might be a little too skinny. 3:50 But lucky for us there's an easy way to fix this. 3:53 Back in the code inside the onDraw function right below where we set 3:56 rectWidth, lets call strokePaint.setstrokeWidth and 4:00 let's pass in rectWidth / 8. 4:09 I've tried out a few different widths and this one looks pretty good. 4:12 Now that we've got that, let's run the app again and see if it looks any better. 4:16 It doesn't look so different for the all time scale, but, 4:21 if we pick past month, then we can see it a lot better. 4:24 Awesome. 4:28 Also, notice that since we're drawing our rectangles, after we've drawn our lines, 4:29 they get drawn on top. 4:33 If we put the calls in the other order, 4:34 we'd have the lines on top of our rectangles. 4:36 In the next video, we'll see how to draw text on the canvas, 4:39 by adding labels to our chart. 4:42
You need to sign up for Treehouse in order to download course files.Sign up