How to create UITableViewCells with complex content in order to keep scrolling fluent

Question

I am working on a project where I have a table view which contains a number of cells with pretty complex content. It will be between usually not more than two, but in exceptions up to - lets say - 30 of them. Each of these complex cells contain a line chart. I am using ios-charts (https://github.com/danielgindi/ios-charts) for this.

This is what the View Controller's content looks like:

The code I use for dequeuing the cells in the viewController's cellForRowAtIndexPath method is kind of the following:

var cell = tableView.dequeueReusableCellWithIdentifier("PerfgraphCell", forIndexPath: indexPath) as? UITableViewCell
if cell == nil {
    let nib:Array = NSBundle.mainBundle().loadNibNamed("PerfgraphCell", owner: self, options: nil)
    cell = nib[0] as? FIBPerfgraphCell
}

cell.setupWithService(serviceObject, andPerfdataDatasourceId: indexPath.row - 1)
return cell!

and in the cell's code I have a method "setupWithService" which pulls the datasources from an already existing object "serviceObject" and inits the drawing of the graph, like this:

func setupWithService(service: ServiceObjectWithDetails, andPerfdataDatasourceId id: Int) {

    let dataSource = service.perfdataDatasources[id]
    let metadata = service.perfdataMetadataForDatasource(dataSource)

    if metadata != nil {
        if let lineChartData = service.perfdataDatasourcesLineChartData[dataSource] {

            println("starting drawing for \(lineChartData.dataSets[0].yVals.count) values")

            chartView.data = lineChartData
        }
    }
}

Now the problem: depending on how many values are to be drawn in the chart (between 100 and 2000) the drawing seems to get pretty complex. The user notices that when he scrolls down: as soon as a cell is to be dequeued that contains such a complex chart, the scrolling gets stuck for a short moment until the chart is initialized. That's of course ugly!

For such a case, does it make sense to NOT dequeue the cells on demand but predefine them and hold them in an array once the data that is needed for graphing is received by the view controller and just pull the corresponding cell out of this array when it's needed? Or is there a way to make the initialization of the chart asynchronous, so that the cell is there immediately but the chart appears whenever it's "ready"?

Thanks for your responses!

Answer 1

What you're trying to do is going to inevitably bump into some serious performance issues in one case or another. Storing all cells (and their data into memory) will quickly use up your application's available memory. On the other hand dequeueing and reloading will produce lags on some devices as you are experiencing right now. You'd be better off by rethinking your application's architecture, by either:

1- Precompute your graphs and export them as images. Loading images into and off cells will have much less of a performance knockoff.

2- Make the table view into a drill down menu where you only show one graph at a time.

Hope this helps!