Bars not rendering or disappearing while and after dragging

[marbetschar]

I've created a bar chart using BarChartView. The view displays work hours per day.
Unfortunately, some bars are not rendered at all - and others are disappearing while the whole chart is dragged.

Before the chart is shown the first time, it's zoomed to show only 7 bars at a time:

barChart.zoom(scaleX:ceil(CGFloat(dataSet.xMax - dataSet.xMin) / 7), scaleY: 1, x: 0, y: 0)

Then the view is animated, so the latest day is shown first:

barChart.moveViewToAnimated(xValue: dataSet.xMax, yValue: dataSet.yMin, axis: barChart.rightAxis.axisDependency, duration: 0.8, easingOption: .easeInOutSine)

This leads to the following result - so far, so good:

As soon as I drag the chart to the right, bars begin to disappear - only the value remains visible (notice the bar of Mo. 6th - it's gone):

Also all bars which are further left and therefore not visible immediately (because of the zoom) are not rendered at all. What I' doing wrong?

[liuxuan30]

I need you to debug on your side first.
Take a look at fileprivate func prepareBuffer(dataSet: IBarChartDataSet, index: Int), where it calculates the barRect.
Please debug before and after zoom, what could cause the missing barRect.
Giving the fact that some of the bars are still there, and the label positions seem correct, it could be some simple mistake by the library or you.

It would be easier if you can reproduce it with ChartsDemo

[marbetschar]

I was able to create a test case for the issue. Unfortunately I can't figure out, what actually causes it.

To run the test case use the target ChartsDemo in the simulator iPhone 6 (10.2) of Xcode 8.2.1. Then drag the chart to the right, you'll see the green bar of Tue 7th disappearing.

Worth noting: the code of the test case is based upon this pull request for attributed chart labels. The pull request provides the functionality do render the days on the xAxis as you'll see on the screenshots. However, I can't see why this pull request should cause the trouble.

[liuxuan30]

I did a quick check, the bars that missing all meet the break condition:

            if (!viewPortHandler.isInBoundsLeft(barRect.origin.x + barRect.size.width))
            {
                continue
            }
            
            if (!viewPortHandler.isInBoundsRight(barRect.origin.x))
            {
                break
            }

However, I can't explain what's the cause. The barRect 'seem' calculates right

[marbetschar]

Thank you very much for your support; I really appreciate it!

Thought again if the pull request may cause the issue. What definitely has changed is the way the axis labels are drawn, maybe that affects the axis item width, which also influences the barRect in the end?

How can we narrow down if the issue is because of a) a bug in the pull request b) a bug in the chart library or c) simply wrong usage?

[liuxuan30]

Last time when I check, I tried replace the library with master, seems still buggy. You can replace and help double check.

viewPortHandler.isInBoundsRight should not be impacted I guess, as long as the feature branch does not change barRect calculation.

For now, I can't say you used it wrongly, it's just like the contentRect and bar rect edge issues.

I am sorry I don't have much time to look into the rect edges to figure out what's wrong. But you can try ChartsDemo to do similar things to see if you can reproduce.

@danielgindi any idea?

[marbetschar]

Any news regarding the pull request or this issue?

[marbetschar]

Anything? How may I help to get this fixed?

[liuxuan30]

@marbetschar I remember last time I use master branch for this bug, and it still happens, so should not relates to your PR.

However I don't have time to take a look at the matrix though.

I think the key issue here is why it's beyond the condition. I don't see obvious issue while calculating the bar rect.

If you have time, you can start looking at the barRect calculation.

[liuxuan30]

To be more specific: When the bar is missing, the label above it still stays on the right position I suppose, so it's just about the barRect edge issues.

You can try remove

            if (!viewPortHandler.isInBoundsLeft(barRect.origin.x + barRect.size.width))
            {
                continue
            }
            
            if (!viewPortHandler.isInBoundsRight(barRect.origin.x))
            {
                break
            }

And see if the bar is at the right position and right size, so we can decide if it's only about the edge issues.

[jeffalee]

@marbetschar I'm having the exact same problem, did u find a way to solve it?

[marbetschar]

@jeffalee unfortunately I did not have time to digg into this issue yet

[perwyl]

@marbetschar @jeffalee is this issue related to the viewPortHandler?

I am having the same issue with 3.0.2, or prob it seems to be the same issue. Would appreciate help on this.

self.chartView.data = getChartData() // .count == 25
self.chartView.setVisibleXRangeMaximum(10) 
self.chartView.moveViewToX(20)

