This is a migrated thread and some comments may be shown as answers.

Panning without zooming

1 Answer 66 Views
Chart
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Sebastiaan
Top achievements
Rank 1
Sebastiaan asked on 11 Feb 2015, 09:07 AM
Hi,

I'd like to know if it's possible to only use panning and not zooming. I'd like to scroll the graph only horizontally but I don't know if I should use a scrollview or the panning option from Telerik. Thing is, I want to scroll the graph vertically when the items in the graph dynamically grow. So for instance 5 items in the graph fits perfectly on the screen. But 10 items don't fit on the screen so the graph view should expand and be scrollable on the x-axis. 

Here's my code so far:
#import "IPSSViewController.h"
#import <TelerikUI/TelerikUI.h>
 
@interface IPSSViewController ()
{
    NSMutableArray *ipssScores;
    NSMutableArray *iScores;
    NSMutableArray *oScores;
    NSMutableArray *dateArray;
     
    TKChartNumericAxis *yAxis;
    TKChartCategoryAxis *xAxis;
     
    NSDateFormatter *dateFormat;
}
 
@end
 
@implementation IPSSViewController
@synthesize GraphView;
 
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view
     
    dateFormat = [[NSDateFormatter alloc] init];
    [dateFormat setDateFormat:@"d/MM/yy"];
     
    [self createDataPoints];
     
    [self drawGraph];
}
 
 
-(void)createDataPoints
{
    NSDate *now = [NSDate date];
     
    ipssScores = [NSMutableArray new];
    iScores = [NSMutableArray new];
    oScores = [NSMutableArray new];
    dateArray = [NSMutableArray new];
     
    NSDateComponents *components = [[NSDateComponents alloc] init];
    NSCalendar *gregorian = [[NSCalendar alloc] initWithCalendarIdentifier:NSCalendarIdentifierGregorian];
 
    NSString    *ipssString,
                *iScoreString,
                *oScoreString;
    for(int x = 0; x < 10; x++)
    {
        [components setDay:-9 + x];
         
        [ipssScores addObject:@{@"score":[NSNumber numberWithInt:((arc4random() % 35))], @"date":[gregorian dateByAddingComponents:components toDate:now options:0]}];
        ipssString = [NSString stringWithFormat:@"%@ IPSSScore: %@, Date: %@ \n",[NSNumber numberWithInt:x + 1], [[ipssScores objectAtIndex:x] objectForKey:@"score"], [dateFormat stringFromDate:[[ipssScores objectAtIndex:x] objectForKey:@"date"]]];
         
        [iScores addObject:@{@"score":[NSNumber numberWithInt:((arc4random() % 35))], @"date":[gregorian dateByAddingComponents:components toDate:now options:0]}];
        iScoreString = [NSString stringWithFormat:@"%@ IScore: %@, Date: %@ \n",[NSNumber numberWithInt:x + 1], [[iScores objectAtIndex:x] objectForKey:@"score"], [dateFormat stringFromDate:[[iScores objectAtIndex:x] objectForKey:@"date"]]];
         
        [oScores addObject:@{@"score":[NSNumber numberWithInt:((arc4random() % 35))], @"date":[gregorian dateByAddingComponents:components toDate:now options:0]}];
        oScoreString = [NSString stringWithFormat:@"%@ OScore: %@, Date: %@ \n",[NSNumber numberWithInt:x + 1], [[oScores objectAtIndex:x] objectForKey:@"score"], [dateFormat stringFromDate:[[oScores objectAtIndex:x] objectForKey:@"date"]]];
         
         
        [dateArray addObject:[[ipssScores objectAtIndex:x] objectForKey:@"date"]];
         
        self.GraphValues.text = [NSString stringWithFormat:@"%@ %@", self.GraphValues.text, [NSString stringWithFormat:@"%@ %@ %@", ipssString, iScoreString, oScoreString]];
    }
     
    NSLog(@"Date array count: %lu", (unsigned long)[dateArray count]);
}
 
 
-(void)drawGraph
{
    TKChart *chart = [[TKChart alloc] initWithFrame:CGRectMake(GraphView.bounds.origin.x, GraphView.bounds.origin.y, GraphView.bounds.size.width * 2, GraphView.bounds.size.height)];
    chart.dataSource = self;
    chart.delegate = self;
    chart.allowAnimations = YES;
    chart.animationDuration = 1.5f;
    chart.userInteractionEnabled = YES;
     
    [GraphView addSubview:chart];
     
    chart.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
     
    [chart setBackgroundColor:[UIColor whiteColor]];
     
    chart.gridStyle.horizontalAlternateFill = nil;
    chart.gridStyle.horizontalFill = nil;
    chart.gridStyle.horizontalLinesHidden = YES;
     
    [self createXAxis:chart];
    [self createYAxis:chart];
    [self setGridStyle:chart];
    //[self createLegend:chart];
     
    [chart animate];
}
 
