Drawing linechart in Swift with 1000+ datapoints - xcode

Question

So I have Custom view an I'm trying to draw line chart there. First I draw xGrid, yGrid and middleline. Here are my functions to do that:
var width: CGFloat = 400
var height: CGFloat = 200
var xLines: CGFloat = 20
var yLines: CGFloat = 10
let color = NSColor.blackColor()
func drawMiddleLine() {
let middleHeight = height / 2
var context = NSGraphicsContext.currentContext()?.CGContext
CGContextSetStrokeColorWithColor(context, color.CGColor)
CGContextSetLineWidth(context, 2)
CGContextMoveToPoint(context, 0, middleHeight)
CGContextAddLineToPoint(context, width, middleHeight)
CGContextStrokePath(context)
}
func drawYGrid() {
let space = height / yLines
var context = NSGraphicsContext.currentContext()?.CGContext
CGContextSetStrokeColorWithColor(context, color.CGColor)
for index in 0...Int(yLines) {
CGContextMoveToPoint(context, width, (CGFloat(index) * space))
CGContextAddLineToPoint(context, 0, (CGFloat(index) * space))
}
CGContextStrokePath(context)
}
func drawXGrid() {
let space = width / xLines
var context = NSGraphicsContext.currentContext()?.CGContext
CGContextSetStrokeColorWithColor(context, color.CGColor)
for index in 0...Int(xLines) {
CGContextMoveToPoint(context, (CGFloat(index) * space), self.bounds.height)
CGContextAddLineToPoint(context, CGFloat(index) * space, 0)
}
CGContextStrokePath(context)
}
Now I have basic grid which width is two times height. Now I want to scale my y-axis, so I'm going to scale my data (In this example, I only take max positive number):
func getMaxValue(data: Array<CGFloat>) ->CGFloat {
let max = maxElement(data)
return max
}
And now I scale my y-Axis:
func scaleYAxis(data: Array<CGFloat>) ->Array<CGFloat> {
let maxValue = getMaxValue(data)
var factor = height / maxValue / 4
var scaledY = data.map({datum -> CGFloat in
var newValue = datum * factor
return newValue
})
return scaledY
}
But when I'm drawing my line with too many datapoints, my drawing will get messed up, because there is too many datapoints. It's ok when there is about 50 datapoints.
For example, I want to get something like this in results: JavaScript linechart with many many datapoints
Any ideas how can I manage to get that in Swift?
And my drawing method is something like that:
func drawLine(data: Array<CGFloat>) {
var path = CGPathCreateMutable()
var middleHeight = height / 2
CGPathMoveToPoint(path, nil, 0, middleHeight)
var scaledY = sclaleYAxis(data)
for index in 0..<data.count {
var xSpot = data[index]
var ySpot = middleHeight + scaledY[index]
CGPathAddLineToPoint(path, nil, xSpot, ySpot)
}
var layer = CAShapeLayer()
layer.frame = self.bounds
layer.path = path
layer.strokeColor = NSColor.greenColor().CGColor
layer.fillColor = nil
layer.lineWidth = 3
self.layer?.addSublayer(layer)
// I Have lineLayerStore and I delete all lines when it is needed
lineLayerStore.append(layer)
}

Answer 1

I cannot understand what the exact problem is without seeing a screenshot but visibility of the datapoints depends on the number of pixels on the screen.
You cannot display more datapoints than the number of pixels, without letting some datapoints share the same pixel column or downsampling the data.
You have 3 options:
Make X axis scrollable and set scrollview's contentSize width to the
number data points.
Keep X axis width fixed, downsample the data to reduce the number of
datapoints to be displayed, then draw the chart regarding the
downsampled data.
Do nothing, try to draw all the datapoints within the fixed width,
if your calculations are correct some datapoints will overlap and
share the same pixel column in the chart.
Explanation Edit for 3rd option:
For displaying 1000 datapoints on a 200 pixels wide X axis, there will be 5 datapoints per pixel. So;
Datapoints 0, 1, 2, 3 and 4 will be drawn on 1st pixel column.
Datapoints 5, 6, 7, 8 and 9 will be drawn on 2nd pixel column.
Datapoints 10, 11, 12, 13 and 14 will be drawn on 3rd pixel column.
And so on.
For your example, there are 400 pixels and 1000 datapoints, it means 2.5 datapoint per pixel. So;
Datapoints 0, 1, 2 will be drawn on 1st pixel column.
Datapoints 3, 4 will be drawn on 2nd pixel column.
Datapoints 5, 6, 7 will be drawn on 3rd pixel column.
Datapoints 8, 9 will be drawn on 4th pixel column.
And going on like that.