I'm using Core Plot to do some graphing in an iOS app. I'm in the midst of configuring the axes, and I'm getting strange white lines below the X and to the left of the Y axis, as seen in the following picture:
My set-up code for the graph is as follows:
// 1 - Create the graph
CPTGraph *graph = [[CPTXYGraph alloc] initWithFrame:self.barHostView.bounds];
graph.plotAreaFrame.masksToBorder = NO;
self.barHostView.hostedGraph = graph;
// 2 - Configure the graph
[graph applyTheme:[CPTTheme themeNamed:kCPTPlainBlackTheme]];
graph.paddingBottom = 30.0f;
graph.paddingLeft = 30.0f;
graph.paddingTop = -1.0f;
graph.paddingRight = -5.0f;
// 3 - Set up styles
CPTMutableTextStyle *titleStyle = [CPTMutableTextStyle textStyle];
titleStyle.color = [CPTColor whiteColor];
titleStyle.fontName = #"Helvetica-Bold";
titleStyle.fontSize = 16.0f;
// 4 - Set up title
graph.title = [NSString stringWithFormat:#"Usage on %#", self.turnout];
graph.titleTextStyle = titleStyle;
graph.titlePlotAreaFrameAnchor = CPTRectAnchorTop;
graph.titleDisplacement = CGPointMake(0.0f, -16.0f);
// 5 - Set up plot space
CGFloat xMin = -1.5f;
CGFloat xMax = [self.points count] + 2;
CGFloat yMin = 0.0f;
self.yMax = [[self greatestFlowValue] floatValue] * 1.4;
CPTXYPlotSpace *plotSpace = (CPTXYPlotSpace *) graph.defaultPlotSpace;
plotSpace.xRange = [CPTPlotRange plotRangeWithLocation:CPTDecimalFromFloat(xMin) length:CPTDecimalFromFloat(xMax)];
plotSpace.yRange = [CPTPlotRange plotRangeWithLocation:CPTDecimalFromFloat(yMin) length:CPTDecimalFromFloat(self.yMax)];
CPTMutablePlotRange *yRange = [plotSpace.yRange mutableCopy];
[yRange expandRangeByFactor:CPTDecimalFromCGFloat(1.65f)];
plotSpace.yRange = yRange;
I more ore less copied this out of a tutorial and then modified it. In the walk-through, they didn't have labels on the axes -- which they had set at the left and bottom of the screen.
Can anyone explain what is causing these extra lines and how I might disable them? They only appear on my Bar Charts... I have other graphs that use scatter plots without any similar results.
It looks like you have a border on you plotAreaFrame(set by the theme), try removing it after applying the theme:
graph.plotAreaFrame.borderLineStyle = nil;
Related
I am trying to make my control lines static so instead of being displayed as part of the graph(the control lines are moving with the graph), they would be displayed like an axis
the app can only scroll horizontally
i'm talking about the two red line and the green line(which i put over the x axis)
this is how i do my lines:
// Center line
CPTScatterPlot *centerLinePlot = [[CPTScatterPlot alloc] init];
centerLinePlot.identifier = kCenterLine;
CPTMutableLineStyle *lineStyle = [CPTMutableLineStyle lineStyle];
lineStyle.lineWidth = 2.0;
lineStyle.lineColor = [CPTColor greenColor];
centerLinePlot.dataLineStyle = lineStyle;
centerLinePlot.dataSource = self;
[graph addPlot:centerLinePlot];
but maybe it has something to do with the displayed range:
////////ajuste la portion a voir
if(data.Resultats.count>10)
{
plotSpace.xRange = [CPTPlotRange plotRangeWithLocation:CPTDecimalFromDouble(data.Resultats.count - 10) length:CPTDecimalFromDouble(10)];
}
plotSpace.yRange = [CPTPlotRange plotRangeWithLocation:CPTDecimalFromDouble(RangeMin) length:CPTDecimalFromDouble(RangeMax-RangeMin)];
// Adjust visible ranges so plot symbols along the edges are not clipped
CPTMutablePlotRange *xRange = [plotSpace.xRange mutableCopy];
CPTMutablePlotRange *yRange = [plotSpace.yRange mutableCopy];
//place l'axe x sur la ligne de controle pour voir les WorkOrders
x.orthogonalCoordinateDecimal = CPTDecimalFromDouble(center);
//x.orthogonalCoordinateDecimal = yRange.location;
//y.orthogonalCoordinateDecimal = xRange.location;
//x.visibleRange = xRange;
//y.visibleRange = yRange;
//x.gridLinesRange = yRange;
//y.gridLinesRange = xRange;
[xRange expandRangeByFactor:CPTDecimalFromDouble(1.15)];//1.05
[yRange expandRangeByFactor:CPTDecimalFromDouble(1.15)];
plotSpace.xRange = xRange;
plotSpace.yRange = yRange;
If there's a limit on how far the main plot can scroll, just set the end points of the control lines outside that range. Core Plot will only draw the visible portion.
Another way to do this would be to add a second plot space to the graph. Add the control plots to this plot space instead of the default one. Set the globalXRange and globalYRange on it so it can't scroll.
How to remove negative axes from corePlot(scatterplot) in iphone and how to set the area of graph that is visible?
Here are some examples pulled from the CPTTestApp example included with Core Plot:
Setting plot ranges:
CPTXYPlotSpace *plotSpace = (CPTXYPlotSpace *)graph.defaultPlotSpace;
plotSpace.xRange = [CPTPlotRange plotRangeWithLocation:CPTDecimalFromDouble(0.0)
length:CPTDecimalFromDouble(-10.0)];
plotSpace.yRange = [CPTPlotRange plotRangeWithLocation:CPTDecimalFromDouble(0.5)
length:CPTDecimalFromDouble(1500.0)];
Remember that plot ranges are similar to NSRange—they have a starting location and length. The length can be negative if you want the reverse the direction of an axis.
Limiting the length of axes:
yAxis.visibleRange = [CPTPlotRange plotRangeWithLocation:CPTDecimalFromInteger(2)
length:CPTDecimalFromInteger(3)];
yAxis.gridLinesRange = [CPTPlotRange plotRangeWithLocation:CPTDecimalFromInteger(2)
length:CPTDecimalFromInteger(3)];
Changing the visible area:
graph.paddingLeft = 60.0;
graph.paddingTop = 60.0;
graph.paddingRight = 60.0;
graph.paddingBottom = 60.0;
You can also set padding on graph.plotAreaFrame to inset the plot area to create room for axis labels and titles.
Eric
Use plotRangeWithLocation: length: methods.
-(void)initXYAxesRanges{
//Set graph ranges for x and y planes
CPXYPlotSpace *plotSpace = (CPXYPlotSpace *)graph.defaultPlotSpace;
plotSpace.xRange = [CPPlotRange plotRangeWithLocation:CPDecimalFromFloat(0)
length:CPDecimalFromFloat(10];
plotSpace.yRange = [CPPlotRange plotRangeWithLocation:CPDecimalFromFloat(0)
length:CPDecimalFromFloat(10)];
}
I'm using Core-Plot for a trend chart in an iPhone app and haven't found how to customize the background. I can create a theme using the built-in themes, like kCPPlainWhiteTheme, but how can I change them? or create a new one?
What i basically need to do is make the background transparent.
EDIT / UPDATE
I jus tested this code but it doesn't seem to work:
//CPTheme *theme = [CPTheme themeNamed:kCPPlainWhiteTheme];
CPTheme *theme = [[CPTheme alloc]init];
chartTrend5 = (CPXYGraph *)[theme newGraph];
chartView.hostedGraph = chartTrend5;
chartTrend5.paddingLeft = 0.0;
chartTrend5.paddingTop = 0.0;
chartTrend5.paddingRight = 0.0;
chartTrend5.paddingBottom = 0.0;
chartTrend5.fill = nil;
chartTrend5.borderLineStyle = nil;
chartView.hostedGraph.fill = nil;
chartTrend5PlotSpace = (CPXYPlotSpace *)chartTrend5.defaultPlotSpace;
chartTrend5PlotSpace.xRange = [CPPlotRange plotRangeWithLocation:CPDecimalFromFloat(0)
length:CPDecimalFromFloat(5)];
// range is 0-125, but since the frame heights is 90,
// we need to convert the points to this adjusted scale. The factor is 0.72 => (90/125)
chartTrend5PlotSpace.yRange = [CPPlotRange plotRangeWithLocation:CPDecimalFromFloat(0)
length:CPDecimalFromFloat(90)];
CPXYAxisSet *axisSet = (CPXYAxisSet *)chartTrend5.axisSet;
CPXYAxis *x = axisSet.xAxis;
x.majorIntervalLength = CPDecimalFromFloat(100);
//x.constantCoordinateValue = CPDecimalFromFloat(2);
x.minorTicksPerInterval = 2;
x.borderWidth = 0;
x.labelExclusionRanges = [NSArray arrayWithObjects:
[CPPlotRange plotRangeWithLocation:CPDecimalFromFloat(-1)
length:CPDecimalFromFloat(800)],
nil];;
CPXYAxis *y = axisSet.yAxis;
y.majorIntervalLength = CPDecimalFromFloat(100);
y.minorTicksPerInterval = 1;
//y.constantCoordinateValue = length:CPDecimalFromFloat(2);
y.labelExclusionRanges = [NSArray arrayWithObjects:
[CPPlotRange plotRangeWithLocation:CPDecimalFromFloat(-26)
length:CPDecimalFromFloat(100)],
nil];
CPScatterPlot *dataSourceLinePlot = [[[CPScatterPlot alloc] init] autorelease];
dataSourceLinePlot.identifier = #"TrendChart";
dataSourceLinePlot.dataLineStyle.lineWidth = 2.f;
dataSourceLinePlot.dataLineStyle.lineColor = [CPColor colorWithComponentRed:(16/255.f)
green:(101/255.f)
blue:(122/255.f)
alpha:1];
dataSourceLinePlot.dataSource = self;
[chartTrend5 addPlot:dataSourceLinePlot];
chartTrend5.fill = nil;
// Put an area gradient under the plot above
CPColor *areaColor = [CPColor colorWithComponentRed:(212/255.f)
green:(233/255.f)
blue:(216/255.f)
alpha:1];
CPGradient *areaGradient = [CPGradient gradientWithBeginningColor:areaColor
endingColor:areaColor];
areaGradient.angle = -90.0f;
CPFill *areaGradientFill = [CPFill fillWithGradient:areaGradient];
dataSourceLinePlot.areaFill = areaGradientFill;
dataSourceLinePlot.areaBaseValue = CPDecimalFromString(#"5.25");
here I set the the fill property of CPXYGraph *chartTrend5 and *CPXYPlotSpace *chartTrend5PlotSpace to nil.
In addition to what Eric suggests, you can also try setting the fill to a clear color. For example, I've used this in the past to provide a transparent background to graphs:
CPTTheme *theme = [CPTTheme themeNamed:kCPPlainWhiteTheme];
graph = (CPTXYGraph *)[theme newGraph];
graph.fill = [CPTFill fillWithColor:[CPTColor clearColor]];
graph.plotAreaFrame.fill = [CPTFill fillWithColor:[CPTColor clearColor]];
Themes are just a convenient way to set a lot of the style properties at once. You can set any of them individually to customize the look. Any time you want an area to be transparent, you can set its fill to nil. Same with line styles--set them to nil to prevent a line from being drawn.
There are two "background" areas that you might be concerned with. The graph has a fill as does the plot area. The plot area is the region where the plots are drawn. Set the fill property on both of these to nil to make the background transparent.
I tried this & it works for me:
// Here 'hostingView' is your CPTGraphHostingView to
// which you add your graph
UIImageView *backgroundImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"background.png"]];
[hostingView addSubview:backgorundImage];
[hostingView sendSubviewToBack:backgroundImage];
I used the .fill and .plot.AreaFrame.fill properties :
plot = [[CPTXYGraph alloc] initWithFrame:CGRectZero];
CPTTheme *theme = [CPTTheme themeNamed:kCPTSlateTheme];
[plot applyTheme:theme];
self.graph.collapsesLayers = NO;
self.graph.hostedGraph = plot;
plot.paddingLeft = 1.0;
plot.paddingTop = 1.0;
plot.paddingRight = 1.0;
plot.paddingBottom = 1.0;
plot.fill = [CPTFill fillWithColor:[CPTColor clearColor]];
plot.plotAreaFrame.fill = [CPTFill fillWithColor:[CPTColor clearColor]];
This works for me.
I am trying to remove the border around a core plot graph on the iPhone - but seem to be struggling on what should be simple in my mind.
Pointers please!
You should be able to nil out the borderLineStyle on the graph's plotArea to remove the border:
graph.plotAreaFrame.borderLineStyle = nil; // don't draw a border
You could also create your own theme, using the ones in the framework as examples, and simply not set the borderLineStyle in that.
None of the answers worked for me. This did the job:
graph.paddingLeft = 0;
graph.paddingRight = 0;
graph.paddingTop = 0;
graph.paddingBottom = 0;
graph.plotAreaFrame.borderWidth = 0;
graph.plotAreaFrame.cornerRadius = 0;
OK I found out how to do it - quite simple really!
CPLineStyle *borderLineStyle = [CPLineStyle lineStyle];
borderLineStyle.lineColor = [CPColor whiteColor];
borderLineStyle.lineWidth = 1.0;
graph.plotArea.borderLineStyle = borderLineStyle;
where graph is your graph object - the reason I had a border in the first place was because I used CPPlainWhiteTheme.
Hope this helps others - is there a better way?
You can set any line style to nil. This will cause the line to not be drawn at all.
In CorePlot 1.0, the structure of CPTGraph has changed slightly. The code for removing the border line of a graph, assuming that graph is of type GPTGraph or a subclass of CPTGraph, is
graph.plotAreaFrame.borderLineStyle = nil;
The correct way with borderLineStyle = nil after applyTheme:
CPTGraph *graph = [[CPTXYGraph alloc] initWithFrame:hostView.bounds];
// Set padding for plot area
[graph applyTheme:[CPTTheme themeNamed:kCPTPlainWhiteTheme]];
graph.plotAreaFrame.borderLineStyle = nil;
If, like me, you are looking to not just remove the border line, but to make a plot that takes up the entire hosting view, the answer from Thomas Johannesmeyer got me on the right track.
Here's what I did:
CPTGraphHostingView* hostingView = [[CPTGraphHostingView alloc] initWithFrame: frame];
CGRect bounds = hostingView.bounds;
CPTGraph *graph = [[CPTXYGraph alloc] initWithFrame:bounds];
hostingView.hostedGraph = graph;
graph.paddingTop = CPTFloat(0.0);
graph.paddingRight = CPTFloat(0.0);
graph.paddingBottom = CPTFloat(0.0);
graph.paddingLeft = CPTFloat(0.0);
graph.plotAreaFrame.paddingTop = CPTFloat(0.0);
graph.plotAreaFrame.paddingRight = CPTFloat(0.0);
graph.plotAreaFrame.paddingBottom = CPTFloat(0.0);
graph.plotAreaFrame.paddingLeft = CPTFloat(0.0);
graph.plotAreaFrame.masksToBorder = NO;
CPTXYAxisSet *axisSet = (CPTXYAxisSet *)graph.axisSet;
CPTXYAxis *x = axisSet.xAxis;
x.labelingPolicy = CPTAxisLabelingPolicyNone;
x.title = nil;
CPTXYAxis *y = axisSet.yAxis;
y.labelingPolicy = CPTAxisLabelingPolicyNone;
y.title = nil;
EDIT: I think my question is better phrased as: How can I have a Y-axis that doesn't start at zero? It seems like the x-axis always gets placed at the y=0, but I would like the x-axis to be at some positive number on the y-axis.
Here's a graph with more regular data... I just wish the x-axis was placed at the minimum y-value for the plot (about 77), instead of at 0.
Here is the function I use to create the graph.
It's a whole bunch of code, and I'm not quite sure which piece might be off to not display the x-axis.
Could the x-axis not showing have something to do with my data?
- (void) showGraph:(SavedDetailScreen*)dataSource {
// create the graph and add it to the view
CPXYGraph *graph = [[CPXYGraph alloc] initWithFrame: CGRectZero];
graph.plotArea.masksToBorder = NO;
CPLayerHostingView *graphView = [[CPLayerHostingView alloc] initWithFrame:CGRectMake(0,0, 280, 240)];
[self addSubview:graphView];
graphView.hostedLayer = graph;
graph.paddingLeft = 50.0;
graph.paddingTop = 20.0;
graph.paddingRight = 10.0;
graph.paddingBottom = 40.0;
// set up the ranges for the graph axis
float minElevation = dataSource.track.tbStats.minAlt;
float maxElevation = dataSource.track.tbStats.maxAlt-dataSource.track.tbStats.minAlt;
float minDistance = 0.0f;
float maxDistance = dataSource.track.tbStats.totalDistance;
CPXYPlotSpace *plotSpace = (CPXYPlotSpace *)graph.defaultPlotSpace;
plotSpace.xRange = [CPPlotRange plotRangeWithLocation:CPDecimalFromFloat(minDistance)
length:CPDecimalFromFloat(maxDistance)];
plotSpace.yRange = [CPPlotRange plotRangeWithLocation:CPDecimalFromFloat(minElevation)
length:CPDecimalFromFloat(maxElevation)];
// style the graph with white text and lines
CPTextStyle *whiteText = [CPTextStyle textStyle];
whiteText.color = [CPColor whiteColor];
CPLineStyle *whiteStyle = [CPLineStyle lineStyle];
whiteStyle.lineColor = [CPColor whiteColor];
whiteStyle.lineWidth = 2.0f;
// set up the axis
CPXYAxisSet *axisSet = (CPXYAxisSet *)graph.axisSet;
CPXYAxis *x = axisSet.xAxis;
CPXYAxis *y = axisSet.yAxis;
x.majorIntervalLength = CPDecimalFromFloat(maxDistance/10.0f);
x.minorTicksPerInterval = 0;
x.majorTickLineStyle = whiteStyle;
x.minorTickLineStyle = whiteStyle;
x.axisLineStyle = whiteStyle;
x.minorTickLength = 5.0f;
x.majorTickLength = 10.0f;
x.labelOffset = 3.0f;
x.labelTextStyle = whiteText;
y.majorIntervalLength = CPDecimalFromFloat(maxElevation/5.0f);
y.minorTicksPerInterval = 0;
y.majorTickLineStyle = whiteStyle;
y.minorTickLineStyle = whiteStyle;
y.axisLineStyle = whiteStyle;
y.minorTickLength = 5.0f;
y.majorTickLength = 10.0f;
y.labelOffset = 3.0f;
y.labelTextStyle = whiteText;
CPScatterPlot *plot = [[[CPScatterPlot alloc] initWithFrame:graph.bounds] autorelease];
plot.dataLineStyle.lineWidth = 2.0f;
plot.dataLineStyle.lineColor = [CPColor blueColor];
plot.dataSource = dataSource;
[graph addPlot:plot];
CPPlotSymbol *greenCirclePlotSymbol = [CPPlotSymbol ellipsePlotSymbol];
greenCirclePlotSymbol.fill = [CPFill fillWithColor:[CPColor greenColor]];
greenCirclePlotSymbol.size = CGSizeMake(2.0, 2.0);
plot.plotSymbol = greenCirclePlotSymbol;
}
I've had the same problem yesterday/today and the solution seems to be using the orthogonalCoordinateDecimal property on the axis. For example:
graph.axisSet.xAxis.orthogonalCoordinateDecimal = CPDecimalFromFloat(minHeight);
You set the position of an axis on the orthogonal axis using the constantCoordinateValue property of the axis. Just set that property on the x axis to a positive value of y, and the axis should move up.
https://github.com/djw/core-plot/tree/9282845bddbb8c40ff314bbfa158beff797c91f7/examples
This states that the isFloatingAxis property has been removed from at least version 0.9.
I also found this in the discussion group as well http://code.google.com/p/core-plot/issues/detail?id=125
After some hunting, it looks like the new way to float an axis looks like this:
x.axisConstraints = [CPTConstraints constraintWithUpperOffset:132];
this framework really needs a better way to configure itself. I don't see any problem jumping out. Maybe just try simplifying the method to the point where debugging becomes manageable. Check the data that you are passing in to make sure it is what you expect it to be. Better yet, create some dummy data that you know will produce the plot you expect.