How to create a grouped bar chart in Swift?

Question

I am using Charts library to display charts in my app. I have a bar chart in my app that used to work fine in Swift 2.3 and Charts version 2.2.5. However, I recently updated my app to Swift 4.1 and Charts 3.1.0, but breaking changes in Charts library break the functionality in my app. How do I properly migrate this block of code to work in new versions?

This is the example chart that I am using:

And this is the JSON data that creates this chart:

[{"Items":[{"X":"01.03.2018","Value":10000},{"X":"02.03.2018","Value":2500}],"Name":"Group 1"},{"Items":[{"X":"01.03.2018","Value":5000}],"Name":"Group 2"}]

This is the code that I used in Swift 2.3 that worked fine:

var xVals = [String]()
var datasets = [BarChartDataSet]()

    for i in 0..<json.count{

        var entries = [BarChartDataEntry]()

        for j in 0..<json[i]["Items"].count{

            if i == 0{
                xVals.append(json[i]["Items"][j]["X"].stringValue)
            }

            if json[i]["Items"][j]["Value"].doubleValue != 0.0{
                let entry = BarChartDataEntry(value: json[i]["Items"][j]["Value"].doubleValue, xIndex: j)

                entries.append(entry)
            }

        }

        let dataset = BarChartDataSet(yVals: entries, label: json[i]["Name"].stringValue)
        datasets.append(dataset)
    }

    let data = BarChartData(xVals: xVals, dataSets: datasets)
    barChart.data = data

This is how it looks after migration:

There are 2 problems with this:

Bars are stacked instead of grouped.
xAxis does show indexes instead of dates.

This is the new Swift 4.1 code:

var xVals = [String]()
var datasets = [BarChartDataSet]()

for i in 0..<json.count{

    var entries = [BarChartDataEntry]()

    for j in 0..<json[i]["Items"].count{

        if i == 0{
            xVals.append(json[i]["Items"][j]["X"].stringValue)
        }

        if json[i]["Items"][j]["Value"].doubleValue != 0.0{
            let entry = BarChartDataEntry(x: Double(j), y: json[i]["Items"][j]["Value"].doubleValue)

            entries.append(entry)
        }

    }

    let dataset = BarChartDataSet(values: entries, label: json[i]["Name"].stringValue)
    datasets.append(dataset)
}

let data = BarChartData(dataSets: datasets)
barChart.data = data

So how do I solve those 2 problems?

Answer 1

[ Swift 4 ]You need to use groupBars and valueFormatter form BarChart API.

This is just an example of code, you need to fine tuning as per your requirement.

[ Edit 1 ]

Formula : (0.2 + 0.03) * countGourp + 0.08 = 1.00 -> interval per "group"

 let data = BarChartData(dataSets: datasets)
 // (0.2 + 0.03) * 2 + 0.54 = 1.00 
    let groupSpace = 0.54
    let barSpace = 0.03
    let barWidth = 0.2
    data.barWidth = barWidth

    barView.xAxis.axisMinimum = Double(0)
    barView.xAxis.axisMaximum = Double(0) + data.groupWidth(groupSpace: groupSpace, barSpace: barSpace) * Double(2)  // group count : 2
    data.groupBars(fromX: Double(0), groupSpace: groupSpace, barSpace: barSpace)

    barView.data = data

    let x_Axis = barView.xAxis
    x_Axis.valueFormatter = IndexAxisValueFormatter(values:xVals)
    x_Axis.centerAxisLabelsEnabled = true
    x_Axis.granularity = 1
    barView.xAxis.labelPosition = .top