arthurguibert / fslinechart

A line chart library for iOS

FSLineChart

A line chart library for iOS.

Screenshots

 

Installing FSLineChart

Add the contents of the FSLineChart project to your directory or simply add the following line to your Podfile:

pod "FSLineChart"

How to use

FSLineChart is a subclass of UIView so it can be added as regular view. The block structure allows you to format the values displayed on the chart the way you want. Here is a simple swift example:

var data: [Int] = []
        
// Generate some dummy data
for _ in 0...10 {
    data.append(Int(20 + (arc4random() % 100)))
}

verticalGridStep = 5
horizontalGridStep = 9
labelForIndex = { "\($0)" }
labelForValue = { "$\($0)" }
setChartData(data)

Or in objective-c

NSArray* months = @[@"January", @"February", @"March", @"April", @"May", @"June", @"July"];
    
FSLineChart* lineChart = [[FSLineChart alloc] initWithFrame:frame];

lineChart.labelForIndex = ^(NSUInteger item) {
    return months[item];
};

lineChart.labelForValue = ^(CGFloat value) {
    return [NSString stringWithFormat:@"%.02f €", powf(10,value)];
};

[lineChart setChartData:chartData];

You can also set several parameters. Some of the parameters including color and fillColor must be set before calling the setChartData method. All those properties are available:

// Index label properties
@property (copy) FSLabelForIndexGetter labelForIndex;
@property (nonatomic, strong) UIFont* indexLabelFont;
@property (nonatomic) UIColor* indexLabelTextColor;
@property (nonatomic) UIColor* indexLabelBackgroundColor;

// Value label properties
@property (copy) FSLabelForValueGetter labelForValue;
@property (nonatomic, strong) UIFont* valueLabelFont;
@property (nonatomic) UIColor* valueLabelTextColor;
@property (nonatomic) UIColor* valueLabelBackgroundColor;
@property (nonatomic) ValueLabelPositionType valueLabelPosition;

// Number of visible step in the chart
@property (nonatomic) int gridStep;
@property (nonatomic) int verticalGridStep;
@property (nonatomic) int horizontalGridStep;

// Margin of the chart
@property (nonatomic) CGFloat margin;

@property (nonatomic) CGFloat axisWidth;
@property (nonatomic) CGFloat axisHeight;

// Decoration parameters, let you pick the color of the line as well as the color of the axis
@property (nonatomic, strong) UIColor* axisColor;
@property (nonatomic) CGFloat axisLineWidth;

// Chart parameters
@property (nonatomic, strong) UIColor* color;
@property (nonatomic, strong) UIColor* fillColor;
@property (nonatomic) CGFloat lineWidth;

// Data points
@property (nonatomic) BOOL displayDataPoint;
@property (nonatomic, strong) UIColor* dataPointColor;
@property (nonatomic, strong) UIColor* dataPointBackgroundColor;
@property (nonatomic) CGFloat dataPointRadius;

// Grid parameters
@property (nonatomic) BOOL drawInnerGrid;
@property (nonatomic, strong) UIColor* innerGridColor;
@property (nonatomic) CGFloat innerGridLineWidth;

// Smoothing
@property (nonatomic) BOOL bezierSmoothing;
@property (nonatomic) CGFloat bezierSmoothingTension;

// Animations
@property (nonatomic) CGFloat animationDuration;

Examples

You can clone the repo to see a simple example. I'm also using FSLineChart on ChartLoot if you want to see the integration in a bigger project.

fslinechart's Issues

How to have two more chart on the same layer?

I've seen some chart libraries support multiple charts overlapping together. Can I do that with this library? Thanks!

How to plot multiple lines?

Change the entire background color of chart?

Maybe not an issue, but I can't figure out how to change the background. Ideally, reduce the alpha, but I can live with setting it to black. Is there a way to do that?

If we have lots of data , the chart can't scroll at all.

All data will be pushed together, the labelIndex in particular.

No way to use with storyboards

Need

- (void)awakeFromNib
{
    self.backgroundColor = [UIColor whiteColor];
    [self setDefaultParameters];
}

In FSLineChart.m in order to set up defaults.

clearChartData not clear coordinate axis

clearChartData not clear coordinate axis

Include Swift type hinting

Please include type hinting to make implementation in Swift easier

add UIGraphicsPopContext

hi, the function drawGrid of FSLineChart,

since it invoke : UIGraphicsPushContext(ctx);
so have to release it as follows:

