Center the axis in UIView using Core Plot in xcode

Question

I've just incorporated Core Plot into my project and what I need to do is to plot different circles in a graph. I have the graph set up, and it looks good and all that, but there are some issues that I can't seem to solve. I find the documentation of Core Plot lacking, and the examples have been of little help.

I've been using this example to get my graph up, the scatter plot one, i.e. the last on in part 2: http://www.raywenderlich.com/13271/how-to-draw-graphs-with-core-plot-part-2

When I draw my graph I get the axes in the bottom left corner of my UIView, just like the example. But I want my axes to be drawn in the middle of UIView, so I'd like the origo to be at the very center of my View. How do I do that? I was able to move the axes so they cross each other in the middle of the View, but origo is still somewhere else.

I also want to change the range of my axes dynamically, which I also can't seem to solve. I want to send in a value, e.g. 6.0, to adjust the range and centering of the axes is my view, like the image below.

Answer 1

You can center an axis in the plot area using a relative axis constraint. The constraint value ranges between 0 and 1 corresponding to the edges of the plot area. Use 0.5 to position the axis exactly in the middle.

x.axisConstraints = [CPTConstraints constraintWithRelativeOffset:0.5];
y.axisConstraints = [CPTConstraints constraintWithRelativeOffset:0.5];

Answer 2

Didn't take me long to fix it. But it was a pain. 0 documentation on this. I'll do a write up here on how to do it.

-----How To----- (All the extra code I used is present in the tutorial link from the OP)

When configuring your graph there are functions that you can set the xRange and yRange. Playing around with these gave me really weird results, but I think I've figured out how it is all connected now.

I have replaced step 5 in the - (void)configureGraph method from the tutorial with this `// 5 - Enable user interactions for plot space // I've changed this from tutorial...

// This value is the passing value for the graph. That is, it's the value I'd like each side of the axes to show.
float coordinateValue = 6.0f;

CPTXYPlotSpace *plotSpace = (CPTXYPlotSpace *)graph.defaultPlotSpace;

// This code sets up the range of the two axes. I set it to start on coordinateValue.
// By setting the CPTDecimalFromDouble to 2.0 * coordinateValue I specify how long the axes are going to be.
// Since they are going to be twice as long as the value I want on each side I have to multiply with 2.
plotSpace.xRange = [CPTPlotRange plotRangeWithLocation:CPTDecimalFromDouble(-coordinateValue) length:CPTDecimalFromDouble(2.0 * coordinateValue)];
plotSpace.yRange = [CPTPlotRange plotRangeWithLocation:CPTDecimalFromDouble(-coordinateValue) length:CPTDecimalFromDouble(2.0 * coordinateValue)];


// Here I obtain each axis in order to do specifications on them.
// Axes
CPTXYAxisSet *axisSet           = (CPTXYAxisSet *)graph.axisSet;

CPTXYAxis *x                    = axisSet.xAxis;
// Setting majorIntervalLength states which value should be given a number. 3.0 sets it to each third,
// which means that my axis will show 0.0--|--|--3.0--|--|--6.0-->x
x.majorIntervalLength           = CPTDecimalFromDouble(3.0f);
x.orthogonalCoordinateDecimal   = CPTDecimalFromDouble(0.0);

// How many ticks there should be for each interval.
x.minorTicksPerInterval         = 3;

CPTXYAxis *y                    = axisSet.yAxis;
y.majorIntervalLength           = CPTDecimalFromDouble(3.0f);
y.orthogonalCoordinateDecimal   = CPTDecimalFromDouble(0.0);
y.minorTicksPerInterval         = 3;

plotSpace.allowsUserInteraction = YES;`

My graph is not centered showing the origin in the center of my UIView with axes ranging from -6.0 to 6.0.

Hope this helps someone!