Gradient effect for Line Graph in iPhone

Question

I'm trying to generate a graph with gradient/shading effect. Now I'm able to draw line graph and applied gradient effect to that graph. It is applying to whole view not to the graph. Now I'm getting image like

this. But I want like

this. I want gradient effect just under the graph.

Please help me in this. Thanks in advance.

The code that I'm using is:

UIGraphicsBeginImageContext(self.graphView.frame.size);
[graphView.image drawInRect:CGRectMake(0, 0, self.graphView.frame.size.width, self.graphView.frame.size.height)];
CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
CGContextSetLineJoin(UIGraphicsGetCurrentContext(), kCGLineJoinRound);
CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 2.0);
CGContextSetRGBFillColor(UIGraphicsGetCurrentContext(), 225, 48, 48, 1.0);
CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), 225, 225, 0.0, 1.0);
CGContextBeginPath(UIGraphicsGetCurrentContext());

float xCordinate, yCordinate;

for (int i = 0; i < [graphValues count]; i++) {
    int val = [[graphValues objectAtIndex: i] intValue] / 5;
    float diff = [[graphValues objectAtIndex: i] floatValue] / 5 - val;
    yCordinate = val * 120 + 120 * diff;
    xCordinate = graphWidth * i / [graphValues count] + 60;
    if (i == 0) 
        CGContextMoveToPoint(UIGraphicsGetCurrentContext(), xCordinate, graphHeight + 60 - yCordinate);
    else 
        CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), xCordinate, graphHeight + 60 - yCordinate);
}
CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), xCordinate, graphHeight + 60);
CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), 60, graphHeight + 60);
CGContextClosePath(UIGraphicsGetCurrentContext()); 
CGContextSaveGState(UIGraphicsGetCurrentContext());
CGContextDrawPath(UIGraphicsGetCurrentContext(), kCGPathStroke);

// CGContextFillPath(UIGraphicsGetCurrentContext());

CGContextClip(UIGraphicsGetCurrentContext());


//Draw Gradient
UIColor *topColor = [UIColor colorWithRed: 1.0 green:1.0 blue:1.0 alpha:1.0];
UIColor *bottomColor = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.0];
CGColorRef colorRef[] = { [topColor CGColor], [bottomColor CGColor] };
CFArrayRef colors = CFArrayCreate(NULL, (const void**)colorRef, sizeof(colorRef) / sizeof(CGColorRef), &kCFTypeArrayCallBacks);

CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, colors, NULL);
CFRelease(colorSpace);
CFRelease(colors);

//  Draw a linear gradient from top to bottom
CGPoint gradStartPoint = CGPointMake(50.0, graphView.bounds.size.height);
CGPoint gradEndPoint = CGPointMake(50.0, 0.0);
CGContextDrawLinearGradient(UIGraphicsGetCurrentContext(), gradient, gradStartPoint, gradEndPoint, 0);

CFRelease(gradient);

// Cleanup
CGColorSpaceRelease(colorSpace);

CGContextRestoreGState(UIGraphicsGetCurrentContext());

graphView.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

Answer 1

The trick is to set a clipping path before you draw the gradient. See the CGContextRef docs for details.