JBChartView how to add a label to each bar? (Swift)

Question

I'm using the JBChartView library to draw a bar chart in my iOS application. Each Bar should have an identifier, that is shown at the bottom of the bar. I tried defining a custom barView with an additional label, but do not know how to place the label relative to the bar.

Here's the code:

func barChartView(barChartView: JBBarChartView!, barViewAtIndex index: UInt) -> UIView! {
    let barView = UIView()

    // setting up the bar
    let bar: Float = chartData[Int(index)]
    var barColor = UIColorFromRGB(0xE8E8E8)
    if bar >= 1 { barColor = UIColorFromRGB(0xFF6259) }
    if bar > 33 { barColor = UIColorFromRGB(0xFFC02F) }
    if bar > 66 { barColor = UIColorFromRGB(0x28CA41) }
    barView.backgroundColor = barColor

    // setting up the label
    var label = UILabel()
    label.textAlignment = NSTextAlignment.Center
    label.textColor = barColor
    label.text = NSString(format: "%.0f", bar)
    barview.addSubview(label)

    return barView
}

Your help would be much appreciated!

Answer 1

ok, this is embarassing: label and bar had the same color, so the label was there all the time .

The final code (improved and with an additional Data Label):

func barChartView(barChartView: JBBarChartView!, barViewAtIndex index: UInt) -> UIView! {
    let barView = BarChartBarView()

    let bar: Float = chartData[Int(index)]
    var barColor = UIColorFromRGB(0xE8E8E8)
    if bar >= 1 { barColor = UIColorFromRGB(0xFF6259) }
    if bar > 33 { barColor = UIColorFromRGB(0xFFC02F) }
    if bar > 66 { barColor = UIColorFromRGB(0x28CA41) }
    barView.backgroundColor = barColor

    barView.dataLabel.text = NSString(format: "%.0f", bar)
    barView.legendLabel.text = chartLegend[Int(index)]

    return barView
}

class BarChartBarView: UIView {

let labelFont = UIFont(name:"Raleway-Thin", size:8.0)
var padding = CGFloat(0)
var barWidth = CGFloat(27)
var dataLabel = UILabel()
var legendLabel = UILabel()
var legendLabelWidth = CGFloat(50)
var labelHeight = CGFloat(27)

override convenience init() {
    self.init(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
}


override init(frame: CGRect) {
    super.init(frame: frame)

    self.backgroundColor = UIColorFromRGB(0xE8E8E8)

    // setting up data Label
    dataLabel.frame = CGRectMake(0, 0, barWidth, labelHeight)
    dataLabel.textAlignment = NSTextAlignment.Center
    dataLabel.textColor = UIColor.whiteColor()
    dataLabel.font = labelFont
    self.addSubview(dataLabel)

    // setting up legend Label
    legendLabel.frame = CGRectMake(0, self.bounds.height, legendLabelWidth, labelHeight)
    legendLabel.textAlignment = NSTextAlignment.Center
    legendLabel.textColor = UIColor.blackColor()
    legendLabel.font = labelFont
    self.addSubview(legendLabel)
}

required init(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

override func layoutSubviews() {
    let xOffset = (self.barWidth - self.legendLabelWidth) / 2
    let yOffset:CGFloat = self.bounds.height
    let width = self.legendLabelWidth
    let height = self.labelHeight

    self.legendLabel.frame = CGRectMake(xOffset, yOffset, width, height)
}

}

Answer 2

@Armin I got the clue to implement the following method:

- (UIView *)barChartView:(JBBarChartView *)barChartView barViewAtIndex:(NSUInteger)index

From Armin. Because even though JawBone's JBBarChart library is impressive their Demo is totally done using code, and also it's bit confusing at a glance. However my way of adding the Label view is same old way of creating a UIView and adding the UILabel as a subview and returning it. And it looks like follows:

- (UIView *)barChartView:(JBBarChartView *)barChartView barViewAtIndex:(NSUInteger)index {
    UIView *barView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 55, (CGFloat)chartData[(int)index])];
    if (index == 0) {
        [barView setBackgroundColor:[UIColor grayColor]];
    } else if (index == 1) {
        [barView setBackgroundColor:[UIColor redColor]];
    } else if (index == 2) {
        [barView setBackgroundColor:[UIColor orangeColor]];
    } else {
        [barView setBackgroundColor:[UIColor blueColor]];
    }

    int roomCount = (int)chartData[(int)index];
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(2, 5.0f, 50.0f, 21.0f)];
    [label setTextAlignment:NSTextAlignmentCenter];
    [label setTextColor:[UIColor blackColor]];
    [label setFont:[UIFont fontWithName:@"Raleway-Thin" size:6.0]];
    [label setText:[NSString stringWithFormat:@"%d/56", roomCount]];

    [barView addSubview:label];
    return barView;
}

Please consider that chartData is contains my data, as integers. So I need the height of each Bar View according to that integer in each position.

Hope this answer would be helpful to someone out there, specially who is juggling to do this implementation in Objective-C.

Cheers!