How to Make a Grouped Barchart with iOS-Charts

How to make a grouped BarChart with ios-charts?

You got something wrong here. Right now you are creating a new DataSet for every year.

What you need to do is create as many DataSets as you want bars per group where one DataSet represents one bar in each group. (e.g. DataSet 1 represents every first bar of a group, DataSet 2 every second bar of a group, ...)

As an example, imagine a chart like this with 4 groups of 3 bars per group. Each group represents one year.

||| ||| ||| |||

• The setup shown above requires 3 DataSets (one for each group)
• Entries in the same group have the same x-index (e.g. in the first group all have x-index 0)
• It consists of a total of 12 entries
• Each DataSet contains 4 entries with Entry x-indices ranging from 0 to 3

Here you can find an example of the scenario described above and check out the documentation.

How to create a grouped bar chart in Swift?

[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

How to switch from Grouped Bar chart to Simple Bar Charts

I found the answer on the Documentation. It was quite hard to find.
The only thing u have to do is call the fitScreen() method And its gets to the original state.

func updateBarchart(which segment: Int)
{

    //getSumofMonths()

    let pecsColor = UIColor(red:0.278, green:0.247, blue:0.247, alpha: 1.000)
    let petreColor = UIColor(red:0.941, green:0.400, blue:0.184, alpha: 1.000)

    if segment == 1
    {
        let dataSets = [createDataSet(from: pecsBevetel, label: "Pécs", color: pecsColor),createDataSet(from: petreBevetel, label: "Újpetre", color: petreColor)]

        groupedBarChart.setGroupedBarchartData(from: dataSets, xValues: monthStrings)
        groupedBarChart.xAxis.granularityEnabled = true
        groupedBarChart.xAxis.granularity = groupedBarChart.xAxis.axisMaximum / Double(monthStrings.count)

        groupedBarChart.xAxis.axisMaximum = Double(12)
        groupedBarChart.setVisibleXRangeMaximum(6)
        //groupedBarChart.setVisibleXRangeMinimum(0)
        groupedBarChart.xAxis.centerAxisLabelsEnabled = true

    }
    else if segment == 0
    {
        groupedBarChart.setBarChartData(xValues: monthStrings, yValues: pecsBevetel, label: "Pécs", colors: [pecsColor])
        //groupedBarChart.setVisibleXRangeMinimum(12)
        groupedBarChart.xAxis.centerAxisLabelsEnabled = false
        groupedBarChart.fitScreen() //<- This method solves the problem.

    }
    else if segment == 2
    {
        groupedBarChart.setBarChartData(xValues: monthStrings, yValues: petreBevetel, label: "Újpetre", colors: [petreColor])
        //groupedBarChart.setVisibleXRangeMinimum(12)
        groupedBarChart.xAxis.centerAxisLabelsEnabled = false
        groupedBarChart.fitScreen() //<- This method solves the problem.

    }

    //groupedBarChart.xAxis.axisMinimum = Double(0.5)
    groupedBarChart.xAxis.labelPosition = XAxis.LabelPosition.bottom
    groupedBarChart.chartDescription?.text = ""

    groupedBarChart.fitBars = true

    groupedBarChart.doubleTapToZoomEnabled = false

    let legend = groupedBarChart.legend
    legend.enabled = true
    legend.horizontalAlignment = .center
    legend.verticalAlignment = .bottom
    legend.orientation = .horizontal
    legend.drawInside = false
    legend.yEntrySpace = 0.0;

    let  marker =  BalloonMarker(color: UIColor.white, font: UIFont.systemFont(ofSize: 12), textColor: UIColor.black, insets: UIEdgeInsetsMake(8.0, 8.0, 20.0, 8.0))
    marker.minimumSize = CGSize(width: 75.0, height: 35.0)
    groupedBarChart.marker = marker
    groupedBarChart.drawMarkers = true
    groupedBarChart.moveViewToX(0)

}

So to be short call this method AFTER you set the data of the chart.

groupedBarChart.fitScreen() //<- This method solves the problem.

Convert bar chart to a grouped bar chart with danielgindi/ios-charts and Swift

You haven't actually done anything with unitsBought.

For a bar chart you can do two things:

1. Add another DataSet with your unitsBought
2. Use the other overload of BarCharDataEntry(values: [Double], xIndex: Int) or BarCharDataEntry(values: [Double], xIndex: Int, label: String) to pass multiple values per entry, which makes it stacked.

Barchart with grouped values: center-align x-axis labels

Okay, found the answer /p>

xAxis.axisMinimum = 0
xAxis.axisMaximum = 7
xAxis.centerAxisLabelsEnabled = true

iOS Charts to make Stacked BarChart with 2 arrays

I solved it myself..

I used another BarChartDataEntry which 2 arrays are combined, not use yVals.

Here is the code:

var finalEntries : [BarChartDataEntry] = []

    for i in 0..<finalLendArray.count {

        let Entry = BarChartDataEntry(x: Double(i), yValues: [finalBorrowArray[i], finalLendArray[i]])
        finalEntries.append(Entry)
    }

    let set = BarChartDataSet(values:finalEntries, label: "")

iOS: Two Bar Charts together

Now that you've changed your question, this requires a different solution.

As I mentioned in the comments before, you need to manually calculate each bar's position. Then, don't use the grouping feature, because you've already grouped them how you want.

// Determine bar sizing and spacing parameters.
int barsPerGroup = 2;
double targetGroupWidth = 1;
double barSpacing = 0.2;
double groupSpacing = 0.3;
double barWidth = (targetGroupWidth - groupSpacing - barSpacing * barsPerGroup) / barsPerGroup;
double compareBarOffset = barWidth / 3;

for (int i = 0; i < entryCount; i++) {

    // Determine X position for each bar
    // NOTE: This is the most important step!
    double groupStartPosition = targetGroupWidth * i;

    double group1X = groupStartPosition + barWidth / 2;
    double group1CompareX = group1X + compareBarOffset;

    double group2X = group1X + barWidth + barSpacing;
    double group2CompareX = group2X + compareBarOffset;

    // Create data entries positioned at values calculated by previous step
    NSNumber *group1Value = group1[i];
    NSNumber *group1CompareValue = group1Compare[i];

    NSNumber *group2Value = group2[i];
    NSNumber *group2CompareValue = group2Compare[i];

    BarChartDataEntry *group1DataEntry = [[BarChartDataEntry alloc] initWithX:group1X
                                                                            y:[group1Value doubleValue]];
    BarChartDataEntry *group1CompareDataEntry = [[BarChartDataEntry alloc] initWithX:group1CompareX
                                                                                   y:[group1CompareValue doubleValue]];

    BarChartDataEntry *group2DataEntry = [[BarChartDataEntry alloc] initWithX:group2X
                                                                            y:[group2Value doubleValue]];
    BarChartDataEntry *group2CompareEntry = [[BarChartDataEntry alloc] initWithX:group2CompareX
                                                                               y:[group2CompareValue doubleValue]];

    // ...
}

// Create Data Sets, set styles, etc.
// ...

// Do NOT use this method because bars are already grouped.
//[barChartView groupBarsFromX:0 groupSpace:groupSpacing barSpace:barSpacing];

RESULT:

Note: I can't find the property isDashedBorder, so I don't know what version of the library you're using. Instead, I just set clear bars with a solid gray border.

---

Related Topics