Working with CorePlot: Styling and Adding Plots

When working with data intensive applications, a developer must often do more than just show lists of data records in a table view. The CorePlot library will allow you to add stunning data visualizations to your applications. Find out how in this Tuts+ Premium series!

Also available in this series:

  1. Working With CorePlot: Project Setup
  2. Working with CorePlot: Plot Fundamentals
  3. Working with CorePlot: Styling and Adding Plots
  4. Working with CorePlot: Creating a Bar Chart
  5. Working with CorePlot: Creating a Pie Chart

Where We Left Off

Last time we made the beginnings of our first line graph and allowed the user to navigate there from the list view. We learned about the CPTGraphHostingView, the CPTGraph, CPTXYPlotSpace, CPTScatterPlot and the CPTScatterPlotDataSource methods that provides data for the graph.

Today we will look at how to make the graph more useful to the user by specifying axis increments and how to format the increment labels. We're going to look at different ways we can customize the look and feel of the graph. Finally, we're going to discuss how to work with different plots on a single graph. Let's get started!

Step 1: Setting Axis Increments

To modify the properties of an X and Y axis we work with the 'CPTXYAxisSet' and 'CPTXAxis' objects. Open the STLineGraphViewController.m file and go to the viewDidLoad method. Just below where we work with the plot Space enter the following code:

Let's go over everything above. First, we are working with a property of the graph called the 'plotAreaFrame'. With this we are able to set the padding of the area where the graph is actually drawn and it allows us to see the axis labels (which were previously hidden). We then set the Border line style to nil to get rid of the border around the graph.

We then create an NSNumber formatter which we use to format the axis labels. We also create something called a 'CPTMutableTextStyle'. When formatting lines, fill section and text for CorePlot objects we use objects such as CPTMutableTextStyle to do it. For now we only set the font size but we can set the font type and color as well.

We then get a CPTXYAxisSet object from our graph. This axisSet contains an xAxis and a yAxis (both objects of type 'CPTXYAxis'). We then set a variety of properties on each axis. The major interval length sets what the interval at each main tick will be. We also want to get rid of the minor ticks so we set the line style to nil. We set the labellingPolicy to fixed intervals. We then set the text style for the CPTMutableTextStyle object we created earlier and the label formatter to the NSNumberFormatter we created.

Now try going to the student view and adding a student. Afterward you can go back to the graph and you should see it change. However, it still looks a bit bland...

Step 2: Changing the Look

First off, let's change the actual line. Underneath where we have work with the axis enter the following code:

This will make the line on our graph blue and increase the width. If you're more creative you can make the color a little less stark but it's important to note that it requires a CPTColor value. While we can't get a CPTColor from a UIColor, we can get it from a CGColor.

We can change the line style of the axis as well. Enter the following code below where we set the plot dataLineStyle.

This sets the line style and the major tick line style for both axis. You can also set the textStyle color as gray if you like (it's your graph, make it look like you want it to!).

You can also add a gradient fill to the line graph to enhance the look further. To do this we create a CPTFill object which we can then assign to the plot:

This creates an area fill that we put under the line graph that goes from blue to clear. The angle sets the gradient direction and the area base value sets where the gradient starts from on the plot. As we want to start at the bottom of the graph we set it to 0.

Finally, it's sometimes a good idea to have indications where the values are plotted on the line graph. To do this we need to call a CPTScatterPlot datasource method called 'symbolForScatterPlot:recordIndex':

The above code creates and returns a CPTPlotSymbol object. We can make it look like all sorts of things but our graph will use an ellipse (circle) filled with blue with a size of 10 by 10.

After you've implemented the above code, your graph should look something like this:

Step 3: Managing Multiple Plots

We're showing the student enrollment over time, but what if we wanted to see enrollment for a specific subject on the same graph?

CPTGraph objects can render multiple plots. We create a new plot just like we've done in the past, and add it to the graph. In the datasource methods we then get the graph identifier and, based on that, provide the correct data.

Let's go ahead and create a plot that shows enrollment over time for Computer Science. Underneath the code where we create the 'studentScatterPlot' (in the viewDidLoad method), add the following:

While we are in this method we should also style it a little. Let's make it green. Underneath where we set the dataLineStyle for the studentPlot, add the following code:

Underneath where we set the fill for the student scatter plot, add the following code:

We've done all this before so we wont go into what is happening. Now we're going to modify our 'numberForPlot: field: recordIndex:' method. We don't have to change the numberOfRecordsForPlot: method because either way we will have 7 records. In the numberForPlot:field:recordIndex: method, locate where we set the predicate and modify it to have the following:

This constructs the predicate based on what graph is being plotted and gets the relevant count. Finally, we need to set the symbols for the subject graph to green:

Again the above should be self-explanatory. We look at the plot identifier and, based off which plot it is, we make the plot symbol either green or blue.

Now save and run the graph and you should have something like the following:

And there you have it! A fully working graph that shows student enrollment over time as well as enrollment for Computer Science. As you can see, it's quite easy to add a second plot once you have the initial graph set up. Try adding more students to the app and Computer Science and see the graph update.

Next Time

We've covered a bit of ground today. We've established how to style our graphs by changing line colors and widths as well as adding gradient fills. We've also outlined how you can add and manage multiple plots on a single graph object.

Next time we're going to focus on how to create and customize a bar graph that shows the total number of students enrolled in each subject (each subject will have an individual bar). Catch you next time!



Related Articles