iOS-Charts - Make a bar chart and field remaning with other color

Question

I am trying to make a chart exactly as the guide lines of the designer but i am difficulty's in 3 of the things.

This is the guide lines:

And this is what i have done:

As you can see it was supposed that the red bar had between self and the target a blue bar. Already try to create a second bar to see if stays behind but that did not work. This is what I tryed

BarChartDataSet *set2 = [[BarChartDataSet alloc] initWithYVals:yVals label:@""];

And then filed with blue bars with heigh of target. But din't work so i have remove that.

Other problem is the left axis labels it starts in zero, and did find way to work around.

The third and last problem is that the T for target stays over the line when the expected was to be after the line.

This is the code that used to obtain the chart:

/*
 *  Method to render the graphic of a given KPI
 *
 *  @param  chartView   BarChartView object type
 *  @param  array   NSMutableArray with array of dictionaries
 *  @param  target  double with target value
 *  @param  granularity NSString ("Monthly", "weekly" or "daily")
 *
 *  @return id  BarCartView
 */
- (id)graphicRenderIn:(BarChartView*)chartView
            withData:(NSMutableArray*)array
              target:(double) target
      andGranularity:(NSString*)granularity{

    _chartView = chartView;
    [_chartView setUserInteractionEnabled:NO];

    // chartView setup
    _chartView.delegate = self;
    _chartView.descriptionText = @"";
    _chartView.noDataTextDescription = @"You need to provide data for the chart.";
    _chartView.maxVisibleValueCount = 60;
    _chartView.pinchZoomEnabled = NO;
    _chartView.drawBarShadowEnabled = NO;
    _chartView.drawGridBackgroundEnabled = NO;
    _chartView.backgroundColor = [UIColor green_title];

    // Ox axis setup
    ChartXAxis *xAxis = _chartView.xAxis;
    xAxis.labelPosition = XAxisLabelPositionBottom;
    xAxis.spaceBetweenLabels = 0.0;
    xAxis.drawGridLinesEnabled = NO;
    xAxis.axisLineColor = [UIColor turqoise];
    xAxis.labelTextColor = [UIColor white_100];
    xAxis.labelFont = [UIFont Caption1];

    _chartView.leftAxis.drawGridLinesEnabled = NO;
    _chartView.rightAxis.drawGridLinesEnabled = NO;
    _chartView.rightAxis.enabled = NO;

    _chartView.legend.enabled = NO;

    // Oy axis setup
    ChartYAxis *leftAxis = _chartView.leftAxis;
    leftAxis.labelFont = [UIFont Caption1];
    leftAxis.labelTextColor = [UIColor white_100];
    leftAxis.labelCount = 3;
    leftAxis.labelPosition = YAxisLabelPositionInsideChart;
    leftAxis.spaceTop = 0.15;
    leftAxis.axisLineColor = [UIColor turqoise];

    // define TARGET line in graphic
    [leftAxis removeAllLimitLines];
    [self updateTargetLine:target];
    [leftAxis addLimitLine:_line];


    // set data values
    [self setDataCount:array target:target andGranularity:granularity];
    [_chartView animateWithYAxisDuration:2.5];
    return self;
}


/*
 *  Method to setup the horizontal target line
 *
 *  @param  target  double with target value
 *
 *  @return void
 */
- (void) updateTargetLine:(double) target
{
    // single target line
    if (_line == nil)
    {
        ChartLimitLine *targetLine = [[ChartLimitLine alloc] initWithLimit:target label:@""];
        _line = targetLine;
    }

    // target line setup
    if (target != 0 )
    {
        _line.label = @"T";
    }
    _line.lineWidth = 0.8;
    _line.lineColor = [UIColor app_blue];
    _line.labelPosition = ChartLimitLabelPositionRight;
    _line.valueFont = [UIFont systemFontOfSize:10.0];
}

/*
 *  Method to setup data for the BarChart graphic
 *
 *  @param  array   NSMutableArray with array of dictionaries
 *  @param  target  double with target value
 *  @param  granularity NSString ("Monthly", "weekly" or "daily")
 *
 *  @return void
 */
