How to draw a semi-circle using swift iOS 9 and on the basis of one value draw angle and fill that only part with color

Question

I want to draw the two semi circles like this as shown in picture (the below one)

I'm trying it but did not get anything. Tried some chart api and a few code to draw pie chart from stackoverflow but they need to edit and I don't know about Core Graphics. I am working on Xcode 7.3.1 and iOS 9.

My Question is:
How do I draw a semi-circle which take one value and first convert that value to get its equivalent angle and then draw an arc of this angle and fill color in that part?

Answer 1

The below code runs in the XCode iOS Playground. It creates a custom UIView class and draws two pie slices. The start and end angle are specified in percent of a full circle.

You can easily extend it to display more or less slices depending on the data you have.

The drawRect method creates a bezier path that starts in the center, then adds an arc segment and finally closes the path so it can be filled.

Xcode 10.2.1/Swift 4.2 Update

class PieChart : UIView {

    override func draw(_ rect: CGRect) {

        drawSlice(rect: rect, startPercent: 0, endPercent: 50, color: .green)
        drawSlice(rect: rect, startPercent: 50, endPercent: 75, color: .red)
    }

    private func drawSlice(rect: CGRect, startPercent: CGFloat, endPercent: CGFloat, color: UIColor) {
        let center = CGPoint(x: rect.origin.x + rect.width / 2, y: rect.origin.y + rect.height / 2)
        let radius = min(rect.width, rect.height) / 2
        let startAngle = startPercent / 100 * CGFloat.pi * 2 - CGFloat.pi
        let endAngle = endPercent / 100 * CGFloat.pi * 2 - CGFloat.pi
        let path = UIBezierPath()
        path.move(to: center)
        path.addArc(withCenter: center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: true)
        path.close()
        color.setFill()
        path.fill()
    }
}

let pieChart = PieChart(frame: CGRect(x: 0.0, y: 0.0, width: 300.0, height: 300.0))
pieChart.backgroundColor = .clear

---

An Unnamed Earlier Version

import UIKit

class PieChart : UIView {

    override func drawRect(rect: CGRect) {

        drawSlice(rect, startPercent: 0, endPercent: 50, color: UIColor.greenColor())
        drawSlice(rect, startPercent: 50, endPercent: 75, color: UIColor.redColor())
    }

    private func drawSlice(rect: CGRect, startPercent: CGFloat, endPercent: CGFloat, color: UIColor) {
        let center = CGPoint(x: rect.origin.x + rect.width / 2, y: rect.origin.y + rect.height / 2)
        let radius = min(rect.width, rect.height) / 2
        let startAngle = startPercent / 100 * CGFloat(M_PI) * 2 - CGFloat(M_PI)
        let endAngle = endPercent / 100 * CGFloat(M_PI) * 2 - CGFloat(M_PI)
        let path = UIBezierPath()
        path.moveToPoint(center)
        path.addArcWithCenter(center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: true)
        path.closePath()
        color.setFill()
        path.fill()
    }
}

let pieChart = PieChart(frame: CGRect(x: 0.0, y: 0.0, width: 300.0, height: 300.0))
pieChart.backgroundColor = UIColor.clearColor()

Answer 2

My issue has been resolved.

We just need to do a little change in the first line to make it like as in picture's semicircle:

drawSlice(rect, startPercent: 0, endPercent: 50, color: UIColor.greenColor())
drawSlice(rect, startPercent: 0, endPercent: 25, color: UIColor.redColor())

Answer 3

Codo's code in Swift 3:

import UIKit

class PieChart : UIView {

    override func draw(_ rect: CGRect) {

        drawSlice(rect, startPercent: 0, endPercent: 50, color: .green)
        drawSlice(rect, startPercent: 50, endPercent: 75, color: .red)
    }

    private func drawSlice(_ rect: CGRect, startPercent: CGFloat, endPercent: CGFloat, color: UIColor) {
        let center = CGPoint(x: rect.origin.x + rect.width / 2, y: rect.origin.y + rect.height / 2)
        let radius = min(rect.width, rect.height) / 2
        let startAngle = startPercent / 100 * CGFloat.pi * 2 - CGFloat.pi
        let endAngle = endPercent / 100 * CGFloat.pi * 2 - CGFloat.pi
        let path = UIBezierPath()
        path.move(to: center)
        path.addArc(withCenter: center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: true)
        path.close()
        color.setFill()
        path.fill()
    }
}

let pieChart = PieChart(frame: CGRect(x: 0.0, y: 0.0, width: 300.0, height: 300.0))
pieChart.backgroundColor = UIColor.clear