//@step should be pop to release
UIGraphicsPopContext();

or else memory leak ?

Can we have options to move y axis to left side instead of right?

Can we have options to move y axis to left side instead of right and the data points are represented as small dots on the graph

'clearChartData:' doesn't work

When I call the method ''clearChartData:', the chart will draw again.

The method 'drawRect:' will call to redraw.

So I can't clear the chart.

Help me, thanks.

How to make the labelForIndex value load from the custom value array?

Now the labelForIndex value is load from the ChartData, how can I make it load from the custom value array? Such as

 NSArray *indexes = @[@"0",@"33",@"66",@"100"];

and the value is

 NSArray *values = @[@"10",@"23",@"46",@"80"];

Document: color must be called before setChartData

I found out the hard way. If you call setChartData and then later call color then the color will not be used.

Precision from float value with 4 digits?

Hi there,

First of all, thank you for this great library.

I got a question about the precision of the float, when I set the CGFloat value to .4f it doesn't return the last 2 digits as seen on the screenshot, this results in 0.

Also the chart is showing almost a straight line because it doesn't measure the last 2 digits while the last two digits are very important.

self.lineChart.labelForValue = ^(CGFloat value) {
return [NSString stringWithFormat:@"€ %.4f", value];
};

Resize

When resizing the line chart, the contents are not resized.

if _max equal to _min cause crash

- (CGFloat)minVerticalBound
{
    return MIN(_min, 0);
}

- (CGFloat)maxVerticalBound
{
    return MAX(_max, 0);
}

if _max =0 and _min = 0 then minVerticalBound and maxVerticalBound will be 0

CGFloat scale = _axisHeight / (maxBound - minBound);

this will cause a crash

Can i reload Chart with some updated data?

Hi, does FSLineChart support reloading ( using for example NSTimer ) chart with updated data ?

More in depth: can i reload chart every seconds with new data ?

How to set a max value for x axis

I want to set a different values value for x-axis which may not be present in the x-axis value array. Example : I want to set 1500 as my total distance and I may get y values till 120 in my x-axis value array. How to set a max value for x axis?

Seems crash when all data are zero

NSMutableArray* chartData = [NSMutableArray arrayWithCapacity:10];
srand(time(nil));
for(int i=0;i<10;i++) {
int r = (rand() + rand()) % 1000;
chartData[i] = [NSNumber numberWithInt:0];
}
// Creating the line chart
FSLineChart* lineChart = [[FSLineChart alloc] initWithFrame:CGRectMake(20, 60, [UIScreen mainScreen].bounds.size.width - 40, 166)];
lineChart.verticalGridStep = 5;
lineChart.horizontalGridStep = 9;
//lineChart.fillColor = nil;
lineChart.labelForIndex = ^(NSUInteger item) {
return [NSString stringWithFormat:@"%lu",(unsigned long)item];
};
lineChart.labelForValue = ^(CGFloat value) {
return [NSString stringWithFormat:@"%.f", value];
};
[lineChart setChartData:chartData];
return lineChart;

I replace all the data point with 0 in the example project and the app crashed. Here is the failure information:

Assertion failed: (CGFloatIsValid(x) && CGFloatIsValid(y)), function void CGPathMoveToPoint(CGMutablePathRef, const CGAffineTransform *, CGFloat, CGFloat), file Paths/CGPath.cc, line 254.

The last X label position is not rightly set.

The last X label position is not rightly set.
http://imgur.com/R3wQupd

Calling setChartData: with an array containing one data point will crash the chart