- (void)setDataCount:(NSMutableArray*)array target:(double)target andGranularity:(NSString *)granularity
{
    NSInteger arraySize = [array count];
    NSMutableArray *arrayOy = [[NSMutableArray alloc] initWithCapacity:0];
    NSMutableArray *arrayOx = [[NSMutableArray alloc] initWithCapacity:0];

    // get array of values(arrayOy) and keys(arrayOx) from 
    for (NSDictionary *elem in array) {

        [arrayOy addObject: [elem objectForKey:@"value" ]];
        [arrayOx addObject:[elem objectForKey:@"date"]];

    }

    NSMutableArray *yVals = [[NSMutableArray alloc] init];
    NSMutableArray *arrColor = [[NSMutableArray alloc] init];

    for(int i = 0; i < arraySize; i++)
    {
        double val = [[arrayOy objectAtIndex:i]doubleValue];
        [yVals addObject:[[BarChartDataEntry alloc] initWithValue:val xIndex:i+1]];
        if (val < target ) {
            [arrColor addObject:[UIColor red_bar]];
        }else{
            [arrColor addObject:[UIColor green_bar]];
        }
    }

    // Ox label values depends on granularity
    NSMutableArray *xVals = [[NSMutableArray alloc] init];
    [xVals addObject:@""]; // empty value to creat padding from the end
    for (int i = 0; i < arraySize; i++)
    {
        // Formatting Ox axis labels concerning data and granularity
        NSDate* date = [NSDate dateWithTimeIntervalSince1970:[[arrayOx objectAtIndex:i] doubleValue]];
        NSDateFormatter *formatter = [[NSDateFormatter alloc] init];
        if ([granularity isEqualToString:@"dayly"] ) {
            [formatter setDateFormat:@"HH:mm"];
        }else{
            [formatter setDateFormat:@"dd/MM"];
        }

        [xVals addObject:[formatter stringFromDate:date]];
    }
    [xVals addObject:@""]; // empty value to creat padding from the end



    BarChartDataSet *set1 = [[BarChartDataSet alloc] initWithYVals:yVals label:@""];


    [set1 setColors:(arrColor)];
    [set1 setBarSpace: 0.90]; // creat a space between of each bar 90%

    set1.drawValuesEnabled = NO;

    NSMutableArray *dataSets = [[NSMutableArray alloc] init];
    [dataSets addObject:set1];

    BarChartData *data = [[BarChartData alloc] initWithXVals:xVals dataSets:dataSets];

    _chartView.data = data;

}

Answer 1

What's your ios-charts version? I guess the blue bar is there when you highlight the red bar? It should be solved if it is only can be seen when you highlight it in latest version.

For Q2, each yAxis has a property called startAtZeroEnabled . Do whatever you like.

For Q3, in latest code, the limit line label has more position options. Another way is you can try write your own position in yAxis renderer's renderLimitLine function

Answer 2

This is what i used for the chart. Your answer helped me a lot!

func setChart(dataPoints: [String], values: [Double]) {
    barChartView.noDataText = "You need to provide data for the chart"
    var dataEntries: [BarChartDataEntry] = []

    for i in 0..<dataPoints.count {
        let dataEntry = BarChartDataEntry(value: values[i], xIndex: i)
        dataEntries.append(dataEntry)
    }

    let chartDataSet = BarChartDataSet(yVals: dataEntries, label: "")
    let chartData = BarChartData(xVals: months, dataSet: chartDataSet)
    barChartView.data = chartData
    barChartView.descriptionText = ""
    chartDataSet.colors = [UIColor(red: 1, green: 1, blue: 1, alpha: 1)]


    barChartView.xAxis.drawGridLinesEnabled = false
    barChartView.xAxis.drawLabelsEnabled = false
    barChartView.xAxis.labelWidth = 3
    barChartView.xAxis.axisLineWidth = 1
    barChartView.xAxis.labelTextColor = UIColor.whiteColor()
    barChartView.xAxis.axisLineColor = UIColor.whiteColor()
    barChartView.xAxis.labelPosition = .Bottom


    barChartView.rightAxis.enabled = false



    //barChartView.xAxis.labelTextColor = UIColor.whiteColor()

    barChartView.drawBarShadowEnabled = false

    barChartView.leftAxis.drawGridLinesEnabled = false
    barChartView.leftAxis.enabled = true
    barChartView.leftAxis.axisLineColor = UIColor.whiteColor()
    barChartView.leftAxis.labelTextColor = UIColor.whiteColor()
    barChartView.leftAxis.labelCount = 4
    barChartView.leftAxis.axisLineWidth = 1

    barChartView.legend.enabled = false

    //barChartView.borderLineWidth


}

this is what i got: https://www.dropbox.com/s/uskvwcbq3mlaf9o/Screen%20Shot%202016-04-25%20at%2017.14.36.png?dl=0