This workshop will be retired on May 1, 2025.
Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video we'll make our graph look a lot better by adding in the candlesticks!
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up