iOS Core Plot (minimal example)

Promo slide for core plot.001

At our company, Japps, data plays an important role. We wanted to present graphs to the user inside our iOS apps. Luckily there is Core Plot (there’s other options, but we like this one). It works like a charm, it is extremely flexible, and it is open source (which is useful if you want even more flexibility or want to debug). There is also quite some reference code and Q&A available. However, I could not find a minimal example, so I created one.

Setting up shop

I created a new project from scratch, using the Single View template. I included Storyboard and ARC. Then I downloaded and installed Core Plot (I went for the static library approach).

In Storyboard, the class of the main view controller was changed to ‘CorePlotExampleViewController’, and this class was actually created (subclassing ViewController). The contents of this class is discussed next.

CorePlotExampleViewController.h

Now, CorePlotExampleViewController.h was slighty modified into:

What’s going on? Well, we import CorePlot-CocoaTouch.h, which gives us access to all Core Plot functionality. Also, we implement CPTPlotDataSource, why will become more clear later.

CorePlotExampleViewController.m

Next, we changed our view controller’s viewDidLoad:

What’s going on? First, CPTGraphHostingView* hostView is created. Alternatively you could (as described in other examples) do this via IB (Storyboard) and create an outlet and name it ‘hostView’.

Next, CPTGraph* graph is created and set as the hostViews ‘hosted graph’. Use the graph object to change axis and global layout. It can contain one or more plot spaces and actual plots (the lines, bars, dots, pies, etc). In this example, we take the graph’s default plot space and change its x and y ranges, this determines what part of the plot is shown to the user.

Finally, we create CPTScatterPlot* plot, the actual plot line itself. The X and Y values of the plot are not specified yet. Instead, we set its dataSource, that will provide the X and Y values upon the graphs’ request. To keep things simple, our CorePlotExampleViewController class will double as dataSource, but this could be a separate object.

To let our view controller double as datasource, we already let it implement the CPTPlotDataSource protocol (in the .h) file, and now only need to define two methods:

The method numberOfRecordsForPlot returns the number of plots. We simply set it to 9. The method numberForPlot is actually called twice (for an XYScatter plot at least, which is what we created) per data point (it took me a while to realize this). One time the X value should be returned, the other time the Y value. This is determined by fieldEnum.

The plot’s points are requested by their index, which in our case ranges from 0 to 8 (so 9 in total as we specified in numberOfRecordsForPlot). To get a nice quadratic plot without too much hassle we define x as ‘index – 4’ (but this could be something irregular as well, such as values returned from an array). The y value will then simply be x * x. The return value should be an NSNumber, so you’ll have to create this, for instance with numberFromInt, as in this case, or numberFromDouble (etc.).

Closing remarks

Well, that’s it really. You should now get a plot when you run your project. This is as simple as it gets, and from here you can make it as complicated as you want: change graph (theme, padding, border, background), change the axis (color, ticks, font, labels, location, multiple y axis), add more plots, change the plots line (thickness, color, symbols) add a legend (location, font), draw different plots (points, lines, bars, pies), etc. There’s is quite some information on this already, but perhaps I’ll do a followup post with the solutions we found for our graphing demands.

21 comments

  1. Amit says:

    Good One! the tutorial is very short and precise helped me to understand the concept.
    The way code is written, filled with meaningful comments is nice and helps in understanding in easy way.

  2. Jason says:

    Simple and very helpful. Thank you

  3. Olivier says:

    Thank you very much for this clear article !!! Everything i needed to know was there.

  4. Amit says:

    installing core-plot library, also requires to set
    Other Linker flags as -Objc -all_load in Build Settings

    Had followed you tutorial, but as above thing was missing, it was crashing all the time.

  5. Anon says:

    Lifesaver!

  6. 蘇健豪 says:

    Your tutorial is fantastic !! very easy to understand

    But I have a problem, When I run the app it crash immediately.

    2013-11-08 12:26:15.555 SleepCare[1265:70b] *** Terminating app due to uncaught exception ‘NSInvalidArgumentException’, reason: ‘-[CPTTextStyle attributes]: unrecognized selector sent to instance 0xd352890’

    but I didn’t find any “CPTTextStyle attributes”, what’s going on ?

    • admin says:

      It seems to me this problem is inside code that was not part of the tutorial. In general, the problem is that you are calling (ie performing selector) ‘attributes’ on an object of class CPTTextStyle, which doesn’t exist. Since this is a runtime and not a compile time error, I assume you are either casting or passing an object of class CPTTextStyle as if it was another class (a class that actually has the attributes selector).

      I sadly can not help you more than this, and since it has been a while since you commented (it seems I didn’t get the comment-emails from WordPress correctly), I hope you already sorted it out. If not, may I suggest StackOverflow.com? An excellent website to ask peers for help, as long as you formulate your question well and add some code to your comment (always good to trim it down to a minimal example first).

      Best,
      Jochem

  7. Tahir says:

    A really good one for the CorePlot beginners.

  8. Kate says:

    thank you a lot!

  9. Patrice Tene says:

    Open your apps Target Build Settings, and for Other Linker Flags include this:

    -ObjC

    it should be able to work after that.

  10. demo_hbt says:

    This article is useful, thank ya ~

  11. John says:

    Great tutorial. With something as ornamental as Core Plot, having a simple tutorial like this to start from is very helpful.

  12. Siva Kalyan K says:

    Go to build settings and find other linker flags section where you need to add flags as -Objc -all_load

    Thats it the code will run.

  13. Stefan says:

    This is the first tutorial I understood. Thanks a lot, very good job!

  14. Jeff says:

    Thank you, you should commit that to the github project. That would make handling the library a lot more easier.

  15. Emerson says:

    Very nice thanks. You won’t need to include Obj flag if you are installing CorePlot via Cocoapod (much easier approach than dealing with lengthy build process).

  16. Tom says:

    This was the example that got me started. Thank you.

  17. Nandu says:

    Great tutorial. But, i have build failed there is no warning, no error but it shows always build failed. please help me

    Im using core plot library, and import the coreplotLibrary.xcodeProject in my application.

     

  18. Sue says:

    Hi –

     

    I tried to adapt your tutorial to an app I am writing in Swift.  Things seem to work except that when I try to set the X points in a scatterplot using
    if (fieldEnum == CPTScatterPlotFieldX)
    Xcode tells me that CPTScatterPlotFieldX is an unrecognized identifier
    I can find it listed in the CPTScatterPlotField enum (by simply clicking on the “unrecognized identifier” and asking to see its definition.

    Any ideas??

  19. Anonymous says:

    nice wirten

  20. Andre says:

    I am very grateful for this post) thanks great to starts with!!!

Leave a Reply

Your email address will not be published.