Giter VIP home page Giter VIP logo

jbchartview's Introduction

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.2'

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.

jbchartview's People

Contributors

terryworona avatar joelk avatar

Watchers

phylony avatar James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.