//Setup the X-Axis
-(void)createXAxis:(TKChart *)chart
{
    //Axis stroke
    TKStroke *stroke = [[TKStroke alloc] initWithColor:[UIColor whiteColor]];
     
    //Create xAxis
    //xAxis = [[TKChartCategoryAxis alloc] init];
    xAxis = [[TKChartCategoryAxis alloc] initWithCategories:dateArray];
     
    //[xAxis setMajorTickCount:[ipssScores count]];
    [xAxis setPosition:TKChartAxisPositionBottom];
     
    [xAxis.style.labelStyle setTextColor:[UIColor colorWithRed:0.000f green:0.294 blue:0.529 alpha:1.000]];
    [xAxis.style.labelStyle setTextAlignment:TKChartAxisLabelAlignmentBottom];
    [xAxis.style setLineStroke:stroke];
    xAxis.style.majorTickStyle.ticksHidden = YES;
     
    xAxis.plotMode = TKChartAxisPlotModeBetweenTicks;
    xAxis.style.labelStyle.fitMode = TKChartAxisLabelFitModeNone;
     
    xAxis.allowPan = YES;
     
    chart.xAxis = xAxis;
}
 
//Setup the Y-Axis
-(void)createYAxis:(TKChart *)chart
{
    TKStroke *stroke = [[TKStroke alloc] initWithColor:[UIColor colorWithRed:0.902 green:0.973 blue:0.980 alpha:1.000]];
     
    //Create yAxis
    yAxis = [[TKChartNumericAxis alloc] initWithMinimum:@-2 andMaximum:@40];
     
    [yAxis setMajorTickInterval:[NSNumber numberWithInt:1]];
    //[yAxis setMinorTickInterval:[NSNumber numberWithInt:1]];
    [yAxis setPosition:TKChartAxisPositionLeft];
    yAxis.style.lineHidden = NO;
     
    [yAxis.style.labelStyle setTextColor:[UIColor colorWithRed:0.000f green:0.294 blue:0.529 alpha:1.000]];
    [yAxis.style.labelStyle setTextAlignment:TKChartAxisLabelAlignmentLeft|TKChartAxisLabelAlignmentTop];
    //[yAxis.style.labelStyle setTextOffset:UIOffsetMake(0, 17)];
    [yAxis.style setLineStroke:stroke];
     
   // yAxis.allowPan = YES;
     
    chart.yAxis = yAxis;
}
 
//Create the legend for the chart
-(void)createLegend:(TKChart *)chart
{
    TKChartLegendView *legendView = [[TKChartLegendView alloc] initWithChart:chart];
    legendView.frame = CGRectMake((self.LegendView.bounds.size.width / 2) - 120, (self.LegendView.bounds.size.height / 2) - 10, self.LegendView.bounds.size.width, self.LegendView.bounds.size.height);
    legendView.style.position = TKChartLegendPositionFloating;
    legendView.container.stack.orientation = TKStackLayoutOrientationHorizontal;
    legendView.container.stack.itemSpacing = 20;
    legendView.container.stack.itemOrder = TKStackLayoutItemOrderReverse;
     
    for (int index=0; index < chart.legend.container.itemCount; index++) {
        TKChartLegendItem *legendItem = [chart.legend.container itemAtIndex:index];
        legendItem.label.textColor = [UIColor lightGrayColor];
    }
     
    [self.LegendView addSubview:legendView];
    [legendView reloadItems];
}
 
