Wednesday, August 10, 2011

CorePlot Hello World

After a good while browsing through blogs and examples and posts and getting myself more confused than when I started I found this article here. It's a good article and needed some tweaking to get it to run in xcode4. I'm going to break this down in a simple manner (hopefully) to where a n00b at CorePlot can get at least a basic squared parabola nice and shiny on their screen :)

We're going to start with a View-Based Application that I am calling HelloCorePlot. The graph that we are going to make is an x^2 parabolic graph.


The first thing you should notice is the structure of the project. For this tutorial, we are not going to deal with the AppDelege .h or .m files. Our main focus are the ViewControllers and the nib files.

Open up your ViewController.h and inside currently looks like this:
We need to allow this file to understand that it is going to use CorePlot. We need to import the libraries and add to the interface declaration. What we need for our graph is and area to display our graph, an array to store our data samples for our graph, and two arrays for our x and y coordinates.


Now let's look at the ViewController.m file. There's a lot of mumbo jumbo going on in here that can be kind of overwhelming. For this purpose and for the sake of scaring you, delete all the contents after @implementation and before the @end. We are also going to initialize and define X_VAL and Y_VAL variables, synthesize our samples and graph variables and define a start and ending point of our graph on the x axis.
  The four sections we will be focusing on are Initialization and Teardown, Graph Creation, Graphing Data, and Deallocation.

Let's take a look at some initialization. What we need is to release our graph in dealloc. This function was here already, but I made you flinch and delete it.

We need to generate a bunch of random data for our graph since we don't have any of our own. First, we need to know the distance or length of our data on the x-axis and we want to place our points evenly on the graph so we have a double called "delta" (delta means change in __ ). To make our random data, we are going to loop the number of samples we have and give a value to "x" and make sure each value is evenly spaced (thank you "delta"). Then to allocate data we declare a NSMutableArray called "samples" and add an X_VAL and a Y_VAL location for each sample.

You have to implement the data source methods to tell the plot how many samples you have and then what the value(s) for each sample is. This allows CorePlot to understand which values are for the x-axis and which are for the y-axis and how many samples there are.

Now we are going to start the meat and potatoes of our code. I know this feels way more complicated than your basic cout<<"Hello World!" but at least we aren't reinventing the wheel (and there are some prep work for that jazz as well) ;p Most of our code is going to be in the viewDidLoad method.

What we need to do is call generateDataSamples to get our data snuggled in.

Here comes the bug chunk of code that actually displays our data on the screen. What we need to remember is to produce a graph, we need a view to load it in (CPTGraphHostingView) a plot space to put our samples, and a line that runs through the samples. After setting those graph items up, add the plot to the graph. 

The last bit releases our data, sets up the graph, and sets up the hosting view. We need to create some variables here to start things out.
Once you build successfully, your output should look like this:
My source is located here.
** If at all you run into a SIGABRT, double check your linker flags in the build settings.

4 comments:

  1. Just to say that this post really helped me. Thanks for the post.

    ReplyDelete
  2. Thank u so much
    Really tired of searching for coreplot1.2 examples

    ReplyDelete
  3. can you provide example code on how you would use pinch to zoom and out the graph? what about line graphs or other types of math graphs?

    ReplyDelete
  4. The post really helped. Thank you

    ReplyDelete

Blog Archive