Chart in Tabelview cell (xcode)



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.


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. = [[NSMutableArray alloc] init];

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


#import <UIKit/UIKit.h>

@interface ChartCell : UITableViewCell



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


@implementation ChartCell 

@synthesize data;

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

    return self;

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

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


Hope that helps!



Thanks, I’ll try it that way.



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 ?



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