Question

There are a lot of question about graph with gradient here but I can’t find solution for my case. How to draw multiple pathes right? I wanna something like this – Gradient effect for Line Graph in iPhone

I draw gradient fine, but i need put graph line above gradient. I create another path for that and draw it later after drawing gradient, but it didn’t appear. I don’t draw original path because it’s closed path, but I want open draw line strokepath.

// create the path
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, 0.0+offset, self.frame.size.height-0.0);

CGMutablePathRef strokePath = CGPathCreateMutable();

NSArray *graphValues = [delegate getDataForGraph];

float mulitplX = (self.frame.size.width - offset) / (float) ([graphValues count]-1);

float lastx;

for (int i = 0; i < [graphValues count]; i++) {
    CGPoint val = [[graphValues objectAtIndex: i] CGPointValue];
    lastx=val.x;
    CGPathAddLineToPoint(path, NULL, (val.x*mulitplX)+offset, self.frame.size.height-val.y);

    if (!i) {
        CGPathAddLineToPoint(strokePath, NULL,(val.x*mulitplX)+offset, self.frame.size.height-val.y);
    } else {
        CGPathMoveToPoint(strokePath, NULL, (val.x*mulitplX)+offset, self.frame.size.height-val.y);
    }            
}

//close path for gradient
CGPathAddLineToPoint(path, NULL, lastx*mulitplX+offset, self.frame.size.height-0.0);
CGPathAddLineToPoint(path, NULL, 0.0+offset, self.frame.size.height-0.0);

// setup the gradient
CGFloat locations[2] = { 1.0, 0.0 };
CGFloat components[8] = {
    0.95, 0.30, 0.30, 0.0,  // Start color
    0.93, 0.94, 0.30, 1.0   // End color
};
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGGradientRef gradientFill = CGGradientCreateWithColorComponents (colorSpace, components, locations, 2);

// setup gradient points
CGRect pathRect = CGPathGetBoundingBox(path);
CGPoint myStartPoint, myEndPoint;
myStartPoint.x = CGRectGetMinX(pathRect);
myStartPoint.y = CGRectGetMinY(pathRect);
myEndPoint.x = CGRectGetMinX(pathRect);
myEndPoint.y = CGRectGetMaxY(pathRect);

// draw the gradient
CGContextAddPath(context, path);
CGContextSaveGState(context);
CGContextClip(context);
CGContextDrawLinearGradient (context, gradientFill, myStartPoint, myEndPoint, 0);
CGContextRestoreGState(context);

// draw the graph - problem here
CGContextBeginPath(context);
CGContextAddPath(context, strokePath);
[[UIColor whiteColor] setStroke];
CGContextSetLineWidth(context, 2.0);
CGContextStrokePath(context);

// cleanup
CGColorSpaceRelease(colorSpace);
CGGradientRelease(gradientFill);
CGPathRelease(path);
CGPathRelease(strokePath);

Answer 1

There’s a WWDC 2011 session by the guy who wrote the built-in Stocks app, whose graphs seem similar to what you’re trying to do. He basically spends the whole hour showing how it’s done. I forget the exact session title, maybe something with Core Animation?