Search code examples
iosobjective-cgraphlineios-charts

Drawing multiple lines using iOS charts

EDIT: The example in the question is purely to simplify it but I do not need to create a line, but a line with data points. That's why I need to use a graph library. The data is dynamic not static. Some user suggested me to use an image for this but is totally not what I am after. I am trying to understand how to use the "iOS-charts" library to draw the graphs I want.

Project link: https://github.com/danielgindi/ios-charts

I am using iOS Charts library to create a graph with multiple lines. I would like to have 3 lines and 20 data points:

  • line 1: 20 values with value 1
  • line 2: 20 values with value 2
  • line 3: 20 values with value 1

I modified the "LineChart2ViewController" example on the github project example for iOS and have not been able to obtain the result I wanted. This is what I get:

enter image description here

What's wrong:

  • the line values labels are 1, 2 and 3 but the y position seem to be somewhere between 1 and 0.4.
  • I get a label for each data point ( I would like instead to remove the labels and show only the data)

How can I achieve this?

Below the modified code:

//  Original code created by Daniel Cohen Gindi on 17/3/15.
//
//  Copyright 2015 Daniel Cohen Gindi & Philipp Jahoda
//  A port of MPAndroidChart for iOS
//  Licensed under Apache License 2.0
//
//  https://github.com/danielgindi/ios-charts
//

#import "LineChart2ViewController.h"
#import "ChartsDemo-Swift.h"

@interface LineChart2ViewController () <ChartViewDelegate>

@property (nonatomic, strong) IBOutlet LineChartView *chartView;
@property (nonatomic, strong) IBOutlet UISlider *sliderX;
@property (nonatomic, strong) IBOutlet UISlider *sliderY;
@property (nonatomic, strong) IBOutlet UITextField *sliderTextX;
@property (nonatomic, strong) IBOutlet UITextField *sliderTextY;

@end

