sivakspt / JBChartView

iOS-based charting library for both line and bar graphs.

JBChartView

Introducing JBChartView - Jawbone's iOS-based charting library for both line and bar graphs. It is easy to set-up, and highly customizable.

Features

• Drop-in UIView subclass supported across all devices.
• Line and bar graph support.
• Simple to use protocols modeled after a UITableView.
• Highly customizable.
• Expand & collapse animation support.

Requirements

• Requires iOS 7 or later
• Requires Automatic Reference Counting (ARC)

Demo

Build and run the JBChartViewDemo project in Xcode. The demo demonstrates the use of both the line and bar charts. It also outlines how a chart's appearance can be customized.

Installation

CocoaPods is the recommended method of installing JBChartView.

The Pod Way

Simply add the following line to your Podfile:

pod 'JBChartView'

Your Podfile should look something like:

platform :ios, '7.0'
pod 'JBChartView', '~> 1.0'

The Old School Way

The simpliest way to use JBChartView with your application is to drag and drop the /Classes folder into you're Xcode 5 project. It's also recommended you rename the /Classes folder to something more descriptive (ie. "Jawbone - JBChartView").

Usage

Both JBChartView implementations have a similiar data source and delgate pattern to UITableView. If you're familiar with using a UITableView or UITableViewController, using a JBChartView subclass should be a breeze!

JBBarChartView

To initialze a JBBarChartView, you only need a few lines of code:

JBBarChartView *barChartView = [[JBBarChartView alloc] init];
barChartView.delegate = self;
barChartView.dataSource = self;
[self addSubview:barChartView];

At a minimum, you need to inform the data source how many bars are in the chart:

- (NSInteger)numberOfBarsInBarChartView:(JBBarChartView *)barChartView
{
	return ...; // number of bars in chart
}

Secondly, you nee to inform the delegate the height of each bar (automatically normalized across the entire chart):

- (NSInteger)barChartView:(JBBarChartView *)barChartView heightForBarViewAtAtIndex:(NSInteger)index
{
	return ...; // height of bar at index
}

JBLineChartView

Similiarily, to initialze a JBLineChartView, you only need a few lines of code:

JBLineChartView *lineChartView = [[JBLineChartView alloc] init];
lineChartView.delegate = self;
lineChartView.dataSource = self;
[self addSubview:lineChartView];

At a minimum, you need to inform the data source how many points are in the line chart:

- (NSInteger)numberOfPointsInLineChartView:(JBLineChartView *)lineChartView
{
	return ...; // number of points in chart
}

Secondly, you nee to inform the delegate the y-position of each point (automatically normalized across the entire chart):

- (NSInteger)lineChartView:(JBLineChartView *)lineChartView heightForIndex:(NSInteger)index
{
	return ...; // y-position of poinnt at index (x-axis)
}

Customization

Both the line and bar charts support a robust set of customization options.

The background of a bar or line chart can be set just like any other view:

self.barChartView.backgroundColor = ...; // UIColor
self.lineChartView.backgroundColor = ...; // UIColor

Any JBChartView subclass supports the use of headers and footers (similiar to that of UITableView):

self.barChartView.footerView = ...; // UIView
self.lineChartView.headerView = ...; // UIView

Lastly, any JBChartView subclass can be collapsed or expanded programmatically via the state property. If you chose to animate state changes, a callback helper can be used to notify you when the animation has completed:

- (void)setState:(JBChartViewState)state animated:(BOOL)animated callback:(void (^)())callback;

JBBarChartView

The color of a chart's bar can be customized via the optional protocol:

- (UIColor *)barColorForBarChartView:(JBBarChartView *)barChartView atIndex:(NSInteger)index
{
	return ...; // color of line in chart
}

Furthermore, the color of the selection bar (on touch events) can be customized via the optional protocol:

- (UIColor *)selectionBarColorForBarChartView:(JBBarChartView *)barChartView
{
	return ...; // color of selection view
}

Lastly, a bar chart's selection events are delegated back via:

- (void)barChartView:(JBBarChartView *)barChartView didSelectBarAtIndex:(NSInteger)index
{
	// Update view
}

- (void)barChartView:(JBBarChartView *)barChartView didUnselectBarAtIndex:(NSInteger)index
{
	// Update view
}

A JBBarChartView visuaul overview can be found here.

JBLineChartView

The color of the chart's line can be customized via the optional protocol:

- (UIColor *)lineColorForLineChartView:(JBLineChartView *)lineChartView
{
	return ...; // color of line in chart
}

Furthermore, the color of the selection bar (on touch events) can be customized via the optional protocol:

- (UIColor *)selectionColorForLineChartView:(JBLineChartView *)lineChartView
{
	return ...; // color of selection view
}

Lastly, a line chart's selection events are delegated back via:

- (void)lineChartView:(JBLineChartView *)lineChartView didSelectChartAtIndex:(NSInteger)index
{
	// Update view
}

- (void)lineChartView:(JBLineChartView *)lineChartView didUnselectChartAtIndex:(NSInteger)index
{
	// Update view
}

A JBLineChartView visuaul overview can be found here.

License

Usage is provided under the Apache License (v2.0). See LICENSE for full details.