Main Contents

[Objective-c] Tutorial Core-plot suite

janvier 15, 2012

Dans le tuto précédent on a vu l installation du framework. On va donc maintenant créer un petit graphique très simple.

J’ai créer un projet de type « Single View Application ».
On va rajouter ce code dans le ViewController.h.

#import <UIKit/UIKit.h>
#import "CorePlot-CocoaTouch.h"
 
@interface ViewController : UIViewController  <CPTPlotDataSource>  {
   NSMutableArray *dataForPlot;
   CPTXYGraph *graph;
}
@property(readwrite, retain, nonatomic) NSMutableArray *dataForPlot;
 
@end

On a donc un tableau contenant les valeurs du graphique, et l’objet du graphique de type CPTXYGraph. Il y a d’autre type comme camembert (pie) etc…
On a aussi défini la class comme la source de données avec le « CPTPlotDataSource ».

Ensuite, dans le ViewController.m.
On ajoute :

@synthesize dataForPlot;
 
-(NSUInteger)numberOfRecordsForPlot:(CPTPlot *)plot {
    return [dataForPlot count];
}
 
-(NSNumber *)numberForPlot:(CPTPlot *)plot field:(NSUInteger)fieldEnum recordIndex:(NSUInteger)index  {
    return [[dataForPlot objectAtIndex:index] valueForKey:(fieldEnum == CPTScatterPlotFieldX ? @"x" : @"y")];
}

Ces 2 méthodes sont nécessaires un peu comme celles pour un UItableView. On a celle qui retourne le nombre d’éléments de la source. Et l’autre retourne chaqu’une des valeurs.

Ensuite, on rajoute dans viewDidLoad :

 
 // Données de test
	NSMutableArray *contentArray = [NSMutableArray arrayWithCapacity:30];
	NSUInteger i;
	for ( i = 0; i < 30; i++ ) {
     id x = [NSNumber numberWithFloat:i];
     id y = [NSNumber numberWithFloat:1.2*rand()/(float)RAND_MAX + 2.2];
     [contentArray addObject:[NSMutableDictionary dictionaryWithObjectsAndKeys:x, @"x", y, @"y", nil]];
     }
    self.dataForPlot = contentArray;
 
    graph = [[CPTXYGraph alloc] initWithFrame:CGRectZero];
 
    // Theme du graphique
	CPTTheme *theme = [CPTTheme themeNamed:kCPTPlainWhiteTheme];
    [graph applyTheme:theme];
 
    UIView * hostingView = self.view;
 
    CPTGraphHostingView *graphHostingView = [[CPTGraphHostingView alloc] initWithFrame:CGRectMake(0, 0, 300, 450)];
    graphHostingView.collapsesLayers = NO;
    [hostingView addSubview:graphHostingView];

Qui permet de créer la zone du graphique on choisissant ses dimensions et son thème. Ici un kCPTDarkGradientTheme. Ainsi qu’un petit algo permettant de créer des données de test.

Ensuite on peut affiner l affichage du graphique à partir des axes:

 CPTXYPlotSpace *plotSpace = (CPTXYPlotSpace *)graph.defaultPlotSpace;
    plotSpace.allowsUserInteraction = YES;
    plotSpace.xRange = [CPTPlotRange plotRangeWithLocation:CPTDecimalFromFloat(-1.8) length:CPTDecimalFromFloat(30.0)];
    plotSpace.yRange = [CPTPlotRange plotRangeWithLocation:CPTDecimalFromFloat(-0.8) length:CPTDecimalFromInt(10)];
    // Axe X
    CPTXYAxisSet *axisSet = (CPTXYAxisSet *)graph.axisSet;
    CPTXYAxis *x = axisSet.xAxis;
    x.majorIntervalLength = CPTDecimalFromString(@"5");
    x.minorTicksPerInterval = 4;
 
    // Axe Y
    CPTXYAxis *y = axisSet.yAxis;
    y.majorIntervalLength = CPTDecimalFromString(@"5");
    y.minorTicksPerInterval = 4;

Cela permet de modifier l’échelle des axes.

Et enfin le plus important:

 // Ligne du graphique
    CPTScatterPlot *boundLinePlot = [[[CPTScatterPlot alloc] init] autorelease];
    CPTMutableLineStyle *lineStyle = [CPTMutableLineStyle lineStyle];
    lineStyle.miterLimit = 1.0f;
    lineStyle.lineWidth = 4.0f;
    lineStyle.lineColor = [CPTColor blueColor];
    boundLinePlot.dataLineStyle = lineStyle;
    boundLinePlot.identifier = @"Blue Plot";
    boundLinePlot.dataSource = self;
	[graph addPlot:boundLinePlot];

Qui permet de configurer l’affichage de la ligne du graphique à proprement parlé. Sa couleur, son stye etc.

Et voilà le résultat!

Vous pouvez retrouver les fichiers exemples sur mon github.
Merci à Aurélien Delrue pour son aide.

Catégorie(s): Développement, iPad, Iphone, Mac, Objective-C, Tutorial | Comments (5)

5 Comments

  1. [Objective-c] Tutorial Core-plot | MacFan janvier 15, 2012 @ 23 h 52 min

    […] [Objective-c] Tutorial Core-plot suite […]

  2. Grégoire (2 comments) janvier 17, 2012 @ 14 h 47 min

    Merci pour la découverte de ce framework pour les graphiques.
    Si j’ai besoin je serai ou aller !!

  3. Core-Plot passe la première ! | MacFan mars 28, 2012 @ 11 h 27 min

    […] [Objective-c] Tutorial Core-plot suite […]

  4. mido (1 comments) avril 4, 2012 @ 8 h 40 min

    how i can to draw math function from NSSTRING like sin(x)
    and thx

  5. Romain (6 comments) avril 6, 2012 @ 8 h 54 min

    Après l’initialisation du graphHostingView, il manque une ligne du type :

    graphHostingView.hostedGraph = graph;

    Cela dit, très bon tuto ! Merci beaucoup !

Leave a comment