In a number of locations, calculations are done using (_data.count - 1), e.g. line 134 (https://github.com/ArthurGuibert/FSLineChart/blob/master/FSLineChart/FSLineChart/FSLineChart.m#L134).

There are a number of other locations where this assumption (_data.count > 1) is made. The crashes are happening because these calculated values end up being NaN.

In addition to empty data arrays, it looks like the code needs to safeguard against data arrays containing one value.

How to custom Y axis of the minimum

How to custom Y axis of the minimum

months(labelForIndex) can't be two objects?

• (void)loadChartWithDates {

  NSArray *chartData=@[@"78",@"23"];

  NSArray* months = @[@"2016-05-23", @"2016-05-24"];

  // Setting up the line chart
  _chartWithDates.verticalGridStep = 6;
  _chartWithDates.horizontalGridStep = 3;
  _chartWithDates.fillColor = nil;
  _chartWithDates.displayDataPoint = YES;
  _chartWithDates.dataPointColor = [UIColor fsOrange];
  _chartWithDates.dataPointBackgroundColor = [UIColor fsOrange];
  _chartWithDates.dataPointRadius = 2;
  _chartWithDates.color = [_chartWithDates.dataPointColor colorWithAlphaComponent:0.3];
  _chartWithDates.valueLabelPosition = ValueLabelLeftMirrored;

  _chartWithDates.labelForIndex = ^(NSUInteger item) {
  return months[item];
  };

  _chartWithDates.labelForValue = ^(CGFloat value) {
  return [NSString stringWithFormat:@"%.f", value];
  };

  [_chartWithDates setChartData:chartData];
  }

if NSArray chartData=@[@"78",@"23"]; NSArray months = @[@"2016-05-23", @"2016-05-24"];
the second object 2016-05-24 can't be load ?
why?

does it support multiline?

it seems it now supports only one line for LineChart,
does it support multiline?

Thansk

Value for each point

Hello, I would like to present on the graph the value of each specific point that I plot.
Is there any way to do this?
Maybe showing a label on top of each point with its value, or, on the Y-axis, instead of presenting a series of steps, is there any way to show the value of the point? Do you understand what I mean?
Thank you in advance for your help, and @ArthurGuibert, Thank you for the framework! It is great!

Label for Indexes overlaps

Minimum Y-value greater than zero?

Sorry, another question. Is there a way to have the graph's y-axis not start at zero? I have a data set that ranges from 20000-25000, and don't want all of the excess displayed.

Ability to draw lines with negative values

Is it possible to implement something like this:

Line going in -ve axis while having all data in positive numbers.

Why the live goes down when it has all the data as positive numbers?

Adding all zero's crashes chart

An array full of zero's crashes the chart.

Issue with margins in TableView

@ArthurGuibert Please help

I am using tableview and view inside content view. I add all 4 constraints but graph line is out of view box

Cannot change axis

Changing chart parameters is not possible after adding chart data. A workaround is this hack which resets the whole chart:

FSLineChart *newChart = [[FSLineChart alloc] initWithFrame:self.lineChartFull.frame];
[self.lineChartFull removeFromSuperview];
[self.view addSubview:newChart];
self.lineChartFull = newChart;

Getting strange behaviour when value goes above 10?

See image, why am I getting this behaviour when it goes up 10?

See my code below:

float n = [[sort objectAtIndex:0] floatValue];
        
        NSString* forFloat = [NSString stringWithFormat:@"%.3f", n];
        lowFloat = [forFloat floatValue]-0.001;

NSMutableArray* chartData = [NSMutableArray arrayWithCapacity:self.lineData.count];
            NSMutableArray* months = [NSMutableArray arrayWithCapacity:self.lineData.count];
            for(int i=0;i<self.lineData.count;i++) {
                
                Kobject *z = [self.lineData objectAtIndex:i];
                chartData[i] = [NSNumber numberWithFloat:[z.oPrice floatValue]-lowFloat];
                months[i] = z.oDate;
            }
            
            self.lineChart = [[FSLineChart alloc] initWithFrame:CGRectMake(15, 44, [UIScreen mainScreen].bounds.size.width - 30, 120)];
            self.lineChart.verticalGridStep = 6;
            self.lineChart.horizontalGridStep = 7;
            self.lineChart.fillColor = [UIColor colorWithRed:0.24 green:0.72 blue:0.68 alpha:0.20];
            self.lineChart.color = [self.lineChart.dataPointColor colorWithAlphaComponent:0.3];
            self.lineChart.valueLabelPosition = ValueLabelLeftMirrored;
            self.lineChart.indexLabelFont = [UIFont fontWithName:@"HelveticaNeue-Light" size:10];
            self.lineChart.valueLabelFont = [UIFont fontWithName:@"HelveticaNeue-Light" size:9];
            self.lineChart.labelForIndex = ^(NSUInteger item) {
                return months[item];
            };
            self.lineChart.labelForValue = ^(CGFloat value) {
                
                return [NSString stringWithFormat:@"$ %.2f", value+lowFloat];
            };
            [self.lineChart setChartData:chartData];
            [view addSubview:self.lineChart];

Wrong behavior with negative numbers

Hi!
If I have only negative numbers, I get result like this:

My data:
7 -1
10 0
11 0