Skip to content
Ahmed Ghalab edited this page Feb 12, 2015 · 7 revisions

Nuwe Score Charts Framework

  
It is informative and interactive charts library for iOS (_**NUDialChart**_, **_NUBarChart_**), very easy to import with dataSource & data delegate design pattern.

Full customization for changing the data input size or bar colors or font colors could be applied, and more.

Requirements

iOS 7.0+ & It is compatible with ARC projects. You will need LLVM 3.0 or later in order to build.

Developer Integration Guide

Using CocoaPods Installation:

# For latest release published via cocoapods, Add the following line to your **Podfile**
pod 'NuweScoreCharts'

Yeah, It is just that simple ;)

Using ‘.framework’ downloaded file

  1. Import The NuweScoreCharts Framework



  2. Make sure to properly “copy items if needed”



  3. Adding prerequisites libraries (No extra prerequistis except UIKit- added by default).

  4. Other Linker flags add “–ObjC”

    This flag would be only required (if and only if) you will intend to change any UIView’s type to NUDialChart or NUBarChart directly from inside the storyboard, like sample demo Attached!

You could ignore this step in case you will create your charts from the code and adding them as a sub views to your main view. You can create any chart directly from code like:
[[NUDialChart alloc] initWithFrame:self.DialChartContainerView.bounds];

Code Integration & Setup

Initialization

Using Storyboard:

  1. Add a UIView element to your storyboard.
  2. Set its Custom Class to

- NUDialChart - This will generate the dynamically sized circular dial chart you see in the Nuwe & Nutribu Apps.
- NUBarChart - This will generate the historical bar chart you see in the Nuwe & Nutribu apps.

Using Code:

NUDialChart* dialChart = [[NUDialChart alloc] initWithFrame:self.DialChartContainerView.bounds];
[self.DialChartContainerView addSubview:dialChart];

Setup the container view controller (Data-Source & Delegate)

Import Framework

#import <NuweScoreCharts/NuweScoreCharts.h>

View controller's header file (.h)

Container view controller must follow NUDialChartDataSource, NUDialChartDelegate incase of adding NUDialChart & follow NUBarChartDelegate, NUBarChartDataSource in case of adding NUBarChart

Chart Initialization

// Initialization for Dial chart..
[dialChartView setupWithCount:3 TotalValue:100];
[dialChartView setChartDataSource:self];
[dialChartView setChartDelegate:self];

// Initialization for Bar chart..
[barChartView setupWithFrame:barChartView.frame];
[barChartView setBarDataSource:self];
[barChartView setBarDelegate:self];

DataSource & Delegates protocol

The view controller must override the protocol methods in order to load the data, colors ... etc & handle touch events if required.

For Dial Chart:
@protocol NUDialChartDataSource <NSObject>

/* Get current value of specific dial by index
@param : Index of specific dial
@return : Current value of the dial
*/
- (NSNumber*) dialChart:(NUDialChart*) dialChart valueOfCircleAtIndex:(int) _index;

/* Get a color of specific dial by index
@param : Index of specific dial
@return : Color of the dial
*/
- (UIColor* ) dialChart:(NUDialChart*) dialChart colorOfCircleAtIndex:(int) _index;

/* Get a text of specific dial by index
@param : Index of specific dial
@return : Text of the dial
*/
- (NSString* ) dialChart:(NUDialChart*) dialChart textOfCircleAtIndex:(int) _index;

/* Get a text color of specific dial by index
@param : Index of specific dial
@return : Text of the dial
*/ 
- (UIColor* ) dialChart:(NUDialChart*) dialChart textColorOfCircleAtIndex:(int) _index;

/* Show center label and text
@param : No params
@return : Is show center label?
*/
- (BOOL) isShowCenterLabelInDial:(NUDialChart*) dialChart;

/* Show only border of dial
@param : Index of specific dial
@return : Is only frame of dial?
*/
- (BOOL) dialChart:(NUDialChart*) dialChart defaultCircleAtIndex:(int) _index;

/* Get current nuscore
@param : No params
@return : NU score
*/
- (int) nuscoreInDialChart:(NUDialChart*) dialChart;

/* Get a color of center label's text color
@param : Index of specific dial
@return : Color of the dial
*/
- (UIColor*) centerTextColorInDialChart:(NUDialChart*) dialChart;

/* Get a color of center label's background color
@param : Index of specific dial
@return : Color of the dial
*/
- (UIColor*) centerBackgroundColorInDialChart:(NUDialChart*) dialChart;

@end
@protocol NUDialChartDelegate <NSObject>
- (void) touchNuDialChart:(NUDialChart*) chart;
@end
For Bar Chart:
@protocol NUBarChartDataSource <NSObject>

/* Get a array for Y values
@param : NUBarChart
@return : NSArray of values
*/
- (NSArray *) valuesOfYWithBarChart:(NUBarChart*) barChart;

/* Get a array of bar colors - It's only active color.
@param : NUBarChart
@return : NSArray of values
*/
- (NSArray *) barColorsWithBarChart:(NUBarChart*) barChart;

/* Get max value of Y values
@param : NUBarChart
@return : max value
*/
- (int) maxYValueWithBarChart:(NUBarChart*) barChart;

@end
@protocol NUBarChartDelegate <NSObject>
- (void) touchNUBar:(NUBarChart*) barChart index:(int) _index;
@end

Charts Drawing/Redrawing

You can anytime update the charts data shown by redraw the chart, and you have to call this over a given chart object at at least once to draw it and being shown.

// Refresh or redraw for Dial chart.. 
[dialChartView reloadDialWithAnimation:YES];

// Refresh or redraw for Bar chart.. 
[barChartView reloadDialWithAnimation:YES];

Copyright

For any question or issue reporting, Please contact Steve Schofield (steve@nuwe.co)
Copyrights (c) 2012-2015 Nu Wellness Ltd