How to draw 3d Bar Graph in IOS?

Question

Mainly I want know how to draw these 3d Bars.

http://stackoverflow.com/questions/5164523/bar-graphs-in-ios-app — Rushabh, May 01 '13 at 07:14
I have checked ..those are all not 3d .I just want to know how to draw 3d bars , using UIBEzierpath or something else? — Saurav, May 01 '13 at 07:25
Admittedly not much research or effort shown, but its still a clear concrete question. Deserves an answer — Warren Burton, May 01 '13 at 10:03

Warren Burton · Accepted Answer · 2013-07-02T11:08:34.363

Much like the owl.

Learn how to draw.
Draw the flipping owl.

Each bar is pretty much the same thing so create a method to draw an arbitrary bar.

Decompose the bar into what it is. 3 trapezoids with shades of the same base colour.

Create a method to draw an arbitrary bar

-(void)drawBarOfHeight:(CGFloat)bheight width:(CGFloat)bwidth colour:(UIColor *)acolor atOrigin:(CGPoint)origin
{ 

    CGPoint correctedOrigin = origin;

    //draw the front face , its a plain rectangle - semi dark
    [[self tintOfColor:acolor tint:0.8] set];

    UIBezierPath *face1 = [UIBezierPath bezierPathWithRect:CGRectMake(correctedOrigin.x, correctedOrigin.y - bheight, bwidth, bheight)];
    [face1 fill];


    //basic trig 
    CGFloat PI = 3.141;
    CGFloat theta = 45; //degrees
    CGFloat section = bwidth * 0.7; //bit of jiggling otherwise it looks crappy

    CGFloat yoffset = section * sinf(theta * PI/180); //needs radians
    CGFloat xoffset = section * cosf(theta * PI/180);

    //draw the side face , its a trapezoid set at theta - 
    UIBezierPath *face2 = [UIBezierPath bezierPath];
    [face2 moveToPoint:CGPointMake(correctedOrigin.x + bwidth, correctedOrigin.y)];
    [face2 addLineToPoint:CGPointMake(correctedOrigin.x + bwidth, correctedOrigin.y - bheight)];
    [face2 addLineToPoint:CGPointMake(correctedOrigin.x + bwidth + xoffset, correctedOrigin.y - bheight - yoffset)];
    [face2 addLineToPoint:CGPointMake(correctedOrigin.x + bwidth + xoffset, correctedOrigin.y - yoffset)];

    //darkest shade
    [[self tintOfColor:acolor tint:0.6] set];
    [face2 fill];

    //draw the other face , its another trapezoid
    UIBezierPath *face3 = [UIBezierPath bezierPath];
    [face3 moveToPoint:CGPointMake(correctedOrigin.x , correctedOrigin.y - bheight )];
    [face3 addLineToPoint:CGPointMake(correctedOrigin.x + xoffset, correctedOrigin.y - bheight - yoffset)];
    [face3 addLineToPoint:CGPointMake(correctedOrigin.x + bwidth + xoffset, correctedOrigin.y - bheight - yoffset)];
    [face3 addLineToPoint:CGPointMake(correctedOrigin.x + bwidth, correctedOrigin.y - bheight)];

    //base shade of colour       
    [[self tintOfColor:acolor tint:1.0] set];
    [face3 fill];


}

-(UIColor *)tintOfColor:(UIColor *)acolor tint:(CGFloat)tint
{

    //tint > 1.0 lightens
    //tint < 1.0 darkens

    CGFloat red = 1.0;
    CGFloat green = 1.0;
    CGFloat blue = 1.0;
    CGFloat alpha = 1.0;


    if ([acolor getRed:&red green:&green blue:&blue alpha:&alpha]) {

        red *= tint;
        green *= tint;
        blue *= tint;

        return [UIColor colorWithRed:red green:green blue:blue alpha:1.0];
    }

    return acolor; //in case the call failed , return original


}



- (void)drawRect:(CGRect)rect
{

     //as an example
[self drawBarOfHeight:50 width:20 colour:[UIColor orangeColor] atOrigin:CGPointMake(50,200)];
[self drawBarOfHeight:100 width:20 colour:[UIColor greenColor] atOrigin:CGPointMake(50+20,200)];
[self drawBarOfHeight:70 width:20 colour:[UIColor redColor] atOrigin:CGPointMake(50+20+20,200)];


}

Giving...

Test image

All vector drawing is flinging lines and curves around the place. Get some practise in it and you can create some awesome stuff.

That looks great! +1 from me – Lefteris May 01 '13 at 10:08 — Lefteris, May 01 '13 at 10:08

How to draw 3d Bar Graph in IOS?

1 Answers1