Introducing JBChartView - Jawbone's iOS-based charting library for both line and bar graphs. It is easy to set-up, and highly customizable.
- 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.
- Requires iOS 7 or later
- Requires Automatic Reference Counting (ARC)
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.
CocoaPods is the recommended method of installing JBChartView.
Simply add the following line to your Podfile:
pod 'JBChartView'
Your Podfile should look something like:
platform :ios, '7.0'
pod 'JBChartView', '~> 1.0.3'
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").
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!
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
}
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)
}
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;
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.
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.
Usage is provided under the Apache License (v2.0). See LICENSE for full details.