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.

Orthoclase

Answer 1

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

Boardwalk

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. – Obnubilate

@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. – Boardwalk

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: #9927531 – Endodontist

This Does not seems to be working for the latest Version. ie : for CPTXYGraph..Brad can you comment on that ? – Lanneret

Sorry It was my mistake....I was using a view controller at back...Now working like charm....:) – Lanneret

CPFill and CPColor are CPTFill and CPTColor now – Ulrich

If you apply CPTTheme to your plot, then it should be before you set plotAreaFrame color – Guidon

Answer 2

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.

Obnubilate

I can't do chartTrend5PlotSpace.fill = nil; – Orthoclase

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: #9927531 – Endodontist

Answer 3

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

Oxendine

Answer 4

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.

Stagg