core plot custom Theme?

Question

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.

score 24 · Accepted Answer · edited Nov 28 '14 at 19:45

24

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]];

edited Nov 28 '14 at 19:45

El Developer

3,345
1
21
40

answered Feb 27 '11 at 16:55

Brad Larson

170,088
45
397
571

6

If you're concerned about the drawing performance for any reason (scrolling, resizing, etc.), setting those fill properties to nil will tell Core Plot that there's nothing to draw. That way it knows to skip setting up clipping regions and drawing pixels that won't show up on screen. – Eric Skroch Feb 27 '11 at 19:23
@Eric - Thanks for pointing that out. I replaced some code where I had a clear fill with just setting that fill to nil and saved about 2-3% CPU load on my Mac when constantly rerendering a plot. – Brad Larson Feb 28 '11 at 15:32
Hi, I did the same, but I am facing a weird problem that all the controls on the graph page are mirrored. I have posted a question: http://stackoverflow.com/questions/9927031/background-imageview-is-mirrored-when-i-use-cptpgraphhostingview-core-plot – Mar 29 '12 at 14:19
This Does not seems to be working for the latest Version. ie : for CPTXYGraph..Brad can you comment on that ? – Ranjeet Sajwan Jul 04 '12 at 07:03
Sorry It was my mistake....I was using a view controller at back...Now working like charm....:) – Ranjeet Sajwan Jul 04 '12 at 12:25
5

CPFill and CPColor are CPTFill and CPTColor now – lonlywolf Jun 12 '13 at 07:31
If you apply CPTTheme to your plot, then it should be before you set plotAreaFrame color – Diana Prodan Jan 17 '17 at 08:34

score 6 · Answer 2 · answered Feb 27 '11 at 14:22

6

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.

answered Feb 27 '11 at 14:22

Eric Skroch

27,381
3
29
36

1

I can't do chartTrend5PlotSpace.fill = nil; – oscarm Feb 27 '11 at 16:36
Hi, I did the same, but I am facing a weird problem that all the controls on the graph page are mirrored. I have posted a question: http://stackoverflow.com/questions/9927031/background-imageview-is-mirrored-when-i-use-cptpgraphhostingview-core-plot – Mar 29 '12 at 14:22

score 1 · Answer 3 · answered Jul 24 '12 at 08:49

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];

score 0 · Answer 4 · edited Oct 04 '12 at 08:14

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.

core plot custom Theme?

4 Answers4

Linked