besttumi / wychart

A simple and elegant Chart library with rich animations.

WYChart

A simple and elegant LineChart and pieChart library with rich animations. More type of charts will come not long after.

WYLineChart

Make it easy to create a line chart, Scrollable, Pinchable, Animatable

WYPieChart

Make it easy to create a Pie chart, Rotatable, Draggable, Selectable, Animatable

---

If you love WYChart , encourage me with a star 🌟 , thanks!

如果你喜欢WYChart , 给我一个星星🌟作为奖励 , 谢谢 ！

另外，关于WYChart技术及其它介绍的博文已开始撰写并逐步发布，👉点击这里，希望你能给出宝贵的意见。🍻🍻

中文简介请点击 👉 中文简介

Project

Requirements

WYChart works on iOS7+, compatible with ARC. Some Framework are required, as follow:

• Foundation.framework
• UIKit.framework
• QuartzCore.framework
• CoreGraphic.framework

The frameworks above always included in most xcode project.

License

WYChart is available under the MIT license. See the LICENSE file for more info.

Demo

The Project included a demo showing the tow chart and the code that how to use the chart with properties and methods.In perticalculer, there are setting pages for two charts which you can change the property and see what changed. To run the example project, clone the repo, and run pod install from the Example directory first. The demo page shows follow:

Main Table

Pie Chart Setting Page

Line Chart Setting Page

Getting Started

Installation

WYChart is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod "WYChart"

Cocoapods

To install WYChart in you project, just add the following line to you podfile:

pod 'WYChart'

then run following line in terminal:

pod install

Add floder

Just dragging the WYChart floder in your download project into you own project.

Setup

WYChart design the interface like most Controls in UIKit.framework, such as UITableView, UICollection, you have to implemente the required delegate and dataSource method, and setting some essential property.

####First of all Add the following line to you .h or .m file where you use the chart:

#import "WYLineChart.h"

or

#import "WYPieChart.h"

The follow lines will show you how to initialize WYLineChart and WYPieChart in different way.

WYLineChart

First, and following line to follow WYLineChartViewDelegate and WYLineChartViewDataSource:

	@interface SomeViewController () <WYLineChartViewDelegate, WYLineChartViewDatasource>

Second, initilize instance for WYLineChartView:

	_chartView = [[WYLineChartView alloc] initWithFrame:frame];
	_chartView.delegate = self;
	_chartView.datasource = self;  

Third, set the line chart data array, which contained numbers of WYLineChartPoint:

	WYLineChartPoint *point = [[WYLineChartPoint alloc] init];
	point.value = 50503.134;
	[container addObject:point];
	point = [[WYLineChartPoint alloc] init];
	point.value = 60623.4;
	[container addObject:point];
	
	...
	
	_chartView.points = [NSArray arrayWithArray:_points];

Finally, add chart to controller`s view and update line chart:

	[self.view addSubview:_chartView];  
	[_chartView updateGraph];

Besides, you have to implement the required methods of delegate and dataSource:

Delegate

	- (NSInteger)numberOfLabelOnXAxisInLineChartView:(WYLineChartView *)chartView
	
	- (CGFloat)gapBetweenPointsHorizontalInLineChartView:(WYLineChartView *)chartView
	
	- (CGFloat)maxValueForPointsInLineChartView:(WYLineChartView *)chartView
	
	- (CGFloat)minValueForPointsInLineChartView:(WYLineChartView *)chartView

DataSource

	- (NSString *)lineChartView:(WYLineChartView *)chartView contentTextForXAxisLabelAtIndex:(NSInteger)index
	
	- (WYLineChartPoint *)lineChartView:(WYLineChartView *)chartView pointReferToXAxisLabelAtIndex:(NSInteger)index

---

The jobs above is not enough, there are a lot of optional property for you to config the appearence and interaction of line chart.

Gradient Foreground
To make the line chart more elegant, you can choose to add gradient foreground for it, add the following lines:

	_chartView.gradientColors = @[[UIColor colorWithWhite:1.0 alpha:0.9],
                              [UIColor colorWithWhite:1.0 alpha:0.0]];
	_chartView.gradientColorsLocation = @[@(0.0), @(0.95)];
	_chartView.drawGradient = YES;

That will show you a gradient foreground as following:

Gradient Foreground

Otherwise:

Without Gradient Foreground

Scrollabel

WYLineChart support you to scroll to chart horizontally, just add the simple line following:

	_chartView.scrollable = YES;  

Then, you can scroll the chart:

Scroll Chart

Pinchable

You can also add the following line:

	_chartView.pinchable = YES;

to make the chart pinchable, that`s useful when you want to scale the data grade for chart to show, you can pinch out or pinch in to reload data, and the method - (void)lineChartView:didEndedPinchGraphWithOption: will be notified, in which you can reset the data array and update the chart.