//Creates the 4 grid lines on the major ticks
-(void)setGridStyle:(TKChart *)chart
{
    TKStroke *stroke = [TKStroke strokeWithColor:[UIColor colorWithRed:0.902 green:0.973 blue:0.980 alpha:1.000]];
     
    TKChartGridLineAnnotation *gAnno00 = [[TKChartGridLineAnnotation alloc] initWithValue:@0 forAxis:yAxis withStroke:stroke];
     
    TKChartGridLineAnnotation *gAnno01 = [[TKChartGridLineAnnotation alloc] initWithValue:@7 forAxis:yAxis withStroke:stroke];
     
    TKChartGridLineAnnotation *gAnno02 = [[TKChartGridLineAnnotation alloc] initWithValue:@19 forAxis:yAxis withStroke:stroke];
     
    TKChartGridLineAnnotation *gAnno03 = [[TKChartGridLineAnnotation alloc] initWithValue:@35 forAxis:yAxis withStroke:stroke];
     
    [chart addAnnotation:gAnno00];
    [chart addAnnotation:gAnno01];
    [chart addAnnotation:gAnno02];
    [chart addAnnotation:gAnno03];
}
 
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
 
#pragma mark - Telerik Datasource
-(NSUInteger)numberOfSeriesForChart:(TKChart *)chart
{
    return 3;
}
 
-(TKChartSeries *)seriesForChart:(TKChart *)chart atIndex:(NSUInteger)index
{
    TKChartLineSeries *series;
    TKChartSeriesStyle *seriesStyle = [[TKChartSeriesStyle alloc] init];
    TKStroke *stroke;
     
    if(index == 0)
    {
        //Data
        series = [chart dequeueReusableSeriesWithIdentifier:@"ipssscores"];
        series = [[TKChartLineSeries alloc] initWithItems:nil reuseIdentifier:@"ipssscores"];
        series.title = @"ipssscores";
         
        //Set stroke settings
        stroke = [[TKStroke alloc] initWithColor:[UIColor colorWithRed:0.035 green:0.737 blue:0.812 alpha:1.000]];
        [stroke setWidth:1.0f];
         
        //Linestyle
        [seriesStyle setStroke:stroke];
         
        //Add style to series
        series.style = seriesStyle;
    }
     
    if(index == 1)
    {
        //Data
        series = [chart dequeueReusableSeriesWithIdentifier:@"scoresi"];
        series = [[TKChartLineSeries alloc] initWithItems:nil reuseIdentifier:@"scoresi"];
        series.title = @"scoresi";
         
        //Set stroke settings
        stroke = [[TKStroke alloc] initWithColor:[UIColor colorWithRed:0.000 green:0.294 blue:0.529 alpha:1.000]];
        [stroke setWidth:1.0f];
         
        //Linestyle
        [seriesStyle setStroke:stroke];
         
        //Add style to series
        series.style = seriesStyle;
    }
     
    if(index == 2)
    {
        //Data
        series = [chart dequeueReusableSeriesWithIdentifier:@"scoreso"];
        series = [[TKChartLineSeries alloc] initWithItems:nil reuseIdentifier:@"scoreso"];
        series.title = @"scoreso";
         
        //Set stroke settings
        stroke = [[TKStroke alloc] initWithColor:[UIColor colorWithRed:0.000 green:0.294 blue:0.529 alpha:1.000]];
        [stroke setWidth:1.0f];
         
        //Linestyle
        [seriesStyle setStroke:stroke];
         
        //Add style to series
        series.style = seriesStyle;
    }
     
    series.style.pointShape = [[TKPredefinedShape alloc] initWithType:TKShapeTypeCircle andSize:CGSizeMake(10, 10)];
    series.xAxis = xAxis;
    series.yAxis = yAxis;
    series.style.shapeMode = TKChartSeriesStyleShapeModeAlwaysShow;
    series.xAxis.style.majorTickStyle.maxTickClippingMode = TKChartAxisClippingModeVisible;
    series.yAxis.style.majorTickStyle.maxTickClippingMode = TKChartAxisClippingModeVisible;
     
    return series;
}
 
-(NSUInteger)chart:(TKChart *)chart numberOfDataPointsForSeriesAtIndex:(NSUInteger)seriesIndex
{
    return [ipssScores count];
}
 
