UIView coordinate systems - offsetting and translating - objective-c

I'm pretty sure this is more a of a math question, but I'll phrase it in the context of UIView and iPad-related objective C
I am importing raw data from a mapping file I have created from some public domain material downloaded elsewhere, then split out to isolate various regions within the map. Each region has a number of sub-regions, much like, for example, the continental US and then the various states which appear within the US, and then each sub-region is broken down again, into, let's say, counties.
Each state, and each county has a bounding box which tells me the origin, the width, and height each is.
In my initial setup, I created a separate view for each state, and then another view for each county. The polygon representing the area of the state/county was rendered (obviously with the county on top of the state so it would be visible) relative to a view I created through interface builder, called mainContainerView. This initial setup worked correctly.
Now I am trying to change things a bit, by adding the counties to the UIView holding the polygon for the state, so I will be able to overlay the state as a clipping mask on the counties. The problem is that no matter what I try, I cannot seem to get the county to translate to the right place within the state's view.
It seems like it should be straightforward addition or subtraction as the scaling for each item is exactly the same, and I'm not trying to do any major transformations, so I do not believe the CFAffineTransformation family is needed.
I can post code if necessary, but I'm not trying to get someone to write my program for me; I just want someone to point me in the right direction here, by giving me a suggestion on how to set the county relative to the state within the state's view.
As per a request, here's the relevant code that I am working on right now. This code does not work, but it gives you the idea as to what I'm doing. Posting sample data is a little more difficult, as it involves arrays of points and data extracted from a .SHP file designed to produce a map (and subdivisions). I'll include some comments in the code with some real point values as I step through the program to show you what's happening to them.
MASK_MAX_EASTING, MASK_MAX_NORTHING, MASK_MIN_EASTING, and MASK_MIN_NORTHING are constants which define the bounding box for the entire map of the country when made up of states.
DIST_MAX_EASTING, DIST_MAX_NORTHING, DIST_MIN_EASTING, and DIST_MIN_NORTHING are constants which define the bounding box for a map of the country when made up of the counties. The scales of the two maps are slightly different, so, by using the different bounding boxes, I've been able to scale the two maps to the same size.
-(void)didLoadMap:(NSNotification *)notification {
id region = [notification object];
ShapePolyline *polygon = [region polygon];
if ([notification name] == #"MapsLoadingForState") {
// m_nBoundingBox is an array which contains the RAW northing and easting values for each subdivision. [0] - west limit, [1] - south limit, [2] - east limit, [3] - north limit.
// The code below, combined with the drawrect method in DrawMap.m (below) puts all the states on the map in precisely the right places, so for the state maps, it works just fine.
CGFloat originX = ((polygon->m_nBoundingBox[0]-MASK_MIN_EASTING)*stateScaleMultiplier)+([mainContainerView frame].size.width/2);
CGFloat originY = ((MASK_MAX_NORTHING-(polygon->m_nBoundingBox[3]))*stateScaleMultiplier)+[mainContainerView frame].origin.y;
CGFloat width = polygon->m_nBoundingBox[2] - polygon->m_nBoundingBox[0];
CGFloat height = polygon->m_nBoundingBox[3] - polygon->m_nBoundingBox[1];
CGFloat scaledWidth = width*stateScaleMultiplier;
CGFloat scaledHeight = height*stateScaleMultiplier;
UIColor *subViewColor = [UIColor colorWithRed:0.0 green:1.0 blue:1.0 alpha:0.0];
stateMapView = [[DrawMap alloc] initWithFrame:CGRectMake(originX, originY, scaledWidth, scaledHeight)];
[stateMapView setBackgroundColor:subViewColor];
[stateMapView setStateScale:stateScaleMultiplier];
[stateMapView setCountyScale:countyScaleMultiplier]; // Not actually needed.
[stateMapView setClippingMask:polygon];
UIColor *colorMask = [UIColor colorWithWhite:1.0 alpha:1.0];
[stateMapView setForeground:colorMask];
[states addObject:stateMapView]; // Add the state map view to an array (for future use)
[mapView addSubview:stateMapView]; // MapView is a UIView of equivalent size and shape as mainContainerView.
} else {
// This is where the problems occur.
CGFloat originX = (polygon->m_nBoundingBox[0]-DIST_MIN_EASTING); // 4431590 (raw data)
originX *= countyScaleMultiplier; // 303.929108
originX += ([mainContainerView frame].size.width/2); // 815.929077
CGFloat originY = (DIST_MAX_NORTHING-polygon->m_nBoundingBox[3]); 4328997
originY *= countyScaleMultiplier; // 296.893036
originY -= [mainContainerView frame].origin.y; // 340.893036
CGRect frame = [stateMapView frame]; // Dummy variable created for watches in the debugger. x=856.237183, y=332.169922 width=34.3800087, height=28.7534008
// When I was invoking DrawMap.h and the included drawrect method, the county map would easily be displayed in the right place, as you can see by the values above.
// This is where I think the problem is. The X value is WAY off as far as I can tell.
originX -= frame.origin.x; // -40.3081055
originY -= frame.origin.y; // 8.72311401
CGPoint countyOrigin = CGPointMake(originX,originY);
// Translate the county's origin so it is relative to the origin of stateMapView, not MainContainerView (doesn't work)
[stateMapView addCountyMap:[region polygon] withColor:winner translatedBy:countyOrigin];
[stateMapView setNeedsDisplay];
}
I am aware that there are several issues with this code and some stuff outside the scope of this question may make a few of you raise an eyebrow (or two) but this is definitely a work in progress...
Here's the relevant code from DrawMap.m; I've cut a bunch of stuff out because it is extraneous.
- (void)drawRect:(CGRect)rect {
// Set up
for (int i=0;i<[countyMaps count];i++) {
// Draw the polygon.
[[countyColors objectAtIndex:i] setFill];
[self drawPolygon:[countyMaps objectAtIndex:i]
usingScale:stateScale
translatedBy:CGPointMake([[countyTranslations objectAtIndex:2*i] floatValue],
[[countyTranslations objectAtIndex:2*i+1] floatValue])];
}
// Set the blend mode to multiply
CGContextSetBlendMode(context, kCGBlendModeMultiply);
// Draw a path with clippingMask
[[UIColor colorWithWhite:1.0 alpha:1.0] setFill];
// CGPoint translate = CGPointMake(0,0);
[self drawPolygon:clippingMask usingScale:stateScale translatedBy:CGPointMake(0,0)];
}
-(void)drawPolygon:(ShapePolyline *)aPolygon usingScale:(float)mapScale translatedBy:(CGPoint)trans {
for (int j=0;j<[aPolygon numParts];j++) {
UIBezierPath *path = [UIBezierPath bezierPath];
[path setLineJoinStyle:kCGLineJoinRound];
int startIndex = [[[aPolygon m_Parts] objectAtIndex:j] intValue];
int endIndex = [aPolygon numPoints];
CGPoint startPoint;
[[[aPolygon m_Points] objectAtIndex:startIndex] getValue:&startPoint];
startPoint.x *=mapScale;
startPoint.y *=mapScale;
startPoint.x -= trans.x;
startPoint.y -= trans.y;
[path moveToPoint:startPoint];
if (j+1 != [aPolygon numParts]){
endIndex = [[[aPolygon m_Parts] objectAtIndex:j+1] intValue];
}
for (int k=startIndex+1; k<endIndex; k++)
{
CGPoint nextPoint;
[[[aPolygon m_Points] objectAtIndex:k] getValue:&nextPoint];
nextPoint.x *= mapScale;
nextPoint.y *= mapScale;
nextPoint.x -= trans.x;
nextPoint.y -= trans.y;
[path addLineToPoint:nextPoint];
}
[path closePath];
// [path stroke];
[path fill];
}
}
This tome is really may be too much information, or it may not be enough. Either way, hopefully by adding code, I've given you some information to go on...

-SOLVED-
And it was so simple. I'm surprised it took me this long to figure it out, as I was right in my initial question - it was simple addition and subtraction:
All translations are now done inside the methods which render the polygons. For each point in the polygon, I needed to add the origin of the state's view, and subtract the origin of the county's bounding box, then subtract 44 from the Y-value (the height of the control bar).
This, I think, is an example of over-thinking a problem, getting frustrated, over-thinking more, only to find out three days later that the answer is staring you in the face, waving a red flag, and shouting, "I'M OVER HERE!!!!"

Related

Drawing outside content insets with drawGlyphsForGlyphRange

I'm trying to show some extra symbols next to lines in NSTextView, based on text attributes.
I have successfully subclassed NSLayoutManager, but it seems that layout manager can't draw outside the area set by textContainerInset.
Because my text view can potentially have a very long strings, I'm hoping to keep the drawing connected to displaying glyphs. Is there a way to trick the layout manager to be able to draw inside the content insets — or is there another method I use instead of drawGlyphsForGlyphRange?
I have tried calling super before and after drawing, as well as storing and not storing graphics state. I also attempted setDrawsOutsideLineFragment:YES for the glyphs, but with no luck.
Things like Xcode editor itself uses change markers, so I know that this is somehow doable, but it's very possible I'm looking from the wrong place.
My drawing method, simplified:
- (void)drawGlyphsForGlyphRange:(NSRange)glyphsToShow atPoint:(NSPoint)origin {
[super drawGlyphsForGlyphRange:glyphsToShow atPoint:origin];
NSTextStorage *textStorage = self.textStorage;
NSTextContainer *textContainer = self.textContainers[0];
NSRange glyphRange = glyphsToShow;
NSSize offset = self.textContainers.firstObject.textView.textContainerInset;
while (glyphRange.length > 0) {
NSRange charRange = [self characterRangeForGlyphRange:glyphRange actualGlyphRange:NULL], attributeCharRange, attributeGlyphRange;
id attribute = [textStorage attribute:#"Revision" atIndex:charRange.location longestEffectiveRange:&attributeCharRange inRange:charRange];
attributeGlyphRange = [self glyphRangeForCharacterRange:attributeCharRange actualCharacterRange:NULL];
attributeGlyphRange = NSIntersectionRange(attributeGlyphRange, glyphRange);
if (attribute != nil) {
[NSGraphicsContext saveGraphicsState];
NSRect boundingRect = [self boundingRectForGlyphRange:attributeGlyphRange
inTextContainer:textContainer];
// Find the top of the revision
NSPoint point = NSMakePoint(offset.width - 20, offset.height + boundingRect.origin.y + 1.0);
NSString *marker = #"*";
[marker drawAtPoint:point withAttributes:#{
NSForegroundColorAttributeName: NSColor.blackColor;
}];
[NSGraphicsContext restoreGraphicsState];
}
glyphRange.length = NSMaxRange(glyphRange) - NSMaxRange(attributeGlyphRange);
glyphRange.location = NSMaxRange(attributeGlyphRange);
}
}
The answer was much more simple than I anticipated.
You can set lineFragmentPadding for the associated NSTextContainer to make more room for drawing in the margins. This has to be taken into account when setting insets for the text container.

Drawing board/grid with Cocoa

I'm writing a small boardgame for Mac OS X using Cocoa. I the actual grid is drawn as follows:
- (void)drawRect:(NSRect)rect
{
for (int x=0; x < GRIDSIZE; x++) {
for (int y=0; y < GRIDSIZE; y++) {
float ix = x*cellWidth;
float iy = y*cellHeight;
NSColor *color = (x % 2 == y % 2) ? boardColors[0] : boardColors[1];
[color set];
NSRect r = NSMakeRect(ix, iy, cellWidth, cellHeight);
NSBezierPath *path = [NSBezierPath bezierPath];
[path appendBezierPathWithRect:r];
[path fill];
[path stroke];
}
}
}
This works great, except that I see some errors in colors between the tiles. I guess this is due to some antialiasing or similar. See screenshots below (hopefully you can also see the same problems... its some black lines where the tiles overlap):
Therefore I have these questions:
Is there any way I can remove these graphical artefacts while still maintaining a resizable/scalable board?
Should I rather use some other graphical library like Core Graphics or OpenGL?
Update:
const int GRIDSIZE = 16;
cellWidth = (frame.size.width / GRIDSIZE);
cellHeight = (frame.size.height / GRIDSIZE);
If you want crisp rectangles you need to align coordinates so that they match the underlying pixels. NSView has a method for this purpose: - (NSRect)backingAlignedRect:(NSRect)aRect options:(NSAlignmentOptions)options. Here's a complete example for drawing the grid:
const NSInteger GRIDSIZE = 16;
- (void)drawRect:(NSRect)dirtyRect {
for (NSUInteger x = 0; x < GRIDSIZE; x++) {
for (NSUInteger y = 0; y < GRIDSIZE; y++) {
NSColor *color = (x % 2 == y % 2) ? [NSColor greenColor] : [NSColor redColor];
[color set];
[NSBezierPath fillRect:[self rectOfCellAtColumn:x row:y]];
}
}
}
- (NSRect)rectOfCellAtColumn:(NSUInteger)column row:(NSUInteger)row {
NSRect frame = [self frame];
CGFloat cellWidth = frame.size.width / GRIDSIZE;
CGFloat cellHeight = frame.size.height / GRIDSIZE;
CGFloat x = column * cellWidth;
CGFloat y = row * cellHeight;
NSRect rect = NSMakeRect(x, y, cellWidth, cellHeight);
NSAlignmentOptions alignOpts = NSAlignMinXNearest | NSAlignMinYNearest |
NSAlignMaxXNearest | NSAlignMaxYNearest ;
return [self backingAlignedRect:rect options:alignOpts];
}
Note that you don't need stroke to draw a game board. To draw pixel aligned strokes you need to remember that coordinates in Cocoa actually point to lower left corners of pixels. To crisp lines you need to offset coordinates by half a pixel from integral coordinates so that coordinates point to centers of pixels. For example to draw a crisp border for a grid cell you can do this:
NSRect rect = NSInsetRect([self rectOfCellAtColumn:column row:row], 0.5, 0.5);
[NSBezierPath strokeRect:rect];
First, make sure your stroke color is not black or gray. (You're setting color but is that stroke or fill color? I can never remember.)
Second, what happens if you simply fill with green, then draw red squares over it, or vice-versa?
There are other ways to do what you want, too. You can use the CICheckerboardGenerator to make your background instead.
Alternately, you could also use a CGBitmapContext that you filled by hand.
First of all, if you don't actually want your rectangles to have a border, you shouldn't call [path stroke].
Second, creating a bezier path for filling a rectangle is overkill. You can do the same with NSRectFill(r). This function is probably more efficient and I suspect less prone to introduce rounding errors to your floats – I assume you realize that your floats must not have a fractional part if you want pixel-precise rectangles. I believe that if the width and height of your view is a multiple of GRIDSIZE and you use NSRectFill, the artifacts should go away.
Third, there's the obvious question as to how you want your board drawn if the view's width and height are not a multiple of GRIDSIZE. This is of course not an issue if the size of your view is fixed and a multiple of that constant. If it is not, however, you first have to clarify how you want the possible remainder of the width or height handled. Should there be a border? Should the last cell in the row or column take up the remainder? Or should it rather be distributed equally among the cells of the rows or columns? You might have to accept cells of varying width and/or height. What the best solution for your problem is, depends on your exact requirements.
You might also want to look into other ways of drawing a checkerboard, e.g. using CICheckerboardGenerator or creating a pattern color with an image ([NSColor colorWithPatternImage:yourImage]) and then filling the whole view with it.
There's also the possibility of (temporarily) turning off anti-aliasing. To do that, add the following line to the beginning of your drawing method:
[[NSGraphicsContext currentContext] setShouldAntialias:NO];
My last observation is about your general approach. If your game is going to have more complicated graphics and animations, e.g. animated movement of pieces, you might be better off using OpenGL.
As of iOS 6, you can generate a checkerboard pattern using CICheckerboardGenerator.
You'll want to guard against the force unwraps in here, but here's the basic implementation:
var checkerboardImage: UIImage? {
let filter = CIFilter(name: "CICheckerboardGenerator")!
let width = NSNumber(value: Float(viewSize.width/16))
let center = CIVector(cgPoint: .zero)
let darkColor = CIColor.red
let lightColor = CIColor.green
let sharpness = NSNumber(value: 1.0)
filter.setDefaults()
filter.setValue(width, forKey: "inputWidth")
filter.setValue(center, forKey: "inputCenter")
filter.setValue(darkColor, forKey: "inputColor0")
filter.setValue(lightColor, forKey: "inputColor1")
filter.setValue(sharpness, forKey: "inputSharpness")
let context = CIContext(options: nil)
let cgImage = context.createCGImage(filter.outputImage!, from: viewSize)
let uiImage = UIImage(cgImage: cgImage!, scale: UIScreen.main.scale, orientation: UIImage.Orientation.up)
return uiImage
}
Apple Developer Docs
Your squares overlap. ix + CELLWIDTH is the same coordinate as ix in the next iteration of the loop.
You can fix this by setting the stroke color explicitly to transparent, or by not calling stroke.
[color set];
[[NSColor clearColor] setStroke];
or
[path fill];
// not [path stroke];

Custom MKOverlayView/unmodified MKPolygonView is clipped at certain zoom levels

I'm having an issue with both a custom MKOverlayView and standard MKPolygonView being clipped at certain zoom levels when there are multiple overlays added to a map.
The overlay of Algeria at two double tap zoom level.
The overlay of Algeria at three double tap zoom level. Note the clipping.
A few observations:
This occurs regardless of whether or not I use a custom MKOverlayView or return an MKPolygonView with the same polygons.
If I only draw one overlay, this problem does not occur.
This does not occur for all overlays - only some.
As far as code goes: this adds the overlay to an NSMutableArray (borderOverlays), which is then accessed elsewhere to load the overlay for a specific country ID. minX/minY/maxX/maxY are latitude/longitude values; polygon is a path constructed from an ESRI shapefile.
CLLocationCoordinate2D mbrMin = CLLocationCoordinate2DMake(minY, minX);
CLLocationCoordinate2D mbrMax = CLLocationCoordinate2DMake(maxY, maxX);
MKMapPoint minPoint = MKMapPointForCoordinate(mbrMin);
MKMapPoint maxPoint = MKMapPointForCoordinate(mbrMax);
MKMapSize size = MKMapSizeMake(maxPoint.x - minPoint.x, maxPoint.y - minPoint.y);
MKMapRect rect = MKMapRectMake(minPoint.x, minPoint.y, size.width, size.height);
if ( spans180 ) {
rect = MKMapRectMake(minPoint.x, minPoint.y, MKMapSizeWorld.width * 2, size.height);
}
CustomMKOverlay* overlay = [[CustomMKOverlay alloc] initWithPolygon:polygon withBoundingMapRect:rect];
[borderOverlays addObject:overlay];
The overlay is added to the map via:
[mapView addOverlay:overlay];
viewForOverlay:
- (MKOverlayView *)mapView:(MKMapView*)aMapView viewForOverlay:(id<MKOverlay>)overlay
{
if ( [overlay isKindOfClass:[CustomMKOverlay class]] ) {
/* Note: the behaviour if this chunk is not commented is the exact same as below.
CustomMKOverlayView* overlayView = [[[CustomMKOverlayView alloc] initWithOverlay:overlay withMapView:aMapView] autorelease];
[borderViews addObject:overlayView];
return overlayView; */
MKPolygonView* view = [[[MKPolygonView alloc] initWithPolygon:((CustomMKOverlay*)overlay).polygon] autorelease];
view.fillColor = [((CustomMKOverlay*)overlay).colour colorWithAlphaComponent:0.5f];
view.lineWidth = 5.0f;
view.strokeColor = [UIColor blackColor];
[borderViews addObject:view];
return view;
}
}
When MKPolygonView is used, there is no drawing code (the example shown). For completion's sake, though, here's my custom drawing code, and the same issue occurs. The outlines normally draw - this is actually debugging drawing, which draws a rect around the boundingMapRect of the overlay and fills it without mucking around with the outlines.
- (void)drawMapRect:(MKMapRect)mapRect zoomScale:(MKZoomScale)zoomScale inContext:(CGContextRef)context
{
CustomMKOverlay* overlay = (CustomMKOverlay*)self.overlay;
CGRect clipRect = [self rectForMapRect:overlay.boundingMapRect];
CGContextAddRect(context, clipRect);
CGContextClip(context);
UIColor* colour = [UIColor redColor];
colour = [colour colorWithAlphaComponent:0.5f];
CGContextSetFillColorWithColor(context, [colour CGColor]);
CGRect fillRect = [self rectForMapRect:overlay.boundingMapRect];
CGContextFillRect(context, fillRect);
}
Suffice to say, I'm a bit stumped at this point - it's almost as if the zoomed tiled that's being loaded draws over the overlay. I've poured over various examples regarding TileMap and HazardMap, but as I am not loading my own map tiles, they're not very helpful.
I'm probably missing something painfully obvious. Any help would be appreciated. I'm happy to provide more code/context if necessary.
It would appear that the culprit is:
CLLocationCoordinate2D mbrMin = CLLocationCoordinate2DMake(minY, minX);
CLLocationCoordinate2D mbrMax = CLLocationCoordinate2DMake(maxY, maxX);
Bounding rectangles for MKOverlays apparently need to be based on the northwest/southeast coordinates of the bounding region, and not southwest/northeast (which is the format the ESRI shapefile stores its bounding coordinates in). Changing the offending code to:
CLLocationCoordinate2D mbrMin = CLLocationCoordinate2DMake(maxY, minX);
CLLocationCoordinate2D mbrMax = CLLocationCoordinate2DMake(minY, maxX);
Appears to resolve all issues with zooming and strange outline anomalies. I hope this helps anyone who comes across this problem in the future (and I'd like to hear about it if it doesn't, since this solution works a treat for me).
Also: if anyone can point to any documentation that states this, I'd like to see it.

Custom Charts for iPad Application

I have to draw charts as displayed in following image for an iPad app. is there any free native chart api available for it?
Or any help to draw it...
Any help would be appreciable.
I would like to go with Quartz 2D.
I dont think so any library will do your deal. You need to create your own. Here are my ideas.
For one kind of charts, you can take idea how speedometer works. Eeww, I didnt searched links for that, hope idea will do. You can calculate angle for your percentage and draw arc accordingly. This wont be too hard.
For droplets, oops that will be bit busy. But here is some logic for that:
I guess you will have percentage for each segment in your droplet like chart.
You can calculate radius for them ! Hope image below will better explain your idea.
I am just trying to share logic and not code, since SO is not about give me code kinda stuff :)
Hope this helps
I have a working project on GitHub.
#import "PlectrumView.h"
#implementation PlectrumView
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
}
return self;
}
-(void) drawPlectrumWithPercentage:(CGFloat) percentage color:(UIColor *)color
{
CGFloat factor = self.frame.size.width ;
percentage*=factor;
UIBezierPath* plectrum = [UIBezierPath bezierPathWithRoundedRect: CGRectMake(0, factor - percentage, percentage,percentage)
byRoundingCorners: UIRectCornerTopLeft | UIRectCornerTopRight | UIRectCornerBottomRight
cornerRadii: CGSizeMake(percentage/2, percentage/2)];
[color setFill];
[plectrum fill];
}
- (void)drawRect:(CGRect)rect
{
[self drawPlectrumWithPercentage:1.0 color:[UIColor colorWithWhite:.9 alpha:1]];
[self drawPlectrumWithPercentage:.75 color:[UIColor colorWithRed:245.0/255.0 green:134.0/255.0 blue:122.0/255.0 alpha:1]];
[self drawPlectrumWithPercentage:.61 color:[UIColor colorWithRed:171.0/255.0 green:212.0/255.0 blue:105.0/255.0 alpha:1]];
}
#end
Results in
I change the plectrum code in a way that it's area will represent the percentage instead of it's width. It feels more natural.
-(void) drawPlectrumWithPercentage:(CGFloat) percentage color:(UIColor *)color
{
static CGFloat pi = 3.141592653589793;
static CGFloat radius100percent = 50.0;
static CGFloat area100percent;
static CGFloat threeFouthPiPlusOne;
area100percent= radius100percent * radius100percent * pi *3/4 + radius100percent*radius100percent;
threeFouthPiPlusOne = (1 + (pi*(3.0/4.0)));
CGFloat area = area100percent * percentage;
CGFloat newRadius = sqrt(area / threeFouthPiPlusOne);
percentage = newRadius/ 50.0;
CGFloat factor = self.frame.size.width ;
percentage*=factor;
UIBezierPath* plectrum = [UIBezierPath bezierPathWithRoundedRect: CGRectMake(0, factor - percentage, percentage,percentage)
byRoundingCorners: UIRectCornerTopLeft | UIRectCornerTopRight | UIRectCornerBottomRight
cornerRadii: CGSizeMake(percentage/2, percentage/2)];
[color setFill];
[plectrum fill];
}
Your example pictures are actually quite easy to draw using Quartz 2D. If you are not concerned with exactly how your charts look, I would suggest looking into what is already out there. If you need the charts to look exactly as you show (for example because they should look similar to a web app), I suggest you draw them yourself. It is not that hard, to draw the kind of simple charts you show:
Use UILabels for the text
Create layers with a CGPath for the droplet shape.
Move and scale the layers with the value for each chart. They can even be animated smoothly with just a few lines of code.
Let me know if you want to try and need any more details.
There are a lot of "chart" libraries:
Check out on Cocoa Controls
or this one:
MeterView
If you use SVG, you can easily create the shapes with a function like:
/**
* #param {SVGPathElement} aShape a SVG path element
* #param {number} radius the radius of the plectrum's arc
* #param {string} fillColor color in "#rrggbb" format
*/
function drawPlectrum(aShape, radius, fillColor) {
// Creating a string which defines a path in SVG
// M = moveto, A = line to, etc. See http://www.w3.org/TR/SVG/paths.html
var ss="M "+parseInt(0)+" "+parseInt(0)+" "; // moveto 0, 0
ss+="L "+parseInt(0)+" "+parseInt(radius)+" "; // lineto 0, R
ss+="A "+parseInt(radius)+" "+parseInt(radius)+" 0 0 0 "+parseInt(radius)+" "+parseInt(2*radius)+" ";// elliptic curve to R, 2*R
ss+="A "+parseInt(radius)+" "+parseInt(radius)+" 0 0 0 "+parseInt(2*radius)+" "+parseInt(radius)+" ";// elliptic curve to 2*R, R
ss+="A "+parseInt(radius)+" "+parseInt(radius)+" 0 0 0 "+parseInt(radius)+" "+parseInt(0)+" "; // elliptic curve to R, 0
ss+="Z"; // closepath
// The d attribute of the path element holds the line information
// In XML the element will essentially be <path d="*the created string*">
aShape.setAttribute("d", ss);
// Give the color
aShape.setAttribute("fill", fillColor);
}
Successive drawings looks something like this:
// Note that 3 different path elements are used to overlap the plectrums
drawPlectrum(node, 100, "#aaaaaa");
drawPlectrum(node2, 75, "#33dd33");
drawPlectrum(node3, 50, "#3333dd");
Edit 1:
Added more comments in the code for better understandibility
Download this project and use this but they are using ARC for that.
Hope it will help you!
I think all of the above could probably be done using transparent images with an underlying shape that increases in size/diameter using mathematical code.
With the Arc Percentages you could have the dial (available area / 100) * Amount of Progress
and then have the image rotate by the amount to get the dial in place and an underlying coloured square fill by the same amount from left to right? this will save a lot on drawing code.