Line Style

WYLineChart supports three line style:

	kWYLineChartMainStraightLine,
	kWYLineChartMainBezierWaveLine,
	kWYLineChartMainBezierTaperLine  

and if you do not want a line while just some point, you can choose kWYLineChartMainNoneLine

Wave Style

Straight Style

Tapper Style

None Line

Animation Style

There are several animation for chart:

	kWYLineChartAnimationDrawing,
	kWYLineChartAnimationAlpha,
	kWYLineChartAnimationWidth,
	kWYLineChartAnimationRise,
	kWYLineChartAnimationSpring,
	kWYLineChartNoneAnimation

For example, kWYLineChartAnimationDrawing show as:

Drawing Animation

and kWYLineChartAnimationSpring show as:

Spring Animation

Junction Style

You can choose a junction style bellowing:

	kWYLineChartJunctionShapeNone,
	kWYLineChartJunctionShapeSolidCircle,
	kWYLineChartJunctionShapeHollowCircle,
	kWYLineChartJunctionShapeSolidSquare,
	kWYLineChartJunctionShapeHollowSquare,
	kWYLineChartJunctionShapeSolidRectangle,
	kWYLineChartJunctionShapeHollowRectangle,
	kWYLineChartJunctionShapeSolidStar,
	kWYLineChartJunctionShapeHollowStar  

For example, kWYLineChartJunctionShapeHollowRectangle will show as:

Hollow Rectangle

Touch Point/Line

WYLineChart containe a long press gesture for a point to show where you touch on the line, and will return the point by the delegate method bellow:

	- (void)lineChartView:didBeganTouchAtSegmentOfPoint:value:
	- (void)lineChartView:didMovedTouchToSegmentOfPoint:value:
	- (void)lineChartView:didEndedTouchToSegmentOfPoint:value:  

Touch Point

There`re numbers of feature in WYLineChart, if you are intrested in it, see the interface.

WYPieChart

First, and following line to follow WYPieChartViewDelegate and WYPieChartViewDataSource:

	@interface SomeViewController () <WYLineChartViewDelegate, WYLineChartViewDatasource>

Second, initilize instance for WYPieChartView:

	_pieView = [[WYPieChartView alloc] initWithFrame:CGRectMake(0, 70, self.view.wy_boundsWidth, 300)];
	_pieView.delegate = self;
	_pieView.datasource = self;   

Third, set the pie chart data array, which contained numbers of pie`s value:

	_pieView.values = @[@50, @200, @40, @300, @100];  

Finally, add chart to controller`s view and update pie chart:

	[self.view addSubview:_pieView]; 
	[_pieView update];

Besides, colors for sector is required by dataSource method - (UIColor *)pieChartView:sectorColorAtIndex:, you have to implement that method to dye your pieChart.

Like WYLineChart, there are also number of optional property for you to config the appearence and interaction of line chart.

Pie Style

You can choose style between kWYPieChartNormalStyle and kWYPieChartGearStyle, as showing below:

Normal Pie Style

Gear Pie Style

Just add the following line when you initialize the pie chart:

	_pieView.style = kWYPieChartNormalStyle/kWYPieChartGearStyle;  

Rotatable

If you want the pie chart to be more interactable, you can add the code below:

	 _pieView.rotatable = YES;  

to make it rotatable.

Pie Chart Rotatable

Selected

WYPieChart support you to select the sectors with two types of animation, and will call back to the delegate method pieChartView:didSelectedSectorAtIndex: when you selecting, you can choose selected type between kWYPieChartSectorSelectedExtraction and kWYPieChartSectorSelectedPull as below:

	_pieView.selectedStyle = kWYPieChartSectorSelectedExtraction;  

Extraction Style

Pull Style

Animation Style

Six styles of animation you can choose to animation the pie chart when reloading:

kWYPieChartAnimationOrderlySpreading,
kWYPieChartAnimationAllSpreading,
kWYPieChartAnimationStretching,
kWYPieChartAnimationAlpha,
kWYPieChartAnimationScale  

For example, kWYPieChartAnimationAllSpreading style will show as below:

All Spreading Style

You can select the other animation styles to see what it perform in the demo.

Inner Circle

The property showInnerCircle is define should a empty circle draw in the chart, which you can add a label on it, such as a sum label.

Inner Circle

Gradient

The fillByGradient property default is NO, if you set it to YES, every sector will fill by gradient.

Gradient Fill

Some other feature also include in WYPieChart, you can find them in PieChartView.h


##Contact

If you have any problem or got an idear, i will be glad if share them to me by a #issue or [email protected], and this my personal blog where you can find some technology about WYChart or any other topics.