Compare commits
16 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 78390657d7 | |||
| 87a5de93af | |||
| edfca9b780 | |||
| 14c7aa7c98 | |||
| b928cd1849 | |||
| 2d6c6e291d | |||
| 5addeeae83 | |||
| ec14cc002e | |||
| e3174efa9e | |||
| 4a1380668e | |||
| 3752b7d598 | |||
| e1d10ffb7e | |||
| f2e5641d58 | |||
| b0c68377a3 | |||
| d3cb39b566 | |||
| 99f727c0d6 |
+30
-2
@@ -1,8 +1,36 @@
|
||||
# Change Log
|
||||
|
||||
## [Unreleased](https://github.com/Jawbone/JBChartView/tree/HEAD)
|
||||
## [v2.8.17](https://github.com/Jawbone/JBChartView/tree/v2.8.17) (2015-11-21)
|
||||
[Full Changelog](https://github.com/Jawbone/JBChartView/compare/v2.8.16...v2.8.17)
|
||||
|
||||
[Full Changelog](https://github.com/Jawbone/JBChartView/compare/v2.8.14...HEAD)
|
||||
**Implemented enhancements:**
|
||||
|
||||
- Disabling/Enabling certain functionality: line chart selection and x-axis values [\#185](https://github.com/Jawbone/JBChartView/issues/185)
|
||||
- Add ability to set selection permanently. [\#153](https://github.com/Jawbone/JBChartView/issues/153)
|
||||
- The line fill color doesn't match the bottom of the drawn line [\#146](https://github.com/Jawbone/JBChartView/issues/146)
|
||||
|
||||
**Fixed bugs:**
|
||||
|
||||
- Bug when quickly tapping a line chart in two different places [\#159](https://github.com/Jawbone/JBChartView/issues/159)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- Show dot only on vertical line selection [\#190](https://github.com/Jawbone/JBChartView/issues/190)
|
||||
- Needs to support negative values [\#189](https://github.com/Jawbone/JBChartView/issues/189)
|
||||
|
||||
## [v2.8.16](https://github.com/Jawbone/JBChartView/tree/v2.8.16) (2015-09-18)
|
||||
[Full Changelog](https://github.com/Jawbone/JBChartView/compare/v2.8.15...v2.8.16)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- Partially filled bar [\#186](https://github.com/Jawbone/JBChartView/issues/186)
|
||||
|
||||
**Merged pull requests:**
|
||||
|
||||
- Delegate call to ignore touches on selected lines [\#188](https://github.com/Jawbone/JBChartView/pull/188) ([andrewloyola](https://github.com/andrewloyola))
|
||||
|
||||
## [v2.8.15](https://github.com/Jawbone/JBChartView/tree/v2.8.15) (2015-08-12)
|
||||
[Full Changelog](https://github.com/Jawbone/JBChartView/compare/v2.8.14...v2.8.15)
|
||||
|
||||
**Implemented enhancements:**
|
||||
|
||||
|
||||
@@ -561,7 +561,7 @@ static UIColor *kJBBarChartViewDefaultBarColor = nil;
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
UITouch *touch = [touches anyObject];
|
||||
CGPoint touchPoint = [touch locationInView:self];
|
||||
UIView *barView = [self barViewForForPoint:touchPoint];
|
||||
@@ -624,6 +624,7 @@ static UIColor *kJBBarChartViewDefaultBarColor = nil;
|
||||
|
||||
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
|
||||
{
|
||||
[self setVerticalSelectionViewVisible:NO animated:NO];
|
||||
[self touchesBeganOrMovedWithTouches:touches];
|
||||
}
|
||||
|
||||
|
||||
@@ -75,6 +75,19 @@ typedef NS_ENUM(NSInteger, JBLineChartViewLineStyle){
|
||||
*/
|
||||
- (BOOL)lineChartView:(JBLineChartView *)lineChartView smoothLineAtLineIndex:(NSUInteger)lineIndex;
|
||||
|
||||
/**
|
||||
* Returns the opacity value to be used for dimming the line & fill during selection events.
|
||||
* This value is applied to the line or fill's opacity anytime it's not selected (but another line is).
|
||||
*
|
||||
* Default: 0.2.
|
||||
*
|
||||
* @param lineChartView The line chart object requesting this information.
|
||||
* @param lineIndex An index number identifying a line in the chart.
|
||||
*
|
||||
* @return A value between 0.0 and 1.0 (will be clamped accordingly).
|
||||
*/
|
||||
- (CGFloat)lineChartView:(JBLineChartView *)lineChartView dimmedSelectionOpacityAtLineIndex:(NSUInteger)lineIndex;
|
||||
|
||||
/**
|
||||
* Returns a (custom) UIView instance representing a dot (x,y point) within the chart.
|
||||
* For this value to apply, showsDotsForLineAtLineIndex: must return YES for the line at lineIndex.
|
||||
@@ -132,8 +145,8 @@ typedef NS_ENUM(NSInteger, JBLineChartViewLineStyle){
|
||||
* Occurs whenever there is a touch gesture on the chart (chart must be expanded).
|
||||
* The horizontal index is the closest index to the touch point & is clamped to it's max/min value if it moves outside of the view's bounds.
|
||||
* The lineIndex remains constant until the line is deselected and will be highlighted using the (optional) selectionColorForLineAtLineIndex: protocol.
|
||||
* Futhermore, all other lines that aren't selected will be dimmed to 20%% opacity throughout the duration of the touch/move. Any dotted line that isn't the
|
||||
* primary selection will have it's dots dimmed to hidden (to avoid transparency issues).
|
||||
* Futhermore, all other lines that aren't selected will be dimmed to 20% opacity (default) throughout the duration of the touch/move.
|
||||
* Any dotted line that isn't the primary selection will have it's dots dimmed to hidden (to avoid transparency issues).
|
||||
*
|
||||
* @param lineChartView A line chart object informing the delegate about the new selection.
|
||||
* @param lineIndex An index number identifying the closest line in the chart to the current touch
|
||||
|
||||
@@ -113,6 +113,7 @@ static UIColor *kJBLineChartViewDefaultDotSelectionColor = nil;
|
||||
- (CGFloat)paddingForLineChartLinesView:(JBLineChartLinesView *)lineChartLinesView;
|
||||
- (JBLineChartViewLineStyle)lineChartLinesView:(JBLineChartLinesView *)lineChartLinesView lineStyleForLineAtLineIndex:(NSUInteger)lineIndex;
|
||||
- (BOOL)lineChartLinesView:(JBLineChartLinesView *)lineChartLinesView smoothLineAtLineIndex:(NSUInteger)lineIndex;
|
||||
- (CGFloat)lineChartLinesView:(JBLineChartLinesView *)lineChartLinesView dimmedSelectionOpacityAtLineIndex:(NSUInteger)lineIndex;
|
||||
|
||||
@end
|
||||
|
||||
@@ -638,6 +639,15 @@ static UIColor *kJBLineChartViewDefaultDotSelectionColor = nil;
|
||||
return NO;
|
||||
}
|
||||
|
||||
- (CGFloat)lineChartLinesView:(JBLineChartLinesView *)lineChartLinesView dimmedSelectionOpacityAtLineIndex:(NSUInteger)lineIndex
|
||||
{
|
||||
if ([self.dataSource respondsToSelector:@selector(lineChartView:dimmedSelectionOpacityAtLineIndex:)])
|
||||
{
|
||||
return [self.dataSource lineChartView:self dimmedSelectionOpacityAtLineIndex:lineIndex];
|
||||
}
|
||||
return kJBLineChartLinesViewDefaultDimmedOpacity;
|
||||
}
|
||||
|
||||
#pragma mark - JBLineChartDotsViewDelegate
|
||||
|
||||
- (NSArray *)chartDataForLineChartDotsView:(JBLineChartDotsView*)lineChartDotsView
|
||||
@@ -999,7 +1009,7 @@ static UIColor *kJBLineChartViewDefaultDotSelectionColor = nil;
|
||||
{
|
||||
return; // no touch for no data or collapsed
|
||||
}
|
||||
|
||||
|
||||
UITouch *touch = [touches anyObject];
|
||||
CGPoint touchPoint = [self clampPoint:[touch locationInView:self.linesView] toBounds:self.linesView.bounds padding:[self padding]];
|
||||
|
||||
@@ -1028,7 +1038,6 @@ static UIColor *kJBLineChartViewDefaultDotSelectionColor = nil;
|
||||
self.verticalSelectionView.bgColor = verticalSelectionColor;
|
||||
}
|
||||
|
||||
|
||||
CGFloat xOffset = fmin(self.bounds.size.width - self.verticalSelectionView.frame.size.width, fmax(0, touchPoint.x - (ceil(self.verticalSelectionView.frame.size.width * 0.5))));
|
||||
CGFloat yOffset = self.headerView.frame.size.height + self.headerPadding;
|
||||
|
||||
@@ -1076,6 +1085,7 @@ static UIColor *kJBLineChartViewDefaultDotSelectionColor = nil;
|
||||
[self.linesView setSelectedLineIndex:[self lineIndexForPoint:touchPoint] animated:YES];
|
||||
[self.dotsView setSelectedLineIndex:[self lineIndexForPoint:touchPoint] animated:YES];
|
||||
}
|
||||
[self setVerticalSelectionViewVisible:NO animated:NO];
|
||||
[self touchesBeganOrMovedWithTouches:touches];
|
||||
}
|
||||
|
||||
@@ -1233,7 +1243,10 @@ static UIColor *kJBLineChartViewDefaultDotSelectionColor = nil;
|
||||
BOOL visiblePointFound = NO;
|
||||
NSArray *sortedLineData = [lineData sortedArrayUsingSelector:@selector(compare:)];
|
||||
CGFloat firstXPosition = 0.0f;
|
||||
CGFloat lastXPosition = 0.0f;
|
||||
CGFloat firstYPosition = 0.0f;
|
||||
CGFloat lastXPosition = 0.0f;
|
||||
CGFloat lastYPosition = 0.0f;
|
||||
|
||||
for (NSUInteger index = 0; index < [sortedLineData count]; index++)
|
||||
{
|
||||
JBLineChartPoint *lineChartPoint = [sortedLineData objectAtIndex:index];
|
||||
@@ -1245,6 +1258,7 @@ static UIColor *kJBLineChartViewDefaultDotSelectionColor = nil;
|
||||
{
|
||||
[path moveToPoint:CGPointMake(lineChartPoint.position.x, fmin(self.bounds.size.height - padding, fmax(padding, lineChartPoint.position.y)))];
|
||||
firstXPosition = lineChartPoint.position.x;
|
||||
firstYPosition = lineChartPoint.position.y;
|
||||
visiblePointFound = YES;
|
||||
}
|
||||
else
|
||||
@@ -1278,6 +1292,7 @@ static UIColor *kJBLineChartViewDefaultDotSelectionColor = nil;
|
||||
}
|
||||
|
||||
lastXPosition = lineChartPoint.position.x;
|
||||
lastYPosition = lineChartPoint.position.y;
|
||||
previousSlope = currentSlope;
|
||||
}
|
||||
previousLineChartPoint = lineChartPoint;
|
||||
@@ -1332,8 +1347,11 @@ static UIColor *kJBLineChartViewDefaultDotSelectionColor = nil;
|
||||
|
||||
if(visiblePointFound)
|
||||
{
|
||||
[fillPath addLineToPoint:CGPointMake(lastXPosition, self.bounds.size.height - padding)];
|
||||
[fillPath addLineToPoint:CGPointMake(firstXPosition, self.bounds.size.height - padding)];
|
||||
[fillPath addLineToPoint:CGPointMake(lastXPosition + ceil(padding * 0.5), lastYPosition)];
|
||||
[fillPath addLineToPoint:CGPointMake(lastXPosition + ceil(padding * 0.5), self.bounds.size.height)];
|
||||
|
||||
[fillPath addLineToPoint:CGPointMake(firstXPosition - ceil(padding * 0.5), self.bounds.size.height)];
|
||||
[fillPath addLineToPoint:CGPointMake(firstXPosition - ceil(padding * 0.5), firstYPosition)];
|
||||
}
|
||||
|
||||
shapeFillLayer.path = fillPath.CGPath;
|
||||
@@ -1379,7 +1397,9 @@ static UIColor *kJBLineChartViewDefaultDotSelectionColor = nil;
|
||||
{
|
||||
NSAssert([self.delegate respondsToSelector:@selector(lineChartLinesView:colorForLineAtLineIndex:)], @"JBLineChartLinesView // delegate must implement - (UIColor *)lineChartLinesView:(JBLineChartLinesView *)lineChartLinesView colorForLineAtLineIndex:(NSUInteger)lineIndex");
|
||||
((JBLineLayer *)layer).strokeColor = [self.delegate lineChartLinesView:self colorForLineAtLineIndex:((JBLineLayer *)layer).tag].CGColor;
|
||||
((JBLineLayer *)layer).opacity = (weakSelf.selectedLineIndex == kJBLineChartLinesViewUnselectedLineIndex) ? 1.0f : kJBLineChartLinesViewDefaultDimmedOpacity;
|
||||
|
||||
NSAssert([self.delegate respondsToSelector:@selector(lineChartLinesView:dimmedSelectionOpacityAtLineIndex:)], @"JBLineChartLinesView // delegate must implement - (CGFloat)lineChartLinesView:(JBLineChartLinesView *)lineChartLinesView dimmedSelectionOpacityAtLineIndex:(NSUInteger)lineIndex");
|
||||
((JBLineLayer *)layer).opacity = (weakSelf.selectedLineIndex == kJBLineChartLinesViewUnselectedLineIndex) ? 1.0f : [self.delegate lineChartLinesView:self dimmedSelectionOpacityAtLineIndex:((JBLineLayer *)layer).tag];
|
||||
}
|
||||
}
|
||||
else if ([layer isKindOfClass:[JBFillLayer class]])
|
||||
@@ -1394,7 +1414,9 @@ static UIColor *kJBLineChartViewDefaultDotSelectionColor = nil;
|
||||
{
|
||||
NSAssert([self.delegate respondsToSelector:@selector(lineChartLinesView:fillColorForLineAtLineIndex:)], @"JBLineChartLinesView // delegate must implement - (UIColor *)lineChartLinesView:(JBLineChartLinesView *)lineChartLinesView fillColorForLineAtLineIndex:(NSUInteger)lineIndex");
|
||||
((JBFillLayer *)layer).fillColor = [self.delegate lineChartLinesView:self fillColorForLineAtLineIndex:((JBLineLayer *)layer).tag].CGColor;
|
||||
((JBFillLayer *)layer).opacity = (weakSelf.selectedLineIndex == kJBLineChartLinesViewUnselectedLineIndex) ? 1.0f : kJBLineChartLinesViewDefaultDimmedOpacity;
|
||||
|
||||
NSAssert([self.delegate respondsToSelector:@selector(lineChartLinesView:dimmedSelectionOpacityAtLineIndex:)], @"JBLineChartLinesView // delegate must implement - (CGFloat)lineChartLinesView:(JBLineChartLinesView *)lineChartLinesView dimmedSelectionOpacityAtLineIndex:(NSUInteger)lineIndex");
|
||||
((JBFillLayer *)layer).opacity = (weakSelf.selectedLineIndex == kJBLineChartLinesViewUnselectedLineIndex) ? 1.0f : [self.delegate lineChartLinesView:self dimmedSelectionOpacityAtLineIndex:((JBLineLayer *)layer).tag];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,156 @@
|
||||
## 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 <i>JBChartView</i> subclass supports the use of headers and footers (similiar to that of <i>UITableView</i>):
|
||||
|
||||
self.barChartView.footerView = ...; // UIView
|
||||
self.lineChartView.headerView = ...; // UIView
|
||||
|
||||
Lastly, any JBChartView subclass can be collapsed or expanded programmatically via the <i>state</i> 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
|
||||
|
||||
A bar chart can be inverted such that it's orientation is top->down (including the selection view) by setting the following property:
|
||||
|
||||
@property (nonatomic, assign, getter=isInverted) BOOL inverted;
|
||||
|
||||
By default, a chart's bars will be black and flat. They can be customized by supplying a UIView subclass through the <i>optional</i> protocol:
|
||||
|
||||
- (UIView *)barChartView:(JBBarChartView *)barChartView barViewAtIndex:(NSUInteger)index
|
||||
{
|
||||
return ...; // color of line in chart
|
||||
}
|
||||
|
||||
If you don't require a custom UIView, simply supply a color for the bar instead:
|
||||
|
||||
- (UIColor *)barChartView:(JBBarChartView *)barChartView colorForBarViewAtIndex:(NSUInteger)index;
|
||||
|
||||
Furthermore, the color of the selection bar (on touch events) can be customized via the <i>optional</i> protocol:
|
||||
|
||||
- (UIColor *)barSelectionColorForBarChartView:(JBBarChartView *)barChartView
|
||||
{
|
||||
return ...; // color of selection view
|
||||
}
|
||||
|
||||
Lastly, a bar chart's selection events are delegated back via:
|
||||
|
||||
- (void)barChartView:(JBBarChartView *)barChartView didSelectBarAtIndex:(NSUInteger)index touchPoint:(CGPoint)touchPoint
|
||||
{
|
||||
// Update view
|
||||
}
|
||||
|
||||
- (void)didDeselectBarChartView:(JBBarChartView *)barChartView
|
||||
{
|
||||
// Update view
|
||||
}
|
||||
|
||||
The <b>touchPoint</b> is especially important as it allows you to add custom elements to your chart during selection events. Refer to the demo project (<b>JBarChartViewController</b>) to see how a tooltip can be used to display additional information during selection events.
|
||||
|
||||
#### JBLineChartView
|
||||
|
||||
The color, width and style of each line in the chart can be customized via the <i>optional</i> protocol:
|
||||
|
||||
- (UIColor *)lineChartView:(JBLineChartView *)lineChartView colorForLineAtLineIndex:(NSUInteger)lineIndex
|
||||
{
|
||||
return ...; // color of line in chart
|
||||
}
|
||||
|
||||
- (UIColor *)lineChartView:(JBLineChartView *)lineChartView fillColorForLineAtLineIndex:(NSUInteger)lineIndex
|
||||
{
|
||||
return ...; // color of area under line in chart
|
||||
}
|
||||
|
||||
- (CGFloat)lineChartView:(JBLineChartView *)lineChartView widthForLineAtLineIndex:(NSUInteger)lineIndex
|
||||
{
|
||||
return ...; // width of line in chart
|
||||
}
|
||||
|
||||
- (JBLineChartViewLineStyle)lineChartView:(JBLineChartView *)lineChartView lineStyleForLineAtLineIndex:(NSUInteger)lineIndex
|
||||
{
|
||||
return ...; // style of line in chart
|
||||
}
|
||||
|
||||
Furthermore, the color and width of the selection view along with the color of the selected line can be customized via the <i>optional</i> protocols:
|
||||
|
||||
- (UIColor *)lineChartView:(JBLineChartView *)lineChartView verticalSelectionColorForLineAtLineIndex:(NSUInteger)lineIndex
|
||||
{
|
||||
return ...; // color of selection view
|
||||
}
|
||||
|
||||
- (CGFloat)verticalSelectionWidthForLineChartView:(JBLineChartView *)lineChartView
|
||||
{
|
||||
return ...; // width of selection view
|
||||
}
|
||||
|
||||
- (UIColor *)lineChartView:(JBLineChartView *)lineChartView selectionColorForLineAtLineIndex:(NSUInteger)lineIndex
|
||||
{
|
||||
return ...; // color of selected line
|
||||
}
|
||||
|
||||
- (UIColor *)lineChartView:(JBLineChartView *)lineChartView selectionFillColorForLineAtLineIndex:(NSUInteger)lineIndex
|
||||
{
|
||||
return ...; // color of area under selected line
|
||||
}
|
||||
|
||||
By default, each line will not show dots for each point. To enable this on a per-line basis:
|
||||
|
||||
- (BOOL)lineChartView:(JBLineChartView *)lineChartView showsDotsForLineAtLineIndex:(NSUInteger)lineIndex;
|
||||
|
||||
To the radius of each dot (default is 6x the line width, or 3x the diameter), implement:
|
||||
|
||||
- (CGFloat)lineChartView:(JBLineChartView *)lineChartView dotRadiusForDotAtHorizontalIndex:(NSUInteger)horizontalIndex atLineIndex:(NSUInteger)lineIndex;
|
||||
|
||||
To customize the color of each dot during selection and non-selection events (default is white and black respectively), implement:
|
||||
|
||||
- (UIColor *)lineChartView:(JBLineChartView *)lineChartView colorForDotAtHorizontalIndex:(NSUInteger)horizontalIndex atLineIndex:(NSUInteger)lineIndex;
|
||||
|
||||
- (UIColor *)lineChartView:(JBLineChartView *)lineChartView selectionColorForDotAtHorizontalIndex:(NSUInteger)horizontalIndex atLineIndex:(NSUInteger)lineIndex;
|
||||
|
||||
Alternatively, you can supply your own UIView instead of using the default impelmentation:
|
||||
|
||||
- (UIView *)lineChartView:(JBLineChartView *)lineChartView dotViewAtHorizontalIndex:(NSUInteger)horizontalIndex atLineIndex:(NSUInteger)lineIndex;
|
||||
|
||||
Custom dot views are automatically shown when selected unless the following is implemented:
|
||||
|
||||
- (BOOL)lineChartView:(JBLineChartView *)lineChartView shouldHideDotViewOnSelectionAtHorizontalIndex:(NSUInteger)horizontalIndex atLineIndex:(NSUInteger)lineIndex;
|
||||
|
||||
As well, by default, each line will have squared off end caps and connection points. To enable rounded connections and end caps:
|
||||
|
||||
- (BOOL)lineChartView:(JBLineChartView *)lineChartView smoothLineAtLineIndex:(NSUInteger)lineIndex;
|
||||
|
||||
Furthermore, a line chart's selection events are delegated back via:
|
||||
|
||||
- (void)lineChartView:(JBLineChartView *)lineChartView didSelectLineAtIndex:(NSUInteger)lineIndex horizontalIndex:(NSUInteger)horizontalIndex touchPoint:(CGPoint)touchPoint
|
||||
{
|
||||
// Update view
|
||||
}
|
||||
|
||||
- (void)didDeselectLineInLineChartView:(JBLineChartView *)lineChartView
|
||||
{
|
||||
// Update view
|
||||
}
|
||||
|
||||
Upon selection, all other lines (+ fills) will be dimmed to 20% opacity (default). To change this value, implement:
|
||||
|
||||
- (CGFloat)lineChartView:(JBLineChartView *)lineChartView dimmedSelectionOpacityAtLineIndex:(NSUInteger)lineIndex
|
||||
{
|
||||
// Return new opacity (0.0 to hide completely, and 1.0 to have no effect)
|
||||
}
|
||||
|
||||
If you don't want a line to be selectable:
|
||||
|
||||
- (BOOL)lineChartView:(JBLineChartView *)lineChartView shouldIgnoreSelectionAtIndex:(NSUInteger)lineIndex
|
||||
{
|
||||
return NO; // Check line index
|
||||
}
|
||||
|
||||
The <b>touchPoint</b> is especially important as it allows you to add custom elements to your chart during selection events. Refer to the demo project (<b>JBLineChartViewController</b>) to see how a tooltip can be used to display additional information during selection events.
|
||||
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
Pod::Spec.new do |s|
|
||||
s.name = "JBChartView"
|
||||
s.version = "2.8.15"
|
||||
s.version = "2.8.16"
|
||||
s.summary = "Jawbone's iOS-based charting library for both line and bar graphs."
|
||||
s.homepage = "https://github.com/Jawbone/JBChartView"
|
||||
|
||||
@@ -10,7 +10,7 @@ Pod::Spec.new do |s|
|
||||
s.author = { "Terry Worona" => "tworona@jawbone.com" }
|
||||
s.source = {
|
||||
:git => "https://github.com/Jawbone/JBChartView.git",
|
||||
:tag => "v2.8.15"
|
||||
:tag => "v2.8.16"
|
||||
}
|
||||
|
||||
s.platform = :ios, '6.0'
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
objects = {
|
||||
|
||||
/* Begin PBXBuildFile section */
|
||||
566C73A61C026858000EC785 /* Default-568h@2x.png in Resources */ = {isa = PBXBuildFile; fileRef = 566C73A51C026858000EC785 /* Default-568h@2x.png */; };
|
||||
94BDFC3419F933B2007492F6 /* JBLineChartMissingPointsViewController.m in Sources */ = {isa = PBXBuildFile; fileRef = 94BDFC3319F933B2007492F6 /* JBLineChartMissingPointsViewController.m */; };
|
||||
9B0725211829822A0052109B /* JBChartListViewController.m in Sources */ = {isa = PBXBuildFile; fileRef = 9B0725201829822A0052109B /* JBChartListViewController.m */; };
|
||||
9B2E530518218CF20079B9D2 /* Foundation.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 9B2E530418218CF20079B9D2 /* Foundation.framework */; };
|
||||
@@ -46,6 +47,7 @@
|
||||
/* End PBXBuildFile section */
|
||||
|
||||
/* Begin PBXFileReference section */
|
||||
566C73A51C026858000EC785 /* Default-568h@2x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "Default-568h@2x.png"; sourceTree = "<group>"; };
|
||||
94BDFC3219F933B2007492F6 /* JBLineChartMissingPointsViewController.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = JBLineChartMissingPointsViewController.h; sourceTree = "<group>"; };
|
||||
94BDFC3319F933B2007492F6 /* JBLineChartMissingPointsViewController.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = JBLineChartMissingPointsViewController.m; sourceTree = "<group>"; };
|
||||
9B07251F1829822A0052109B /* JBChartListViewController.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = JBChartListViewController.h; sourceTree = "<group>"; };
|
||||
@@ -233,6 +235,7 @@
|
||||
9B603D44182C7002000A76D0 /* Images */ = {
|
||||
isa = PBXGroup;
|
||||
children = (
|
||||
566C73A51C026858000EC785 /* Default-568h@2x.png */,
|
||||
9B7967ED198317540003A2B0 /* icon-area-chart.png */,
|
||||
9B7967EE198317540003A2B0 /* icon-area-chart@2x.png */,
|
||||
9B698F07182D720E003C135F /* icon-arrow.png */,
|
||||
@@ -352,7 +355,7 @@
|
||||
9B2E52F918218CF20079B9D2 /* Project object */ = {
|
||||
isa = PBXProject;
|
||||
attributes = {
|
||||
LastUpgradeCheck = 0510;
|
||||
LastUpgradeCheck = 0710;
|
||||
ORGANIZATIONNAME = Jawbone;
|
||||
};
|
||||
buildConfigurationList = 9B2E52FC18218CF20079B9D2 /* Build configuration list for PBXProject "JBChartViewDemo" */;
|
||||
@@ -387,6 +390,7 @@
|
||||
9B7967EF198317540003A2B0 /* icon-area-chart.png in Resources */,
|
||||
9B603D47182C7002000A76D0 /* icon-jawbone-logo.png in Resources */,
|
||||
9B603D48182C7002000A76D0 /* icon-jawbone-logo@2x.png in Resources */,
|
||||
566C73A61C026858000EC785 /* Default-568h@2x.png in Resources */,
|
||||
9B7967F0198317540003A2B0 /* icon-area-chart@2x.png in Resources */,
|
||||
9B698F19182D7DAE003C135F /* icon-line-chart@2x.png in Resources */,
|
||||
9B698F0A182D720E003C135F /* icon-arrow@2x.png in Resources */,
|
||||
@@ -456,6 +460,7 @@
|
||||
CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
|
||||
"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
|
||||
COPY_PHASE_STRIP = NO;
|
||||
ENABLE_TESTABILITY = YES;
|
||||
GCC_C_LANGUAGE_STANDARD = gnu99;
|
||||
GCC_DYNAMIC_NO_PIC = NO;
|
||||
GCC_OPTIMIZATION_LEVEL = 0;
|
||||
@@ -519,6 +524,7 @@
|
||||
GCC_PREFIX_HEADER = "JBChartViewDemo/JBChartViewDemo-Prefix.pch";
|
||||
INFOPLIST_FILE = "JBChartViewDemo/JBChartViewDemo-Info.plist";
|
||||
IPHONEOS_DEPLOYMENT_TARGET = 6.0;
|
||||
PRODUCT_BUNDLE_IDENTIFIER = "com.jawbone.${PRODUCT_NAME:rfc1034identifier}";
|
||||
PRODUCT_NAME = "$(TARGET_NAME)";
|
||||
WRAPPER_EXTENSION = app;
|
||||
};
|
||||
@@ -533,6 +539,7 @@
|
||||
GCC_PREFIX_HEADER = "JBChartViewDemo/JBChartViewDemo-Prefix.pch";
|
||||
INFOPLIST_FILE = "JBChartViewDemo/JBChartViewDemo-Info.plist";
|
||||
IPHONEOS_DEPLOYMENT_TARGET = 6.0;
|
||||
PRODUCT_BUNDLE_IDENTIFIER = "com.jawbone.${PRODUCT_NAME:rfc1034identifier}";
|
||||
PRODUCT_NAME = "$(TARGET_NAME)";
|
||||
WRAPPER_EXTENSION = app;
|
||||
};
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
#import "JBChartTooltipTipView.h"
|
||||
|
||||
// Numerics
|
||||
CGFloat const kJBBaseChartViewControllerAnimationDuration = 0.25f;
|
||||
CGFloat const kJBBaseChartViewControllerAnimationDuration = 0.1f;
|
||||
|
||||
@interface JBBaseChartViewController ()
|
||||
|
||||
@@ -55,10 +55,11 @@ CGFloat const kJBBaseChartViewControllerAnimationDuration = 0.25f;
|
||||
[self.view bringSubviewToFront:self.tooltipTipView];
|
||||
|
||||
dispatch_block_t adjustTooltipPosition = ^{
|
||||
|
||||
CGPoint originalTouchPoint = [self.view convertPoint:touchPoint fromView:chartView];
|
||||
CGPoint convertedTouchPoint = originalTouchPoint; // modified
|
||||
JBChartView *chartView = [self chartView];
|
||||
if (chartView)
|
||||
if (chartView && !CGPointEqualToPoint(touchPoint, CGPointZero))
|
||||
{
|
||||
CGFloat minChartX = (chartView.frame.origin.x + ceil(self.tooltipView.frame.size.width * 0.5));
|
||||
if (convertedTouchPoint.x < minChartX)
|
||||
@@ -70,6 +71,7 @@ CGFloat const kJBBaseChartViewControllerAnimationDuration = 0.25f;
|
||||
{
|
||||
convertedTouchPoint.x = maxChartX;
|
||||
}
|
||||
|
||||
self.tooltipView.frame = CGRectMake(convertedTouchPoint.x - ceil(self.tooltipView.frame.size.width * 0.5), CGRectGetMaxY(chartView.headerView.frame), self.tooltipView.frame.size.width, self.tooltipView.frame.size.height);
|
||||
|
||||
CGFloat minTipX = (chartView.frame.origin.x + self.tooltipTipView.frame.size.width);
|
||||
@@ -83,33 +85,34 @@ CGFloat const kJBBaseChartViewControllerAnimationDuration = 0.25f;
|
||||
originalTouchPoint.x = maxTipX;
|
||||
}
|
||||
self.tooltipTipView.frame = CGRectMake(originalTouchPoint.x - ceil(self.tooltipTipView.frame.size.width * 0.5), CGRectGetMaxY(self.tooltipView.frame), self.tooltipTipView.frame.size.width, self.tooltipTipView.frame.size.height);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
dispatch_block_t adjustTooltipVisibility = ^{
|
||||
self.tooltipView.alpha = _tooltipVisible ? 1.0 : 0.0;
|
||||
self.tooltipTipView.alpha = _tooltipVisible ? 1.0 : 0.0;
|
||||
};
|
||||
|
||||
if (tooltipVisible)
|
||||
{
|
||||
adjustTooltipPosition();
|
||||
}
|
||||
|
||||
|
||||
if (animated)
|
||||
{
|
||||
[UIView animateWithDuration:kJBBaseChartViewControllerAnimationDuration animations:^{
|
||||
adjustTooltipVisibility();
|
||||
} completion:^(BOOL finished) {
|
||||
if (!tooltipVisible)
|
||||
{
|
||||
adjustTooltipPosition();
|
||||
}
|
||||
}];
|
||||
if (tooltipVisible)
|
||||
{
|
||||
adjustTooltipPosition();
|
||||
}
|
||||
|
||||
[UIView animateWithDuration:kJBBaseChartViewControllerAnimationDuration delay:0.0 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
|
||||
adjustTooltipVisibility();
|
||||
} completion:^(BOOL finished) {
|
||||
if (!tooltipVisible)
|
||||
{
|
||||
adjustTooltipPosition();
|
||||
}
|
||||
}];
|
||||
}
|
||||
else
|
||||
{
|
||||
adjustTooltipVisibility();
|
||||
adjustTooltipPosition();
|
||||
adjustTooltipVisibility();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
return YES;
|
||||
}
|
||||
|
||||
- (NSUInteger)supportedInterfaceOrientations
|
||||
- (UIInterfaceOrientationMask)supportedInterfaceOrientations
|
||||
{
|
||||
return UIInterfaceOrientationMaskPortrait;
|
||||
}
|
||||
|
||||
@@ -29,6 +29,8 @@ CGFloat const kJBAreaChartViewControllerChartHeaderHeight = 75.0f;
|
||||
CGFloat const kJBAreaChartViewControllerChartHeaderPadding = 20.0f;
|
||||
CGFloat const kJBAreaChartViewControllerChartFooterHeight = 20.0f;
|
||||
CGFloat const kJBAreaChartViewControllerChartLineWidth = 2.0f;
|
||||
CGFloat const kJBAreaChartViewControllerChartSunLineDimmedOpacity = 1.0f;
|
||||
CGFloat const kJBAreaChartViewControllerChartMoonLineDimmedOpacity = 0.0f;
|
||||
NSInteger const kJBAreaChartViewControllerMaxNumChartPoints = 12;
|
||||
|
||||
// Strings
|
||||
@@ -198,6 +200,18 @@ NSString * const kJBAreaChartViewControllerNavButtonViewKey = @"view";
|
||||
return YES;
|
||||
}
|
||||
|
||||
- (CGFloat)lineChartView:(JBLineChartView *)lineChartView dimmedSelectionOpacityAtLineIndex:(NSUInteger)lineIndex
|
||||
{
|
||||
if (lineIndex == JBLineChartLineMoon)
|
||||
{
|
||||
return kJBAreaChartViewControllerChartMoonLineDimmedOpacity;
|
||||
}
|
||||
else
|
||||
{
|
||||
return kJBAreaChartViewControllerChartSunLineDimmedOpacity;
|
||||
}
|
||||
}
|
||||
|
||||
#pragma mark - JBLineChartViewDelegate
|
||||
|
||||
- (CGFloat)lineChartView:(JBLineChartView *)lineChartView verticalValueForHorizontalIndex:(NSUInteger)horizontalIndex atLineIndex:(NSUInteger)lineIndex
|
||||
|
||||
@@ -5,16 +5,31 @@
|
||||
"size" : "29x29",
|
||||
"scale" : "2x"
|
||||
},
|
||||
{
|
||||
"idiom" : "iphone",
|
||||
"size" : "29x29",
|
||||
"scale" : "3x"
|
||||
},
|
||||
{
|
||||
"idiom" : "iphone",
|
||||
"size" : "40x40",
|
||||
"scale" : "2x"
|
||||
},
|
||||
{
|
||||
"idiom" : "iphone",
|
||||
"size" : "40x40",
|
||||
"scale" : "3x"
|
||||
},
|
||||
{
|
||||
"idiom" : "iphone",
|
||||
"size" : "60x60",
|
||||
"scale" : "2x"
|
||||
},
|
||||
{
|
||||
"idiom" : "iphone",
|
||||
"size" : "60x60",
|
||||
"scale" : "3x"
|
||||
},
|
||||
{
|
||||
"idiom" : "ipad",
|
||||
"size" : "29x29",
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<key>CFBundleExecutable</key>
|
||||
<string>${EXECUTABLE_NAME}</string>
|
||||
<key>CFBundleIdentifier</key>
|
||||
<string>com.jawbone.${PRODUCT_NAME:rfc1034identifier}</string>
|
||||
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
|
||||
<key>CFBundleInfoDictionaryVersion</key>
|
||||
<string>6.0</string>
|
||||
<key>CFBundleName</key>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
@@ -153,152 +153,7 @@ Lastly, ensure you have set the *frame* of your lineChartView & call *reloadData
|
||||
|
||||
## 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 <i>JBChartView</i> subclass supports the use of headers and footers (similiar to that of <i>UITableView</i>):
|
||||
|
||||
self.barChartView.footerView = ...; // UIView
|
||||
self.lineChartView.headerView = ...; // UIView
|
||||
|
||||
Lastly, any JBChartView subclass can be collapsed or expanded programmatically via the <i>state</i> 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
|
||||
|
||||
A bar chart can be inverted such that it's orientation is top->down (including the selection view) by setting the following property:
|
||||
|
||||
@property (nonatomic, assign, getter=isInverted) BOOL inverted;
|
||||
|
||||
By default, a chart's bars will be black and flat. They can be customized by supplying a UIView subclass through the <i>optional</i> protocol:
|
||||
|
||||
- (UIView *)barChartView:(JBBarChartView *)barChartView barViewAtIndex:(NSUInteger)index
|
||||
{
|
||||
return ...; // color of line in chart
|
||||
}
|
||||
|
||||
If you don't require a custom UIView, simply supply a color for the bar instead:
|
||||
|
||||
- (UIColor *)barChartView:(JBBarChartView *)barChartView colorForBarViewAtIndex:(NSUInteger)index;
|
||||
|
||||
Furthermore, the color of the selection bar (on touch events) can be customized via the <i>optional</i> protocol:
|
||||
|
||||
- (UIColor *)barSelectionColorForBarChartView:(JBBarChartView *)barChartView
|
||||
{
|
||||
return ...; // color of selection view
|
||||
}
|
||||
|
||||
Lastly, a bar chart's selection events are delegated back via:
|
||||
|
||||
- (void)barChartView:(JBBarChartView *)barChartView didSelectBarAtIndex:(NSUInteger)index touchPoint:(CGPoint)touchPoint
|
||||
{
|
||||
// Update view
|
||||
}
|
||||
|
||||
- (void)didDeselectBarChartView:(JBBarChartView *)barChartView
|
||||
{
|
||||
// Update view
|
||||
}
|
||||
|
||||
The <b>touchPoint</b> is especially important as it allows you to add custom elements to your chart during selection events. Refer to the demo project (<b>JBarChartViewController</b>) to see how a tooltip can be used to display additional information during selection events.
|
||||
|
||||
#### JBLineChartView
|
||||
|
||||
The color, width and style of each line in the chart can be customized via the <i>optional</i> protocol:
|
||||
|
||||
- (UIColor *)lineChartView:(JBLineChartView *)lineChartView colorForLineAtLineIndex:(NSUInteger)lineIndex
|
||||
{
|
||||
return ...; // color of line in chart
|
||||
}
|
||||
|
||||
- (UIColor *)lineChartView:(JBLineChartView *)lineChartView fillColorForLineAtLineIndex:(NSUInteger)lineIndex
|
||||
{
|
||||
return ...; // color of area under line in chart
|
||||
}
|
||||
|
||||
- (CGFloat)lineChartView:(JBLineChartView *)lineChartView widthForLineAtLineIndex:(NSUInteger)lineIndex
|
||||
{
|
||||
return ...; // width of line in chart
|
||||
}
|
||||
|
||||
- (JBLineChartViewLineStyle)lineChartView:(JBLineChartView *)lineChartView lineStyleForLineAtLineIndex:(NSUInteger)lineIndex
|
||||
{
|
||||
return ...; // style of line in chart
|
||||
}
|
||||
|
||||
Furthermore, the color and width of the selection view along with the color of the selected line can be customized via the <i>optional</i> protocols:
|
||||
|
||||
- (UIColor *)lineChartView:(JBLineChartView *)lineChartView verticalSelectionColorForLineAtLineIndex:(NSUInteger)lineIndex
|
||||
{
|
||||
return ...; // color of selection view
|
||||
}
|
||||
|
||||
- (CGFloat)verticalSelectionWidthForLineChartView:(JBLineChartView *)lineChartView
|
||||
{
|
||||
return ...; // width of selection view
|
||||
}
|
||||
|
||||
- (UIColor *)lineChartView:(JBLineChartView *)lineChartView selectionColorForLineAtLineIndex:(NSUInteger)lineIndex
|
||||
{
|
||||
return ...; // color of selected line
|
||||
}
|
||||
|
||||
- (UIColor *)lineChartView:(JBLineChartView *)lineChartView selectionFillColorForLineAtLineIndex:(NSUInteger)lineIndex
|
||||
{
|
||||
return ...; // color of area under selected line
|
||||
}
|
||||
|
||||
By default, each line will not show dots for each point. To enable this on a per-line basis:
|
||||
|
||||
- (BOOL)lineChartView:(JBLineChartView *)lineChartView showsDotsForLineAtLineIndex:(NSUInteger)lineIndex;
|
||||
|
||||
To the radius of each dot (default is 6x the line width, or 3x the diameter), implement:
|
||||
|
||||
- (CGFloat)lineChartView:(JBLineChartView *)lineChartView dotRadiusForDotAtHorizontalIndex:(NSUInteger)horizontalIndex atLineIndex:(NSUInteger)lineIndex;
|
||||
|
||||
To customize the color of each dot during selection and non-selection events (default is white and black respectively), implement:
|
||||
|
||||
- (UIColor *)lineChartView:(JBLineChartView *)lineChartView colorForDotAtHorizontalIndex:(NSUInteger)horizontalIndex atLineIndex:(NSUInteger)lineIndex;
|
||||
|
||||
- (UIColor *)lineChartView:(JBLineChartView *)lineChartView selectionColorForDotAtHorizontalIndex:(NSUInteger)horizontalIndex atLineIndex:(NSUInteger)lineIndex;
|
||||
|
||||
Alternatively, you can supply your own UIView instead of using the default impelmentation:
|
||||
|
||||
- (UIView *)lineChartView:(JBLineChartView *)lineChartView dotViewAtHorizontalIndex:(NSUInteger)horizontalIndex atLineIndex:(NSUInteger)lineIndex;
|
||||
|
||||
Custom dot views are automatically shown when selected unless the following is implemented:
|
||||
|
||||
- (BOOL)lineChartView:(JBLineChartView *)lineChartView shouldHideDotViewOnSelectionAtHorizontalIndex:(NSUInteger)horizontalIndex atLineIndex:(NSUInteger)lineIndex;
|
||||
|
||||
As well, by default, each line will have squared off end caps and connection points. To enable rounded connections and end caps:
|
||||
|
||||
- (BOOL)lineChartView:(JBLineChartView *)lineChartView smoothLineAtLineIndex:(NSUInteger)lineIndex;
|
||||
|
||||
Furthermore, a line chart's selection events are delegated back via:
|
||||
|
||||
- (void)lineChartView:(JBLineChartView *)lineChartView didSelectLineAtIndex:(NSUInteger)lineIndex horizontalIndex:(NSUInteger)horizontalIndex touchPoint:(CGPoint)touchPoint
|
||||
{
|
||||
// Update view
|
||||
}
|
||||
|
||||
- (void)didDeselectLineInLineChartView:(JBLineChartView *)lineChartView
|
||||
{
|
||||
// Update view
|
||||
}
|
||||
|
||||
Lastly, if you don't want a line to be selectable:
|
||||
|
||||
- (BOOL)lineChartView:(JBLineChartView *)lineChartView shouldIgnoreSelectionAtIndex:(NSUInteger)lineIndex
|
||||
{
|
||||
return NO; // Check line index
|
||||
}
|
||||
|
||||
The <b>touchPoint</b> is especially important as it allows you to add custom elements to your chart during selection events. Refer to the demo project (<b>JBLineChartViewController</b>) to see how a tooltip can be used to display additional information during selection events.
|
||||
Both the line and bar charts support a robust set of customization options. Read more about them <a href="Customization.md">here</a>.
|
||||
|
||||
## Minimum & Maximum Values
|
||||
|
||||
@@ -314,6 +169,9 @@ If value(s) are supplied, they must be >= 0, otherwise an assertion will be thro
|
||||
|
||||
The min/max values are clamped to the ceiling and floor of the actual min/max values of the chart's data source; for example, if a maximumValue of 20 is supplied & the chart's actual max is 100, then 100 will be used. For min/max modifications to take effect, reloadData must be called.
|
||||
|
||||
## Performance
|
||||
|
||||
The nature of charting is to display all available information, unlike a UITableView, which can cache rows that are offscreen. JBChartView's performance will suffer if the number of data points exceed the resolution of the device. The same issue exists with MKMapVie, when hundreds of pins are supplied within a certain geographic area. It's why Apple recommends clustering to avoid performance issues. As such, for large datasets, we recommend that your dataSource to supply a subset of points - perhaps 'clustering' those that are close to one another.
|
||||
|
||||
## License
|
||||
|
||||
|
||||
Reference in New Issue
Block a user