# Core Graphics Tutorial Part 2: Gradients and Contexts

**URL:** <https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559>\
**Category:** 🎓 Courses & Articles\
**Created:** [March 4, 2016, 10:51am UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559 "2016-03-04T10:51:20Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![caroline](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/caroline/32/111867_2.png) [@caroline](https://forums.kodeco.com/u/caroline)\
**Post date:** [September 18, 2016, 10:27pm UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/22 "2016-09-18T22:27:07Z")

</div>

@msheaver - The line

```
let context = UIGraphicsGetCurrentContext()

```

only gives you a handle to the current context being used by `draw(_:)`. `draw(_:)` always draws into its context, so the context is always there.

---

<div class="post-metadata">

**Author:** ![msheaver](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/msheaver/32/35604_2.png) [@msheaver](https://forums.kodeco.com/u/msheaver)\
**Post date:** [September 19, 2016, 12:37am UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/23 "2016-09-19T00:37:41Z")

</div>

@caroline, I thought that that was the case, and many thanks for confirming it for me!

---

<div class="post-metadata">

**Author:** ![anishparajuli](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/anishparajuli/32/79270_2.png) [@anishparajuli](https://forums.kodeco.com/u/anishparajuli)\
**Post date:** [September 28, 2016, 5:26am UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/25 "2016-09-28T05:26:03Z")

</div>

Thanks for the great tutorial.I have to set the Y axis minimum and maximum value .How can i do that?

---

<div class="post-metadata">

**Author:** ![caroline](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/caroline/32/111867_2.png) [@caroline](https://forums.kodeco.com/u/caroline)\
**Post date:** [September 28, 2016, 5:57am UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/26 "2016-09-28T05:57:51Z")

</div>

I don’t think I understand the question. The y axis maxValue is taken from the maximum value in graphPoints, but you could change that, and you could set a minimum value and change the position calculations accordingly.

---

<div class="post-metadata">

**Author:** ![anishparajuli](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/anishparajuli/32/79270_2.png) [@anishparajuli](https://forums.kodeco.com/u/anishparajuli)\
**Post date:** [September 28, 2016, 7:44am UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/27 "2016-09-28T07:44:37Z")

</div>

yes ,i need to set custom y axis min value…Currently its 0…I have no idea to change that minimum value.

---

<div class="post-metadata">

**Author:** ![caroline](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/caroline/32/111867_2.png) [@caroline](https://forums.kodeco.com/u/caroline)\
**Post date:** [September 28, 2016, 8:04am UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/28 "2016-09-28T08:04:36Z")

</div>

@anishparajuli - I still don’t understand. Even with a minimum value, the graph would look the same, just the label containing 0 on the right hand side would have a different value.

The y points are calculated here:

```auto
   let columnYPoint = { (graphPoint:Int) -> CGFloat in
      var y:CGFloat = CGFloat(graphPoint) /
        CGFloat(maxValue) * graphHeight
      y = graphHeight + topBorder - y // Flip the graph
      return y

```

I guess you could add a minimum value to the returned y point if that’s what you’re after.

---

<div class="post-metadata">

**Author:** ![anishparajuli](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/anishparajuli/32/79270_2.png) [@anishparajuli](https://forums.kodeco.com/u/anishparajuli)\
**Post date:** [September 28, 2016, 10:39am UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/31 "2016-09-28T10:39:15Z")

</div>

@caroline  
Ok i will be more simpler…  
//Weekly sample data  
var graphPoints:[Int] = [4, 2, 6, 4, 5, 8, 3]

As in the tuorial the y axis range is from 0 to 8…

How can i set graph y-axis values between 2 to 6?

---

<div class="post-metadata">

**Author:** ![caroline](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/caroline/32/111867_2.png) [@caroline](https://forums.kodeco.com/u/caroline)\
**Post date:** [September 28, 2016, 11:44am UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/32 "2016-09-28T11:44:46Z")

</div>

@anishparajuli - I’m not very good at maths, but something like this seems to work:

```
let maxValue = 6
let minValue = 2
let columnYPoint = { (graphPoint:Int) -> CGFloat in
  var y:CGFloat = CGFloat(graphPoint - minValue) /
    CGFloat(maxValue - minValue) * graphHeight
  y = graphHeight + topBorder - y // Flip the graph
  return y
}

```

---

<div class="post-metadata">

**Author:** ![anishparajuli](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/anishparajuli/32/79270_2.png) [@anishparajuli](https://forums.kodeco.com/u/anishparajuli)\
**Post date:** [September 28, 2016, 12:06pm UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/33 "2016-09-28T12:06:16Z")

</div>

@caroline Wow…Thanks a lot.It works.  
I appreciate your time.Have a nice day

---

<div class="post-metadata">

**Author:** ![jimw338](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/jimw338/32/81494_2.png) [@jimw338](https://forums.kodeco.com/u/jimw338)\
**Post date:** [October 3, 2016, 8:13pm UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/34 "2016-10-03T20:13:52Z")

</div>

When you drag the UITapGestureRecognizer to the Container view, why does it show up at the very bottom of the object hierarchy, instead of being “inside” the Container view object? (well, that answer is obvious - “it just does…”) That would seem that having the gesture recognizer create/indicate a recognizer that only functioned within a particular view.

(If Cocoa Touch can do this that is. Of course, Apple already did 20 years ago on the Newton with TRecognizer::EnableArea(RecArea\*, RefArg)… (I’m guessing, since TRecognizer is sadly isn’t documented, as with the rest of the NewtonOS) Maybe they’ve forgotten? 🙂

---

<div class="post-metadata">

**Author:** ![caroline](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/caroline/32/111867_2.png) [@caroline](https://forums.kodeco.com/u/caroline)\
**Post date:** [October 3, 2016, 9:43pm UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/35 "2016-10-03T21:43:40Z")

</div>

@jimw338 - It just does 😜

It annoys me too. But I guess objects that aren’t views don’t go into the hierarchy.

---

<div class="post-metadata">

**Author:** ![ecoapps](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/ecoapps/32/45354_2.png) [@ecoapps](https://forums.kodeco.com/u/ecoapps)\
**Post date:** [October 26, 2016, 10:27am UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/36 "2016-10-26T10:27:03Z")

</div>

Firstly, thank you for this wonderful tutorial. This is the best and in-depth tutorial I could find online about plotting.

My question is regarding the block of code below:

```
//Draw the circles on top of graph stroke
for i in 0..<graphPoints.count {
  var point = CGPoint(x:columnXPoint(i), y:columnYPoint(graphPoints[i]))
  point.x -= 5.0/2
  point.y -= 5.0/2

  let circle = UIBezierPath(ovalInRect: 
           CGRect(origin: point, 
                    size: CGSize(width: 5.0, height: 5.0)))
  circle.fill()
}

```

How can I modify this code to add different labels to each data point like the one below:

 ![](https://raywenderlich-com-v3-forums.s3.amazonaws.com/original/3X/6/e/6e3a30a69db3f52186c33369fbf856500c9698ed.png)

Could you please help me in this regard.

---

<div class="post-metadata">

**Author:** ![ecoapps](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/ecoapps/32/45354_2.png) [@ecoapps](https://forums.kodeco.com/u/ecoapps)\
**Post date:** [October 26, 2016, 10:29am UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/37 "2016-10-26T10:29:36Z")

</div>

I have posted this in StackOverFlow with many related questions. It would be great if you can help with them as well.

> <https://stackoverflow.com/questions/40258956/add-uibuttons-to-data-points-in-a-line-graph-plotting-date-and-time-in-x-axis>

---

<div class="post-metadata">

**Author:** ![jimw338](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/jimw338/32/81494_2.png) [@jimw338](https://forums.kodeco.com/u/jimw338)\
**Post date:** [October 26, 2016, 6:19pm UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/38 "2016-10-26T18:19:04Z")

</div>

I’ve up to the point that sets the UILabels text, after figuring out what changes Apple has made to the calendar classes. I want to programmatically space the labels out. I can set the view.center coordinates easily enough, so that’s one way.

I read somewhere (can’t find it right now) that there’s not a way to “evenly space views” with auto-constraints, without using transparent “spacer” views between then. The view in question was a keyboard and the question was about spacing the keys.

Can I use auto-constraint to make (in IB or in code) a single constraint that would apply to multiple views? In this case, it would be a vertical-center-to-GraphView-edge constraint on all the labels at once.

Also, is there a method called when the view is resized? (Although the iOS doesn’t [yet?] have a multiple-window interface except for side-by-side mode). Is this “layoutMarginsDidChange”? Or is “draw” just called again?

---

<div class="post-metadata">

**Author:** ![caroline](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/caroline/32/111867_2.png) [@caroline](https://forums.kodeco.com/u/caroline)\
**Post date:** [October 27, 2016, 12:07am UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/39 "2016-10-27T00:07:09Z")

</div>

@jimw338 - you don’t have to use “spacer” views any more - iOS 9 introduced layout guides.

I wrote a tutorial on coding constraints, but it doesn’t mention layout guides very much:

[https://www.raywenderlich.com/125718/coding-auto-layout](https://www.raywenderlich.com/125718/coding-auto-layout)

You might be looking for `layoutSubviews()`. This is called after constraints have been calculated, and calculates frames for views. (This is mentioned in the above tutorial.)

---

<div class="post-metadata">

**Author:** ![caroline](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/caroline/32/111867_2.png) [@caroline](https://forums.kodeco.com/u/caroline)\
**Post date:** [October 27, 2016, 1:03am UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/40 "2016-10-27T01:03:53Z")

</div>

@ecoapps - thank you for the kind words.

You have the x and y points where the circles are drawn. So all you have to do is either draw the text as in my example below, or if you want labels or buttons, put them in an array and work out the corresponding points and change the center property of the labels.

I added a property to the view:

```
var labelText: [NSString] = ["A", "B", "C", "D", "E", "F", "G"]

```

Then in the for loop that you quoted above, I added this at the end:

```
  let textPoint = CGPoint(x: point.x, y: point.y + 8)
  labelText[i].draw(at: textPoint, withAttributes: nil)

```

This resulted in this graph:

 ![](https://raywenderlich-com-v3-forums.s3.amazonaws.com/original/3X/4/e/4e4e25cc3d98dbec43adbfdf6c4593a37480fa26.png)

This obviously needs a bit of cleaning up as to exact text positions and colors, but that’s the general principle.

Edit: SwiftCharts looks pretty good.

---

<div class="post-metadata">

**Author:** ![ecoapps](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/ecoapps/32/45354_2.png) [@ecoapps](https://forums.kodeco.com/u/ecoapps)\
**Post date:** [October 27, 2016, 12:08pm UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/41 "2016-10-27T12:08:59Z")

</div>

@caroline  
Thank you for your reply and sharing the code to add labels at data points. I tried adding your code in the locations below. However, as you can see, I am getting an error message. Not sure how to resolve it. Could you please help.

 ![](https://raywenderlich-com-v3-forums.s3.amazonaws.com/original/3X/7/9/793773f40e8ffd530367750fab0cb2924f69f247.png)

---

<div class="post-metadata">

**Author:** ![caroline](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/caroline/32/111867_2.png) [@caroline](https://forums.kodeco.com/u/caroline)\
**Post date:** [October 27, 2016, 1:16pm UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/42 "2016-10-27T13:16:47Z")

</div>

Ah - I was using Xcode 8 and Swift 3. If you’re on Swift 2, then it’s drawAtPoint. This one:  
[https://developer.apple.com/reference/foundation/nsstring/1533109-drawatpoint](https://developer.apple.com/reference/foundation/nsstring/1533109-drawatpoint)

```
    labelText[i].drawAtPoint(textPoint, withAttributes: nil)

```

(I think)

---

<div class="post-metadata">

**Author:** ![max\_w](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/max_w/32/46907_2.png) [@max\_w](https://forums.kodeco.com/u/max_w)\
**Post date:** [November 8, 2016, 9:14pm UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/43 "2016-11-08T21:14:56Z")

</div>

Hi Caroline!  
Thank you for the great tutorial!  
Do you know if i can use the graph in this style for one of my apps or will apple reject it when i submit it to the app store because it looks like their graphs in the health app?

---

<div class="post-metadata">

**Author:** ![caroline](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/caroline/32/111867_2.png) [@caroline](https://forums.kodeco.com/u/caroline)\
**Post date:** [November 8, 2016, 9:40pm UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/44 "2016-11-08T21:40:29Z")

</div>

@max_w - I haven’t submitted myself, but from memory there are a number of apps that use the same style of graph (I can’t find one now!). I don’t think it would be grounds for rejection if the app is not a complete clone.

However - the style of apps has slightly changed now to use fewer gradients. For example the graph in this app from Runtastic:

> **[‎adidas Running: Track Cardio](https://apps.apple.com/us/app/id336599882?ign-mpt=uo%3D4)**
>
> ‎Join over 170m people who have used adidas Running. We're more than just a run tracker. With regular challenges and virtual races, you'll always be motivated. Get active with your favorite sports like running, hiking, cycling, yoga, and more. Keep a...

[Previous page](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559.md?page=1)

[Next page](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559.md?page=3)