Chart in Tabelview cell (xcode)


#1

Hello,

I want to show in a table view a chart,
but do not know how and where I need to define the chart.
Does anyone have an example code please me?
Thank you.
Bernhard


#2

Greetings Program!

The simplest solution is to subclass UITableviewCell and set the cell in cellForRowAtIndexPath or if you have static cells, set the class in the storyboard.

I used the GettingStarted sample app code for the custom cell below; it should give you an idea of what needs to be done - just replace the appropriate code with your own chart code.

Note that in the subclass, you have to use self.contentView and not self.view.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
	NSString *CellIdentifier = @"Cell";

	// You'll probably check to see if the indexpath is for the cell you want the chart in.
	// if (isRowForChart) {
	ChartCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
	
	// Pass in the data.
	cell.data = [[NSMutableArray alloc] init];

	// } else { use another cell }
	
	return cell;
}

 ChartCell.h

#import <UIKit/UIKit.h>

@interface ChartCell : UITableViewCell

@end

ChartCell.m

#import "ChartCell.h"
#import <ShinobiCharts/ShinobiCharts.h>

@interface ChartCell () <SChartDatasource>

// Use the property for passed in data.
@property (nonatomic, strong) NSMutableArray *data;
@property (nonatomic, strong) ShinobiChart *chart;

@end

@implementation ChartCell 

@synthesize data;

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
	[self configureChart];
    }

    return self;
}

-(void)layoutSubviews
{
	[super layoutSubviews];

	// Assuming that the data was set in the UITableViewDelegate method willDisplayCell,
	// all that needs to be done is have the chart reload the data.
	[chart reloadData];
}

-(void)configureChart
{
	// Create the chart
	self.contentView.backgroundColor = [UIColor whiteColor];
	
	CGFloat margin = UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone ? 20.0 : 50.0;
	chart = [[ShinobiChart alloc] initWithFrame:CGRectMake(0, margin, self.contentView.bounds.size.width, self.contentView.bounds.size.height - margin)];
	chart.title = @"Trigonometric Functions";
	chart.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
	
	chart.licenseKey = @""; // TODO: add your trial licence key here!
	
	// add a pair of axes
	SChartNumberAxis *xAxis = [SChartNumberAxis new];
	xAxis.title = @"X Value";
	chart.xAxis = xAxis;
	
	SChartNumberAxis *yAxis = [SChartNumberAxis new];
	yAxis.title = @"Y Value";
	yAxis.rangePaddingLow = @(0.1);
	yAxis.rangePaddingHigh = @(0.1);
	chart.yAxis = yAxis;
	
	// enable gestures
	yAxis.enableGesturePanning = YES;
	yAxis.enableGestureZooming = YES;
	xAxis.enableGesturePanning = YES;
	xAxis.enableGestureZooming = YES;
	
	// add to the view
	[self.contentView addSubview:chart];
	
	chart.datasource = self;
	
	chart.legend.hidden = UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone;
}

#pragma mark - SChartDatasource methods

- (NSInteger)numberOfSeriesInSChart:(ShinobiChart *)chart {
	return 2;
}

-(SChartSeries *)sChart:(ShinobiChart *)chart seriesAtIndex:(NSInteger)index {
	SChartLineSeries *lineSeries = [SChartLineSeries new];
	lineSeries.style.showFill = YES;
	
	// the first series is a cosine curve, the second is a sine curve
	if (index == 0) {
		lineSeries.title = @"y = cos(x)";
	} else {
		lineSeries.title = @"y = sin(x)";
	}
	
	return lineSeries;
}

- (NSInteger)sChart:(ShinobiChart *)chart numberOfDataPointsForSeriesAtIndex:(NSInteger)seriesIndex {
	return 100;
}

- (id<SChartData>)sChart:(ShinobiChart *)chart dataPointAtIndex:(NSInteger)dataIndex forSeriesAtIndex:(NSInteger)seriesIndex {
	SChartDataPoint *datapoint = [SChartDataPoint new];
	
	// both functions share the same x-values
	double xValue = dataIndex / 10.0;
	datapoint.xValue = [NSNumber numberWithDouble:xValue];
	
	// compute the y-value for each series
	if (seriesIndex == 0) {
		datapoint.yValue = @(cos(xValue));
	} else {
		datapoint.yValue = @(sin(xValue));
	}
	
	return datapoint;
}

@end

Hope that helps!

Wg


#3

Thanks, I’ll try it that way.


#4

Hi,

I now have the problem, that the charts are displayed correctly at the start of Tabelview,
but after scrolling is no longer displayed.
Click in a cell, the chart is redrawing and displayed correctly.

Per chart ca. 250 Datapointsw.
What can I do ?

          


#5

Problem found
I had activated an animation with 0.5 seconds for the chart,
without animation all charts are displayed correctly.