Generating plots on Iphone

[spaniard89]

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]

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:

- (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.html

CGGeometry:
https://developer.apple.com/library/...reference.html

[dejo]

You could also consider using a UIWebView and Google Chart Tools.

[chown33]

Core Plot:
http://code.google.com/p/core-plot/


Google search terms ios plotting and you'll find more info, such as articles on using Core Plot and comparisons with other libraries.

[KoolStar]

The OP said they wanted something easier than coreplot, even though that would be my recommendation too.

Originally Posted by chown33

Core Plot:
http://code.google.com/p/core-plot/


Google search terms ios plotting and you'll find more info, such as articles on using Core Plot and comparisons with other libraries.

[chown33]

Originally Posted by KoolStar

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/h...re-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]

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.

UIGraphicsBeginImageContext(CGSizeMake(300, 200));
CGContextRef context = UIGraphicsGetCurrentContext();

Then you set up colors and line widths with these methods

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.

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

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.

CGContextAddArc();

Then when you finish with all of your drawing you add it to a UIImage and then end the image context like so

    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.

    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.

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!