A couple weeks ago I decided to write my own. It took a couple evenings but it was not all that hard. I found it more difficult to try and download and incorporate other pre built ones. I built the background in Photoshop and added it as a subView to the view first.
You then set up a context like so with the size you want returned.
Code:
UIGraphicsBeginImageContext(CGSizeMake(300, 200));
CGContextRef context = UIGraphicsGetCurrentContext();
Then you set up colors and line widths with these methods
Code:
CGContextSetRGBStrokeColor();
CGContextSetLineWidth();
The main part of creating the points and adding lines to the points is this code which I iterated through using a for loop for each index of my array. The trick here was to first set the first point outside of the for loop, for the starting point. Then basically get the next index value and use that for the AddLineToPoint(). Then shift the MoveToPoint to the point the AddLineToPoint ended so it starts to draw the next line where the last one left ended. The next time thought the loop you get the new numbers from the index and the cycle starts again till the loop is all done.
Code:
CGContextMoveToPoint(); // outside of loop
CGContextAddLineToPoint(); // in loop
CGContextMoveToPoint(); // in loop
Once all of your paths have been set you stoke the path basically with this
Once I created the lines I start with the dots. I changed the color, like I set it above but to green and then used this method in my for loop to draw the dots above.
Then when you finish with all of your drawing you add it to a UIImage and then end the image context like so
Code:
UIImage *imageContext = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
At that point I just added subView over my Photoshop graphic.
I was doing a 30 day history so my Photoshop file had 30 lines spaced by 10 pixels, so every loop I multiplied i x 10 to move the graph horizontally. Vertical was easy to find too. I sorted my array so highest number was index 0 and lowest was last index. Then I subtracted the lowest from the highest number and divided that by my total pixel range which was 200 vertically.
Code:
float dif = highNum - lowNum;
float range = 200.0 / dif;
That number, range became my multiplier to find the vertical position with this code. When you get into it and start testing it it became pretty intuitive.
Code:
float vSpace = ((highNumber - currentNumber) * myRange);
So in the end I had 3 sections in my method that drew to the context, the lines, the dots and the text for the numbers. The only thing I would have done differently is build a time traveling machine to take me back 20 years and tell my younger self to take math more seriously since that is what I struggled with the most!