I'm trying to create a horizontal gradient on my y axis in CorePlot:
CPTGradient *axisGradient = [CPTGradient gradientWithBeginningColor:[CPTColor redColor] endingColor:[CPTColor yellowColor]];
axisGradient.angle = 180.f;
CPTMutableLineStyle *axisStyle = [y.axisLineStyle mutableCopy];
axisStyle.lineWidth = 6.f;
axisStyle.lineGradient = axisGradient;
y.axisLineStyle = axisStyle;
No matter what I set the gradient angle to the gradient is vertical. Anyone have any ideas?
for horizontal gradient you can use
CPTColor *areaColorStart = [CPTColor colorWithComponentRed:0.74 green:0.78 blue:0.82 alpha:1];
CPTColor *areaColorEnd = [CPTColor colorWithComponentRed:0.9 green:0.91 blue:0.92 alpha:.2];
CPTGradient *areaGradient1 = [CPTGradient gradientWithBeginningColor:areaColorStart endingColor:areaColorEnd];
areaGradient1.angle = 0.0f;
CPTFill *areaGradientFill = [CPTFill fillWithGradient:areaGradient1];
plot.areaFill = areaGradientFill;
plot.areaBaseValue = CPTDecimalFromFloat(yRange);
hope it will help.
Core Plot draws gradient line fills along the line path. If you want a tall, skinny rectangle filled with a gradient that fades from one color at the top to another at the bottom, use a plot space annotation. Create a CPTBorderedLayer for the annotation content and give it a gradient fill ([CPTFill fillWithGradient:axisGradient]).
Related
Maybe this is a simple question but I wanted to know how I can draw vertical lines under X Axis and upper labels in X Axis in iOS-charts. (See the pic, like red lines)
UPDATE: the library I'm using is this https://github.com/danielgindi/ios-charts
I managed to draw the ticks below the x axis by overriding drawLabel. This function draws the labels below the x axis and therefore can draw something else there. For example our desired ticks!
class XAxisRendererWithTicks: XAxisRenderer {
override func drawLabel(context: CGContext, formattedLabel: String, x: CGFloat, y: CGFloat, attributes: [NSAttributedString.Key: Any], constrainedToSize: CGSize, anchor: CGPoint, angleRadians: CGFloat) {
super.drawLabel(context: context, formattedLabel: formattedLabel, x: x, y: y, attributes: attributes, constrainedToSize: constrainedToSize, anchor: anchor, angleRadians: angleRadians)
context.beginPath()
context.move(to: CGPoint(x: x, y: y))
context.addLine(to: CGPoint(x: x, y: self.viewPortHandler.contentBottom))
context.strokePath()
}
}
To use the custom renderer:
let customXAxisRenderer = XAxisRendererWithTicks(viewPortHandler: self.chartView.viewPortHandler, xAxis: xAxis, transformer: self.chartView.getTransformer(forAxis: .left))
self.chartView.xAxisRenderer = customXAxisRenderer
Example image: Please don´t mind the colors but I think you get what I mean. ;)
Hope this helps!
You could, but you have to override some methods, take a look at drawGridLine() and drawLabels() in x axis renderer for example.
drawGridLine gives you the full details about how to draw a grid line in ios-charts, understaning it will be very helpful to write your own customizations.
Set major tick locations and minor tick locations for the axis you want to get the lines like red color. Please try with the following sample code written for x-axis of the graph.
CPTXYAxisSet *axisSet = (CPTXYAxisSet *)graph.axisSet;
CPTXYAxis *x = axisSet.xAxis; //Get the axis of the graph
// x and y axis line color
CPTMutableLineStyle *axisLineStyle = [CPTMutableLineStyle lineStyle];
axisLineStyle.lineWidth = 2.0f;
axisLineStyle.lineColor = [CPTColor whiteColor]; //Set color whatever you want
//Text Style for axis title
CPTMutableTextStyle *axisTextStyle = [[CPTMutableTextStyle alloc] init];
axisTextStyle.color = [CPTColor whiteColor]; //Set color whatever you want
// Line color
CPTMutableLineStyle *tickLineStyle = [CPTMutableLineStyle lineStyle];
tickLineStyle.lineColor = [CPTColor whiteColor]; //Set color whatever you want
tickLineStyle.lineWidth = 2.0f;
x.title = #"Title for the axis";
x.titleOffset = 50.0f;
x.axisLineStyle = axisLineStyle; //axis line style
x.titleTextStyle = axisTextStyle; //axis title text style
x.majorTickLineStyle = axisLineStyle; //Major axis tick style which you wanted
x.minorTickLineStyle = axisLineStyle; //Minor axis tick style
x.labelTextStyle = axisTextStyle; //axis label text style
x.labelingPolicy = CPTAxisLabelingPolicyNone; //axis labeling policy
x.tickDirection = CPTSignNegative; //This will set the red lines below the x-axis as displayed in screenshot you have attached.
Have a happy coding..!!
How can I make the plot symbol touch area bigger. 10x10 is what I need to be filled with color, but it is really hard to touch on the screen with 'fat' fingers. So I need the area around it to activate the symbol, but not to be filled with color.
CPTMutableLineStyle *symbolLineStyle = [CPTMutableLineStyle lineStyle];
symbolLineStyle.lineColor = [CPTColor colorWithComponentRed:42./255. green:150./255. blue:232./255. alpha:1.];
CPTPlotSymbol *plotSymbol = [CPTPlotSymbol ellipsePlotSymbol];
plotSymbol.fill = [CPTFill fillWithColor:[CPTColor colorWithComponentRed:42./255. green:150./255. blue:232./255. alpha:1.]];
plotSymbol.lineStyle = symbolLineStyle;
plotSymbol.size = CGSizeMake(10.0, 10.0);
dataSourceLinePlot.plotSymbol = plotSymbol;
In your method that you make the plot and the graph there should be a line that goes like this.
_yourGraph.plotSymbolMarginForHitDetection = 20.0f;
I always use 20.0f because of 'fat' fingers too. I have a method that I called configurePlots, I get a reference to the graph and plot space. Then I call the plotSymbol... Hope this helps, ask questions if you have any.
I am using CorePlot for Scatter plot and would like to know how to obtain the circles of the scatter plot with such a color effect as it is here http://i.stack.imgur.com/7ZcqY.jpg
I would like to get the color as in CPTXYScatterPlot - Can I set the Z order of plot symbols?.
In your symbolForScatterPlot implementation, create a circlePlotSymbol with a gradient fill, like so:
CPTPlotSymbol *circlePlotSymbol = [CPTPlotSymbol ellipsePlotSymbol];
// Obviously for a real bubble chart you'll want to get the color from somewhere so they're not all the same
CPTColor *endColor = [CPTColor redColor];
CPTColor *startColor = [endColor colorWithAlphaComponent:0.4f];
CPTGradient *gradient = [CPTGradient gradientWithBeginningColor:startColor endingColor:endColor];
Then set the gradient type to Radial, and set your gradient as the fill on your plotSymbol. If you want it to look like it's lit from an angle, you can set the startAnchor to a point off center:
gradient.gradientType = CPTGradientTypeRadial;
graphGradient.startAnchor = CGPointMake(0.35, 0.75);
circlePlotSymbol.fill = [CPTFill fillWithGradient:gradient];
If you don't want a border around your circles, set the linestyle color to clear and/or set the width to 0.0f (probably don't need to do both):
CPTMutableLineStyle *lineStyle = [[CPTMutableLineStyle alloc] init];
lineStyle.lineColor = [CPTColor clearColor];
lineStyle.lineWidth = 0.0f;
circlePlotSymbol.lineStyle = lineStyle;
[lineStyle release];
Set the size of your bubble:
// For a real bubble chart, you'll need to calculate this from your data
circlePlotSymbol.size = CGSizeMake(50.0f, 50.0f);
and return your plot symbol:
return circlePlotSymbol;
That should do it. I don't have my code in front of me so I'm going from memory here (and please forgive any typos or bad syntax, as I don't have access to a compiler right now either), but hopefully this will be close enough to get you pointed in the right direction.
I'm trying to create a plot with both text and an image as the data labels for each point. The code I'm using looks like this;
//Point symbol
NSInteger symbolIndex = interval.symbolIndex;
UIImage *img = [Common getPointSymbol:symbolIndex];
CGRect imageRect = CGRectMake(0, 0 , 60, 50);
CPTBorderedLayer * imageLayer = [[CPTBorderedLayer alloc] initWithFrame:imageRect];
imageLayer.fill = [CPTFill fillWithImage:[CPTImage imageWithCGImage:[img CGImage] scale:img.scale]];
//Point text
CPTMutableTextStyle *dataLabelTextStyle = [CPTMutableTextStyle textStyle];
dataLabelTextStyle.color = [CPTColor blackColor];
dataLabelTextStyle.fontSize = 12.0f;
dataLabelTextStyle.fontName = #"Helvetica";
CPTTextLayer *textLayer = [[CPTTextLayer alloc] initWithText:point.title style:dataLabelTextStyle];
[imageLayer addSublayer:textLayer];
return imageLayer;
This works well for the data points that are initially visible on the plot, but for points which are outside the starting plot area only the symbol-images are drawn. If zooming out and forcing the plot to redraw, both layers will again appear. The same problem occurs if reversing the order of the layers, and then only the text layer is drawn. In effect, it seems sublayers are not rendered if starting outside the plot.
Is this a core plot bug? Is it possible to merge layers into one to mitigate this problem?
Thankful for help!
CPTTextLayer is a subclass of CPTBorderedLayer. You can add the background fill to the text layer and then use the padding properties to position the text within the layer.
I've set up a scattered plots with time as the x axis. I'm drawing a little sun image in the background at noon time:
CGRect imageRect = CGRectMake(0, 0 , 50, 50);
CPTBorderedLayer * imageLayer = [[CPTBorderedLayer alloc] initWithFrame:imageRect];
imageLayer.fill = [CPTFill fillWithImage:[CPTImage imageWithCGImage:[[UIImage imageNamed:#"SunIcon.png"] CGImage]]];
NSArray *anchorPoint = [NSArray arrayWithObjects:
[NSNumber numberWithInt:12*60*60], [NSNumber numberWithInt:100],
nil];
CPTPlotSpaceAnnotation *imageAnnotation1 = [[CPTPlotSpaceAnnotation alloc] initWithPlotSpace:(CPTXYPlotSpace *)graph.defaultPlotSpace anchorPlotPoint:anchorPoint];
imageAnnotation.contentLayer = imageLayer;
[graph addAnnotation:imageAnnotation];
[graph addSublayer:imageLayer];
The problem is that the sun now hides my plots. How can I send the image to the background behind all plots?
Edit: The opposite case is that my right aligned y axis gets hidden by the plot. Can I bring this layer to the front?
Add the annotation to the plot area and then move the image layer to the front of the sublayer order.
[graph.plotAreaFrame.plotArea addAnnotation:imageAnnotation];
[imageLayer removeFromSuperlayer];
[graph.plotAreaFrame.plotArea insertSublayer:imageLayer atIndex:0];