-(NSString *)chart:(TKChart *)chart textForAxis:(TKChartAxis *)axis value:(id)value atIndex:(NSUInteger)index
{
    if(axis == yAxis)
    {
        switch(index)
        {
            case 0:     [yAxis.style.labelStyle setTextOffset:UIOffsetMake(0, 5)];
                        return @"0";
            break;
             
            case 7:     [yAxis.style.labelStyle setTextOffset:UIOffsetMake(0, 17)];
                        return @"7";
            break;
                 
            case 19:    [yAxis.style.labelStyle setTextOffset:UIOffsetMake(0, 17)];
                        return @"19";
            break;
                 
            case 35:    [yAxis.style.labelStyle setTextOffset:UIOffsetMake(0, 17)];
                        return @"35";
            break;
                 
            default:    return @"";
            break;
                 
        }
    }
    else
    {
        return [dateFormat stringFromDate:value];
    }
}
 
-(TKChartPaletteItem *)chart:(TKChart *)chart paletteItemForPoint:(NSUInteger)index inSeries:(TKChartSeries *)series
{
    TKChartPaletteItem *item;
    TKImageFill *fill;
     
    series.visibleInLegend = YES;
     
    if([series.title isEqualToString:@"ipssscores"])
    {
        fill = [TKImageFill imageFillWithImage:[UIImage imageNamed:@"IPSS GraphIcon"]];
        item = [[TKChartPaletteItem alloc] initWithDrawables:@[fill]];
    }
     
    if([series.title isEqualToString:@"scoresi"])
    {
        fill = [TKImageFill imageFillWithImage:[UIImage imageNamed:@"Irritatief Graphicon"]];
        item = [[TKChartPaletteItem alloc] initWithDrawables:@[fill]];
    }
     
    if([series.title isEqualToString:@"scoreso"])
    {
        fill = [TKImageFill imageFillWithImage:[UIImage imageNamed:@"Obstructief Graphicon"]];
        item = [[TKChartPaletteItem alloc] initWithDrawables:@[fill]];
    }
     
    return item;
}
 
-(id<TKChartData>)chart:(TKChart *)chart dataPointAtIndex:(NSUInteger)dataIndex forSeriesAtIndex:(NSUInteger)seriesIndex
{
    TKChartDataPoint *point;
     
    switch(seriesIndex)
    {
        case 0: point = [[TKChartDataPoint alloc] initWithX:[[ipssScores objectAtIndex:dataIndex] objectForKey:@"date"] Y:[[ipssScores objectAtIndex:dataIndex] objectForKey:@"score"]];
        break;
             
        case 1: point = [[TKChartDataPoint alloc] initWithX:[[iScores objectAtIndex:dataIndex] objectForKey:@"date"] Y:[[iScores objectAtIndex:dataIndex] objectForKey:@"score"]];
        break;
             
        case 2: point = [[TKChartDataPoint alloc] initWithX:[[oScores objectAtIndex:dataIndex] objectForKey:@"date"] Y:[[oScores objectAtIndex:dataIndex] objectForKey:@"score"]];
        break;
    }
     
    return point;
}
 
#pragma mark - TKChatLegend delegate
-(NSUInteger)legendItemCountForChart:(TKChart *)chart
{
    NSLog(@"Called?");
    return [chart.series count];
}
 
-(TKChartLegendItem *)legendItemForChart:(TKChart *)chart atIndex:(NSUInteger)index
{
    NSLog(@"Is being called?");
     
    TKChartLegendItem *item = [[TKChartLegendItem alloc] init];
     
    return item;
}
@end

1 Answer, 1 is accepted

Sort by
0
Yoanna
Telerik team
answered on 12 Feb 2015, 11:24 AM
Hi, Sebastiaan,

It is possible to achieve this effect using the panning option of TKChart. 

For instance you can set the properties allowZoom and allowPan of TKChartAxis to NO and YES respectively and you will be able to perform panning without zooming.

Using the zoom property of TKChartAxis you can specify the zoom level for the current axis towards how many TKDataPoints your chart contains in the moment. Once your graph is zoomed you will be able to pan in the respective direction.

The following code snippet shows an example how to do this:
chart.yAxis.allowZoom = NO;
chart.yAxis.allowPan = YES;
chart.yAxis.zoom = 1.5;

I hope this helps. If you have any other questions I will be glad to help.

Regards,
Yoanna
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Chart
Asked by
Sebastiaan
Top achievements
Rank 1
Answers by
Yoanna
Telerik team
Share this question
or