@implementation LineChart2ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.title = @"Line compare";
    _chartView.delegate = self;

    _chartView.descriptionText = @"";
    _chartView.noDataTextDescription = @"You need to provide data for the chart.";

    _chartView.highlightEnabled = YES;
    _chartView.dragEnabled = YES;
    [_chartView setScaleEnabled:YES];
    _chartView.drawGridBackgroundEnabled = NO;
    _chartView.pinchZoomEnabled = YES;

    _chartView.backgroundColor = [UIColor colorWithWhite:204/255.f alpha:1.f];

    _chartView.legend.form = ChartLegendFormLine;
    _chartView.legend.font = [UIFont fontWithName:@"HelveticaNeue-Light" size:11.f];
    _chartView.legend.textColor = UIColor.whiteColor;
    _chartView.legend.position = ChartLegendPositionBelowChartLeft;

    ChartXAxis *xAxis = _chartView.xAxis;
    xAxis.labelFont = [UIFont systemFontOfSize:12.f];
    xAxis.labelTextColor = UIColor.whiteColor;
    xAxis.drawGridLinesEnabled = NO;
    xAxis.drawAxisLineEnabled = NO;
    xAxis.spaceBetweenLabels = 1.0;

    ChartYAxis *leftAxis = _chartView.leftAxis;
    leftAxis.labelTextColor = [UIColor colorWithRed:51/255.f green:181/255.f blue:229/255.f alpha:1.f];
    leftAxis.customAxisMax = 3;
    leftAxis.drawGridLinesEnabled = YES;

    ChartYAxis *rightAxis = _chartView.rightAxis;
    rightAxis.labelTextColor = UIColor.redColor;
    rightAxis.customAxisMax = 20.0;
    rightAxis.startAtZeroEnabled = NO;
    rightAxis.customAxisMin = 0.0;
    rightAxis.drawGridLinesEnabled = NO;
    [rightAxis setEnabled:NO];

    [self setDataCount:20 range:4];

    [_chartView animateWithXAxisDuration:2.5];
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (void)setDataCount:(int)count range:(double)range
{
    NSMutableArray *xVals = [[NSMutableArray alloc] init];

    for (int i = 0; i < count; i++)
    {
        [xVals addObject:[@(i) stringValue]];
    }

    NSMutableArray *yVals = [[NSMutableArray alloc] init];

    for (int i = 0; i < count; i++)
    {
        //double val = (double) (arc4random_uniform(range));
        double val = 1.0;
        [yVals addObject:[[ChartDataEntry alloc] initWithValue:val xIndex:i]];
    }

    LineChartDataSet *set1 = [[LineChartDataSet alloc] initWithYVals:yVals label:@"Line 1"];
    set1.axisDependency = AxisDependencyLeft;
    [set1 setColor:[UIColor colorWithRed:51/255.f green:181/255.f blue:229/255.f alpha:1.f]];
    [set1 setCircleColor:UIColor.whiteColor];
    set1.lineWidth = 2.0;
    set1.circleRadius = 3.0;
    set1.fillAlpha = 65/255.0;
    set1.fillColor = [UIColor colorWithRed:51/255.f green:181/255.f blue:229/255.f alpha:1.f];
    set1.highlightColor = [UIColor colorWithRed:244/255.f green:117/255.f blue:117/255.f alpha:1.f];
    set1.drawCircleHoleEnabled = NO;

    NSMutableArray *yVals2 = [[NSMutableArray alloc] init];

    for (int i = 0; i < count; i++)
    {
        double val = 2.0;
        ChartDataEntry * dataEntry = [[ChartDataEntry alloc] initWithValue:val xIndex:i];
        [yVals2 addObject:dataEntry];
    }

    LineChartDataSet *set2 = [[LineChartDataSet alloc] initWithYVals:yVals2 label:@"Line 2"];
    set2.axisDependency = AxisDependencyRight;
    [set2 setColor:UIColor.redColor];
    [set2 setCircleColor:UIColor.whiteColor];
    set2.lineWidth = 2.0;
    set2.circleRadius = 3.0;
    set2.fillAlpha = 65/255.0;
    set2.fillColor = UIColor.redColor;
    set2.highlightColor = [UIColor colorWithRed:244/255.f green:117/255.f blue:117/255.f alpha:1.f];
    set2.drawCircleHoleEnabled = NO;

    NSMutableArray *yVals3 = [[NSMutableArray alloc] init];

    for (int i = 0; i < count; i++)
    {
        double val = 3.0;
        [yVals3 addObject:[[ChartDataEntry alloc] initWithValue:val xIndex:i]];
    }

    LineChartDataSet *set3 = [[LineChartDataSet alloc] initWithYVals:yVals3 label:@"Line 3"];
    set3.axisDependency = AxisDependencyRight;
    [set3 setColor:UIColor.blueColor];
    [set3 setCircleColor:UIColor.whiteColor];
    set3.lineWidth = 2.0;
    set3.circleRadius = 3.0;
    set3.fillAlpha = 65/255.0;
    set3.fillColor = UIColor.blueColor;
    set3.highlightColor = [UIColor colorWithRed:244/255.f green:117/255.f blue:117/255.f alpha:1.f];
    set3.drawCircleHoleEnabled = NO;

    NSMutableArray *dataSets = [[NSMutableArray alloc] init];
    [dataSets addObject:set1];
    [dataSets addObject:set2];
    [dataSets addObject:set3];

    LineChartData *data = [[LineChartData alloc] initWithXVals:xVals dataSets:dataSets];
    [data setValueTextColor:UIColor.whiteColor];
    [data setValueFont:[UIFont systemFontOfSize:9.f]];

    _chartView.data = data;
}
Solution

  • Thanks to @T_77 I solved the first problem of removing the labels from each data point by setting the font size to 0, code:

    LineChartData *data = [[LineChartData alloc] initWithXVals:xVals dataSets:dataSets];
[data setValueTextColor:UIColor.whiteColor];
//[data setValueFont:[UIFont systemFontOfSize:9.f]];
[data setValueFont:[UIFont systemFontOfSize:0.0]];

    I then changed the axisDependency value of LineChartDataSet to AxisDependencyLeft so that the values I had set are linked to the left axis rather than the x axis.

    Here is the code:

    LineChartDataSet *set3 = [[LineChartDataSet alloc] initWithYVals:yVals3 label:@"Line 3"];
set3.axisDependency = AxisDependencyLeft;

    Here is the result:

    enter image description here