Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

spaniard89

macrumors newbie
Original poster
Jan 15, 2013
1
0
Hi,

I am working on an app, that would that would parse JSON and fetch the values from JSON into an array. Now I would like to plot this array into a plot(scatter).

I have until now, parsed the JSON and have the values in an array, now how can i plot the graph? I have heard a lot about COREPLOT, but it too complicated and I want my graph to be as simple as possible.

I would really appreciate any help or any example project, that would help me start.:)
 

ArtOfWarfare

macrumors G3
Nov 26, 2007
9,544
6,042
I've looked some but haven't found anything I like.

I think I'm just going to roll my own... drawing a simple plot with iOS's drawing commands doesn't seem that difficult.

I'm not quite certain, but I think for you, drawing a bunch of points should be as easy as:

Code:
- (void)drawRect:(CGRect)rect
{
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGContextSetFillColor(ctx, CGColorGetComponents([[UIColor blueColor] CGColor]));
    CGContextFillEllipseInRect(ctx, CGRectMake(x, y, width, height));
    // repeat FillEllipseInRect as many times as necessary.
}

All that's left at that point is drawing some axes and you're done, right?

Here's the documentation you'll want:

CGContext:
https://developer.apple.com/library.../reference/CGContext/Reference/reference.html

CGGeometry:
https://developer.apple.com/library...reference/CGGeometry/Reference/reference.html
 
Last edited:

chown33

Moderator
Staff member
Aug 9, 2009
10,706
8,346
A sea of green
The OP said they wanted something easier than coreplot, even though that would be my recommendation too.

Sorry, I posted in a pre-caffeinated state. I should have written "Just use Core Plot".

Here's a Ray Wenderlich tutorial that shows a scatter plot:
http://www.raywenderlich.com/13271/how-to-draw-graphs-with-core-plot-part-2

It's part 2, and part 1 has the fundamentals (and a downloadable ready-to-use project).


Plotting and charting aren't usually written as isolated components, but as part of a multi-component library of various kinds of plots/charts. So I really don't think there's much possibility of finding a simpler component. If there's a simpler plot/chart library, I don't know what it is.

One could write a component from scratch, but that's not exactly a trivial process. And if one already thinks Core Plot is too complex, I don't see how writing it from scratch would be any less so. Perhaps if someone is already skilled at iOS graphics it might be simpler, but that seems unlikely given the question (a skilled poster wouldn't be expected to ask the question at all).


So, short answer: Just use Core Plot, and search for tutorials and examples.
 

larswik

macrumors 68000
Sep 8, 2006
1,552
11
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

Code:
CGContextStrokePath();

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.

Code:
CGContextAddArc();

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!
 

Attachments

  • ploter.jpg
    ploter.jpg
    29.5 KB · Views: 82
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.