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 see how we can draw our data onto our Canvas!
Menu Strings:
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";
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 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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up