NSBezierPath Graph

I cannot figure out how to optimize the drawing of an NSView that contains a NSBezierPath.
Let me try to explain what I mean. I have a line graph, made by about 40K points, that I want to draw. I have all the points and it's easy for me to draw once the full graph using the following code:
NSInteger npoints=[delegate returnNumOfPoints:self]; //get the total number of points
aRange=NSMakeRange(0, npoints); //set the range
absMin=[delegate getMinForGraph:self inRange:aRange]; //get the Minimum y value
absMax=[delegate getMaxForGraph:self inRange:aRange]; //get the Maximum y value
float delta=absMax-absMin; //get the height of bound
float aspectRatio=self.frame.size.width/self.frame.size.heigh //compensate for the real frame
float xscale=aspectRatio*(absMax-absMin); // get the width of bound
float step=xscale/npoints; //get the unit size
[self setBounds:NSMakeRect(0.0, absMin, xscale, delta)]; //now I can set the bound
NSSize unitSize={1.0,1.0};
unitSize= [self convertSize:unitSize fromView:nil];
[NSBezierPath setDefaultLineWidth:MIN(unitSize.height,unitSize.width)];
fullGraph=[NSBezierPath bezierPath];
[fullGraph moveToPoint:NSMakePoint(0.0, [delegate getValueForGraph:self forPoint:aRange.location])];
//Create the path
for (long i=1; i<npoints; i++)
{
y=[delegate getValueForGraph:self forPoint:i];
x=i*step;
[fullGraph lineToPoint:NSMakePoint(x,y)];
}
[[NSColor redColor] set];
[fullGraph stroke];
So now I have the whole graph stored in a NSBezierPath form in real coordinate, that I can stroke. But let's suppose that now I want to display the graph adding one point at time as fast as possible.
I do not want to draw the whole set of points every time. I want to use, if possible the complete graph and visualize only a small part. Let's say that I want to render in the same frame only the first 1000 points. Is there any possibility (modifying bounds and eventually scaling the path in some way) to render only the first part of the graph in correct bounds?
I was not able to obtain the result, because if I modify the bounds then the scale changes and I'm not able to fix the problem with linewidth.
You can create a new path with just the new data, stroke it, then append that to your existing graph:
NSBezierPath* newPath = [NSBezierPath bezierPath];
//... draw the new lines in newPath ...
[newPath stroke];
[fullGraph appendBezierPath:newPath];