Grouped bar chart plotting wrong !!

[shineeth]

• I've read, understood, and done my best to follow the *CONTRIBUTING guidelines.

What did you do?

I was trying to plot a grouped bar chart for following data

{
    "x":[1,2,3,4],
    "y":{
        "data1":[
            10.0,
            null,
            23.43,
            43.76
          ],
          "data2":[
            null,
            50.0,
            23.43,
            33.76
          ],
          "data3":[
            null,
            null,
            null,
            48.76
          ]
    }
}

After converting the JSON to BarChartDataSet, the data set looks like as follows:

▿ 3 elements
  ▿ 0 : Charts.BarChartDataSet, label: data3, 1 entries: //Light green
            ChartDataEntry, x: 3.0, y 48.76
  ▿ 1 : Charts.BarChartDataSet, label: data2, 3 entries: //Violet
            ChartDataEntry, x: 1.0, y 50.0
            ChartDataEntry, x: 2.0, y 23.43
            ChartDataEntry, x: 3.0, y 33.76
  ▿ 2 : Charts.BarChartDataSet, label: data1, 3 entries: //Dark green
            ChartDataEntry, x: 0.0, y 10.0
            ChartDataEntry, x: 2.0, y 23.43
            ChartDataEntry, x: 3.0, y 43.76

What did you expect to happen?

I am expecting a graph as follows:

What happened instead?

The graph is plotting on wrong x point.
The data3 have value for x3, but its plotting on x0
The data2 supposed to start from x1, but its rendered on x0 position.
i.e if we have multiple data set and few data set does not have y value for the initial x position compare to other data set in the group, then the bars are rendered in wrong position.

Please find the screenshot below:

Charts Environment

Charts version/Branch/Commit Number: 3.1.1
Xcode version: 9.3 (9E145)
Swift version: 4.0
Platform(s) running Charts: iOS
macOS version running Xcode: 10.13.4 (17E202)

Demo Project

I have upload the sample project to google drive to demonstrate the issue

You can download the project from here: https://drive.google.com/open?id=122fRz972mfBsladaSqPVHIyMLxYczTPd

[liuxuan30]

refer #2832 and #3186

[shineeth]

@liuxuan30 both reference issues are related to alignment, whereas here its about plotting the data set on wrong x. i.e if you look at the data3(light green bar) it supposed to plot on position on 3 in X-Axis(Ref Figure 1), instead its wrongly plotting on 0 in X-Axis (Ref Figure 2). Am I missing something?

[liuxuan30]

there are some few things I am confused:
you have null value for some bars; in this case, I am thinking you should give 0 value for it, as it's bar, 0 will not render it so it looks like null.

but you instead ignored to feed the value, and causing data from 4 bars (json) to 3 bars like, (though not feeding 0 for null should work as well, as below works when you have different size of each data set)

3 elements
  ▿ 0 : Charts.BarChartDataSet, label: data3, 1 entries: //Light green
            ChartDataEntry, x: 3.0, y 48.76
  ▿ 1 : Charts.BarChartDataSet, label: data2, 3 entries: //Violet
            ChartDataEntry, x: 1.0, y 50.0
            ChartDataEntry, x: 2.0, y 23.43
            ChartDataEntry, x: 3.0, y 33.76
  ▿ 2 : Charts.BarChartDataSet, label: data1, 3 entries: //Dark green
            ChartDataEntry, x: 0.0, y 10.0
            ChartDataEntry, x: 2.0, y 23.43
            ChartDataEntry, x: 3.0, y 43.76

which seems weird to me; and you haven't posted your code how you group bars; it's like you have indeed grouped them, every x has 3 bars; the X0 looks correct, as it's using [48.76, 50, 10] as the bars, which are the first value of each data set, and same rules apply to your X1, X2. so at X1, you got [null, 23.43, 23.43] and X3 [null, 33.76, 43.76]

and have you looked at ChartsDemo multiple bar chart? especially groupBarsFromX API.

You missed the comment:

/// Groups all BarDataSet objects this data object holds together by modifying the x-value of their entries.
/// Previously set x-values of entries will be overwritten. Leaves space between bars and groups as specified by the parameters.
/// Do not forget to call notifyDataSetChanged() on your BarChart object after calling this method.
///
/// - parameter the starting point on the x-axis where the grouping should begin
/// - parameter groupSpace: The space between groups of bars in values (not pixels) e.g. 0.8f for bar width 1f
/// - parameter barSpace: The space between individual bars in values (not pixels) e.g. 0.1f for bar width 1f
@objc open func groupBars(fromX: Double, groupSpace: Double, barSpace: Double)

so your X value in your data set is actually overwritten. Is this your problem?

You have to follow how it works and reorg your data sets to get what you want.

[shineeth]

@liuxuan30

and you haven't posted your code how you group bars

You can download the demo project from the google drive link mentioned in the "Demo Project" in the actual post

your X value in your data set is actually overwritten. Is this your problem?

Yes, I guess thats my problem.

Could you please have a look on https://github.com/danielgindi/Charts/pull/3459