How to implement iOS Chart in a tableview cell?

Question

I'm using iOS Charts (https://github.com/danielgindi/ios-charts) and it works great in a normal view controller. However, I want to implement these charts in a tableview cell where the data source will be different depending on the cell. Also, the outlet to the view that is displaying this chart is in my cell subclass. How do I implement this code (where it works in a non-repeating view controller) to display in a view in my cell subclass? Thanks in advance!!

class ChartViewController: UIViewController {

   @IBOutlet weak var lineChartView: LineChartView!

      override func viewDidLoad() {
         super.viewDidLoad()

         let candidates = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
         let ratings = [33.0, 20.0, 13.0, 9.0, 8.0, 6.0]

         setChart(candidates, values: ratings)
      }

      func setChart(dataPoints: [String], values: [Double]) {

         var dataEntries: [ChartDataEntry] = []

         for i in 0..<dataPoints.count {

            let dataEntry = ChartDataEntry(value: values[i], xIndex: i)

            dataEntries.append(dataEntry)
         }

         let lineChartDataSet = LineChartDataSet(yVals: dataEntries, label: "Rating")
         let lineChartData = LineChartData(xVals: dataPoints, dataSet: lineChartDataSet)
         lineChartView.data = lineChartData
         lineChartView.animate(xAxisDuration: 2.0)
      } 
}

Answer 1

You can set up the cell view for your table view cell subclass so that you can use the LineChartView in the storyboard by copying everything from your view controller into a prototype table view cell.

Remember to set the class of your custom cell in the storyboard’s Identity Inspector.

Add some properties to hold the parameters of your chart. These can be set when you bring up the cell in cellForRowAtIndexPath:.

For example:

class MyTableViewCell: UITableViewCell {
    @IBOutlet weak var lineChartView: LineChartView!
    var candidates: Array<String>?
    var ratings: Array<Float>?

When you bring up the cell, the properties can be set:

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {        
    let cell = tableView.dequeueReusableCellWithIdentifier(“chartCell”, forIndexPath: indexPath)
    candidates = someCandidatesArrayForIndexPath(indexPath)
    ratings = someRatingsArrayForIndexPath(indexPath)
    cell.setChart()
    return cell
}

Therefore, when you return the cell it will have the properties set to show a different view based on its index path. The functions someCandidatesArrayForIndexPath( ) and someRatingsArrayForIndexPath( ) that I have used in the example obtain the values needed to be displayed. You will have to write these functions.

Answer 2

Objective-C

---

Subclass UITableViewCell

@interface ChartTVCell : UITableViewCell <ChartViewDelegate>
@property (nonatomic, strong) IBOutlet CombinedChartView *chartView;
@end

---

Configure your charts in tableView:cellForRowAtIndexPath:

divChartData is a instanceVar of CombinedChartData

else if (indexPath.section == 2) {
    ChartTVCell *cell = [tableView dequeueReusableCellWithIdentifier:@"chartCell" forIndexPath:indexPath];

    cell.chartView.data = divChartData; // <-- this is where your chart data is located. 
    cell.chartView.noDataText = divChartText;
    cell.chartView.tag = 101;

    cell.chartView.delegate = self;
    ...
    // blah blah blah, set up your charts
    ...
    cell.chartView.xAxis.spaceBetweenLabels = 2.0;

    return cell;
}

Getting the data

I get my data from a webservice call, varData is a NSMutableArray with my data

---

// Create the necessary arrays
NSMutableArray<BarChartDataEntry *> *cyValues = [NSMutableArray array], *lyValues = [NSMutableArray array];
NSMutableArray<NSString *> *dates = [NSMutableArray array];
NSMutableArray<UIColor *> *divColors = [NSMutableArray array];

// Loop through your data, populating your charts datasource, colors, ect...
for (int i = 0; i < varData.count; i++) {
    [dates addObject:[CR convertDate:[varData[i]HOUR] inputFormat:@"H" outputFormat:@"h a"]];
    [cyValues addObject:[[BarChartDataEntry alloc] initWithValue:[[varData[i]CYSALES] floatValue] xIndex:i]];
    [lyValues addObject:[[BarChartDataEntry alloc] initWithValue:[[varData[i]LYSALES] floatValue] xIndex:i]];
    [divColors addObject:[UIColor getColorForHourlyChartData:[[varData[i]CYSALES] floatValue] andValue2:[[varData[i]LYSALES] floatValue]]];
}

// init your charts dataSource with the values from above
divChartData = [[CombinedChartData alloc] initWithXVals:dates];
divChartData.barData = [self setupBarChartWithValues:lyValues withLabel:@"Last Year" withColor:[UIColor chartLY] withColorArray:nil];
divChartData.lineData = [self setupLineChartWithValues:cyValues withLabel:@"Current Year" withColor:[UIColor chartCY] withColorArray:divColors];

// Reload tableView
[self.tableView reloadData];

Note: i perfer to use a Combined chart due to the ability to change from line to bar to scatter to pie and back to line without having to change too much (ie: you cant add a barChart to a lineChartView)