HIChartView in the UITableViewCell with the cells reusing issue

[telipskiy]

Hello, I have UITableView with the cells where each cell contains HIChartView and has the same cell type and identifier. In general, just a table view with different charts inside.

When the user opens the screen with this table it takes some moment (less than a second) to render the chart. Actually, it is acceptable for the initial rendering, I can display loading indicators at that moment and it works fine.

But when the user starts scrolling the tableView it reuses the cells to render another chart (just setting already created and saved in the array options to the ChartView). In this case, rendering time is not acceptable, charts start flickering and seem cannot be used.

I have checked provided samples but didn't find any example or how I can use HIChartView inside UITableView with cells reusing.

Info: my charts contain about 100 points, so it is not huge data, draw animation was disabled, and I tried to use HIBoost but actually got the same result in the end.

[ihnatmoisieiev]

Hello @telipskiy, thanks for your question.

Did you check HighFit demo app? Here is exactly the same situation that you are looking for.

You should prevent setting HIChartview options during cell reusing. Calling chartView.options = options causes the chart to render.

[telipskiy]

Hello, yes, I checked the demo app before and it was the source of my question. In the demo app code, I can see (DashboardViewController.swift):

the property where you save chart views: var charts: [HIChartView]!

and the getting cell:

let cellReuseIdentifier: String = options["chartType"] as! String

        var cell: UITableViewCell? = tableView.dequeueReusableCell(withIdentifier: cellReuseIdentifier)

        if cell == nil {
            cell = UITableViewCell(style: .default, reuseIdentifier: cellReuseIdentifier)

It means no HIChartView reusing at all. For instance, I have 50 chart items and based on the demo code it will create 50 "HIChartView" UI controls and save these in the charts property & each cell will have its own reuse identifier.

But I am asking about the implementation of Apple's "reusing strategy". I want to have 50 loaded models for the charts, but only really needed chart controls. Let's say we have 3 chart cells on the screen in one moment, so when you scroll down, the top cell becomes invisible and should be REUSED for the next cell from the bottom. That is how reusing works in the UITableView based on Apple's docs.

Seems using HIChartView with this logic is not possible (as chart rendering leads to flickering). I agree that having separated HIChartView for each data model can be used as a workaround in some cases, but when you have a large data source, creating in memory an additional UI component for each item looks a little bit silly and can produce memory issues.

[ihnatmoisieiev]

Hello @telipskiy, did you find a solution?

If no, did you try to use Stack View?

[telipskiy]

We are currently using solution from the demo project (saving chart views to the separated list and adding/removing when a cell appears/disappears). Anyway, it is not good practice because we should keep up to 50 (in our case) views that are not used instead of having only 3-4 visible on the screen, but in the case of using Apple's reusing strategy we have long items rendering time on TableView scroll events

[MikolajMichalczak]

Hi @telipskiy! Could you please share a demo project with your implementation of cell reusing? It would help with targeting the problem with flickering.

[MikolajMichalczak]

Closing due to inactivity. Please feel free to reopen the ticket if you have any further questions.