**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 use price information to make our chart fit better on the screen!

When we look at our data on one
of the shorter time frames,
0:00

it kinda just looks like a line.
0:02

To fix this, instead of plotting our
points just as they are, let's modify
0:04

our graph to have the lowest value of the
subset be the bottom of the screen, and
0:09

the highest value be at the top.
0:13

That way, no matter what time frame we
choose, our data will be easily visible.
0:15

To do this let's create
two new float fields,
0:20

for the maxPrice and the minPrice.
0:27

Then, inside the original
show last function,
0:31

below where we update our subset,
let's call a method that doesn't exist yet
0:34

called updateMaxAndMin.
0:39

And then lets use alt Enter to create it.
0:45

Inside our new function,
let's start off by setting maxPrice equal
0:48

to something much lower than
anything in our data like, -1.
0:53

And let's also set minPrice equal to
0:57

something much higher, like 99999.
1:01

Then we just need to loop through our
subset and update our max and min.
1:06

So let's type, for (StockData) which
1:10

we'll call stockData and subset.
1:15

And for each stockData,
1:20

if stockData.high is
greater than maxPrice,
1:23

then let's set maxPrice
equal to stockData.high.
1:29

Likewise, if stockData.low
is less than minPrice,
1:37

let's set minPrice equal to stockData.low.
1:44

Nice, now that we've got the maximum and
minimum of our subset,
1:50

let's see if we can't use those to
make our chart look a lot nicer.
1:53

To do this, let's create a function named,
getYPosition, that takes on a price and
1:56

returns the y-coordinate for that price.
2:01

So let's add some room
after our on draw call and
2:04

then type private float getYPosition,
2:08

which takes in another float named price.
2:12

Then, inside this function, let's start
off by figuring out where we fall
2:19

between our minPrice and our maxPrice.
2:23

So let's create a new
float named scaleFactorY,
2:26

and set it equal to, in parentheses,
2:32

price minus minPrice divided by,
2:36

also in parentheses,
maxPrice minus minPrice.
2:40

So the y-position of our price
2:45

would just be the height of
our canvas times scaleFactorY.
2:49

But since our canvas is flipped,
2:53

what we really need is
the height minus that value.
2:55

So let's return,
3:00

height minus height times scaleFactorY.
3:03

And back inside our call to drawRect,
3:09

instead of passing in height
minus stockData.high,
3:12

let's call our new getYPposition
function and pass in stockData.high.
3:18

And let's do the same thing for
stockData.low.
3:25

Awesome.
3:31

For the last step, since we now need
a max and min to draw anything,
3:32

we need to call our update max and
min function and our constructor.
3:35

So inside our constructor, let's delete
the line where we set subset equal to data
3:39

and instead let's just call
showLast with no parameters.
3:45

Which will update our subset and
our max and min, perfect.
3:50

Now let's run the app and
see what happens.
3:53

Looks good so far.
4:00

It's the same graph as before, but
now it's using a lot more of the screen.
4:01

And if we click through
to the other views.
4:04

They all look just as good.
4:11

In the next video,
4:13

we'll start turning these boring green
bars into exciting colorful candlesticks.
4:14

You need to sign up for Treehouse in order to download course files.

Sign up