Only the last 10 data bars is rendered/displayed when I scroll left and right.

• When the last bar is going to be out of bounds, the bar value fades out and
• When the last is out of bounds, all the drawn bars disappeared.
• The xAxis label remained

If I remove the last 2 lines, the chart is rendered properly.

[marbetschar]

@perwyl I have the exact same two lines in my code; so I'd claim you ran into the same issue. @liuxuan30 investigated a bit and found, that this is indeed related to the viewPortHandler.

Unfortunately I do not have any time to digg into this currently. Would be thankful if you give it a try.

[perwyl]

@marbetschar alright. thanks for the confirmation.

[kscheff]

I have the same issue with 3.0.2 in a CombinedChartView with stacked bar BarChartData().
When zooming and dragging the most right data entry outside the visible view the bars disappear, the data labels are there. Further I don't restrict .setVisibleXRangeMaximum() or move the left side via .moveViewToX() at all.

Another strange behavior is that I cannot select all bars via .highlightPerTapEnabled(), only the center bar in a set of e.g. 13 is selectable. Not sure if this is related at all.

solved: The issue was that the data entries where in reverse order. Ordering the data entries by increasing x values solved the issue.

[liuxuan30]

@kscheff what issue did you say resolved? Yours only or @marbetschar as well?

[kscheff]

@liuxuan30 I could not verify @marbetschar his issue. I only saw that I have a similar issue with missing bars, which I could resolve by sorting the values. So I suggest to @marbetschar trying to sort his entries in the data set.

[liuxuan30]

Thanks, got it

[perwyl]

@kscheff how do you resolve

 Another strange behavior is that I cannot select all bars via .highlightPerTapEnabled(), only the center bar in a set of e.g. 13 is selectable. Not sure if this is related at all.

[kscheff]

@perwyl this issue disappeared with the sorting as well.

[perwyl]

@kscheff thanks! i actually need to do return yVals.reversed() not sure whats the logic behind this.

[AntonNix]

That's great that ordering data makes charts plotting right while zooming. Could sort action be included in the pod by default in "notifyDataSetChanged" method or maybe in the other place? Should I make PR?

[liuxuan30]

Please make a PR with details like what's the issue and root cause, etc. This has been quite a time and conversations, not sure if they are the same issue with this post.

[jjatie]

I think if we’re going to do this (and I think we should), the only way to add data should be in an ordered fashion.

[liuxuan30]

sorting or this issue? Sorting used to be taken care of by user I remember.

[AntonNix]

sorting or this issue? Sorting used to be taken care of by user I remember.

as I see it causes the wrong representation of data in the chart - so seems it's not obvious to prepare data sorted (it has x value - so it's defined the necessary and sufficient condition to draw right). So maybe pod should be self-sufficient and not require non-obvious requirements? IMHO
I will prepare PR in a couple of days, hope this logic is obvious.

[AntonNix]

Though I work only with a bar chart. Maybe some type of charts could be affected. But really I don't understand how it could draw right firstly and have problems with drawing zoomed part of the chart from the logical perspective.

[jjatie]

@liuxuan30 My understanding is that this issue is a result of having the data unsorted. Am I missing something?

I'm guessing here, but if data is always sorted, we can likely also make assumptions in the rendering to improve performance.

[liuxuan30]

Honestly I don't remember. The last time I looked into is I found

if (!viewPortHandler.isInBoundsLeft(barRect.origin.x + barRect.size.width))
            {
                continue
            }
            
            if (!viewPortHandler.isInBoundsRight(barRect.origin.x))
            {
                break
            }

one of the two conditions is not met so the bars are not rendering. @marbetschar did not updated since then, so I'm not sure if the root cause of the original issue is related to sorting, like what @kscheff offered.

[Valerun666]

Hey, guys! Any news about this issue? Using version 3.3.0 and still the same issue with BarChartView. Any ideas how to fix it in case if it important not to sort yAxis values?

[patrickSebastian97]

hey guys, the candlestick chart version of this similar problem was closed to collaborators only despite a clear solution not being decided. thought i'd give it a mention here. people all around the forum have been saying to sort the x values, when they say that do they mean a line of code like ---- self.candleChartValues.sorted(by: { $0.x < $1.x }) ----, or is it an entirely different method or syntax?

[marbetschar]

@liuxuan30 unfortunately I do no longer have access to the corresponding code, so I'm not able to debug or provide any further insight on this.