title: Drawing a simple line chart using Swift
body: <p>I am writing a Swift program using Xcode 9.2 for the MacOS with the objecting of displaying a simple line chart with three points.</p>
  
  <p>The program's objective is to create a line graph using apple's core graphics. It is a horizontal line graph with three points, one at the center and at each end. If the mouse pointer is over the center point I want some text to display like "xyz" and when the mouse moves away the text would disappear. The end points will have labels containing numbers but for now let's call them "min" and "max". </p>
  
  <p>Using XCode's playground, so far I have managed to accomplish to display a very clunky line graph using the following code:</p>
  
  <pre><code>class MyView : NSView {
     override func draw(_ rect: NSRect) {
         NSColor.green.setFill()
         var path = NSBezierPath(rect: self.bounds)
         path.fill()
  
    let leftDot = NSRect(x: 0, y: 0, width: 10, height: 20)
    path = NSBezierPath(ovalIn: leftDot)
    NSColor.black.setFill()
    path.fill()
  
    let rightDot = NSRect(x: 90, y: 0, width: 10, height: 20)
    path = NSBezierPath(ovalIn: rightDot)
    NSColor.black.setFill()
    path.fill()
  
    let centerDot = NSRect(x: 50, y: 0, width: 10, height: 20)
    path = NSBezierPath(ovalIn: centerDot)
    NSColor.black.setFill()
    path.fill()
  
    }
  }
  
  let viewRect = NSRect(x: 0, y: 0, width: 100, height: 10)
  let myEmptyView = MyView(frame: viewRect)
  </code></pre>
  
  <p>The code produces a clunky looking line graph as follows:</p>
  
  <p><a href="https://i.stack.imgur.com/uW1MC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uW1MC.png" alt="Ugly line chart"></a></p>
  
  <p>The chart below is from Excel and this line chart is much cleaner and is what I am looking for but I want the line to be horizontal instead of diagonal.</p>
  
  <p><a href="https://i.stack.imgur.com/A7ZMQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A7ZMQ.png" alt="Excel line chart"></a></p>
  
  <p>Thanks in advance for your help.</p>