This question is locked. New answers and comments are not allowed.
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:
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