Create a Timeline View using BezierPath in Tableview
<p>i am trying to draw a milestone in TableView with 5 rows, i have added a label in cell as "O",here row height is 44 and am trying to connect these dots
Something like this 
O------O------O------O-----O vertically, but i am unable to figure out what am missing here, refer the following code</p>

<pre><code> class StopslistTableViewCell:UITableViewCell{

@IBOutlet weak var milestoneLbl: UILabel!

override func draw(_ rect: CGRect) {

    let scrrenX = UIScreen.main.bounds.width - 30

    let frametosuperview = milestoneLbl.convert(milestoneLbl!.frame, to: self.superview)

    print("dotframetosuperview",frametosuperview)

    //print(CGPoint(x: scrrenX, y: previousposY + rect.size.height))

    //frametosuperview.origin.y &gt; 40 ? frametosuperview.origin.y - 20 : frametosuperview.origin.y

    let path = UIBezierPath()
    path.move(to: CGPoint(x: scrrenX, y:frametosuperview.origin.y &lt; 30 ? frametosuperview.origin.y : frametosuperview.origin.y - frametosuperview.height))

    print("move to point---&gt;",frametosuperview.origin.y &lt; 30 ? frametosuperview.origin.y : frametosuperview.origin.y - frametosuperview.height)

    path.addLine(to: CGPoint(x: scrrenX, y: frametosuperview.origin.y &lt; 30 ? frametosuperview.height + 24 : (frametosuperview.origin.y + 24)))
    print("add line to point---&gt;",CGPoint(x: scrrenX, y: frametosuperview.origin.y &lt; 30 ? frametosuperview.height + 24 : (frametosuperview.origin.y + 24)))

    path.lineWidth = 5

    UIColor.red.setStroke()
    path.stroke()

    setNeedsDisplay()
}
</code></pre>

<p>debug output</p>

<pre><code>dotframetosuperview (560.0, 20.0, 20.0, 20.0) 
move to point---&gt; 20.0
add line to point---&gt; (290.0, 44.0)
dotframetosuperview (560.0, 64.0, 20.0, 20.0)
move to point---&gt; 44.0
add line to point---&gt; (290.0, 88.0)
dotframetosuperview (560.0, 108.0, 20.0, 20.0)
move to point---&gt; 88.0
add line to point---&gt; (290.0, 132.0)
dotframetosuperview (560.0, 152.0, 20.0, 20.0)
move to point---&gt; 132.0
add line to point---&gt; (290.0, 176.0)
dotframetosuperview (560.0, 196.0, 20.0, 20.0)
move to point---&gt; 176.0
add line to point---&gt; (290.0, 220.0)
</code></pre>

<p>i need something like this</p>

<p><a href="https://i.stack.imgur.com/9UVnn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9UVnn.png" alt="enter image description here"></a></p>

<p>I am unable to get the desired results,am i missing something here..?</p>