ScrollableGraphView

About

An adaptive scrollable graph view for iOS to visualise simple discrete datasets. Written in Swift. Originally written for a small personal project.

The main goal of the this graph component is to visualise simple discrete datasets and allow the the user to scroll through the graph.

Contents

• Features
• Basic Usage
• Customisation
• Customisation Examples
• Improvements
• Known Issues
• Other

Features

Feature List
Initialisation animations and range adaption animations.
Range adaption when scrolling through the graph. The range of the y-axis will automatically adapt to to the min and max of the visible points.
Smooth scrolling around the graph.
Handles a relatively large number of points without lagging.
Many customisation options. (Check the customisation section)

Usage

Adding the ScrollableGraphView to your project:

Add the ScrollableGraphView class to your project. There are two ways to add the ScrollableGraphView to your project.

Manually

Add ScrollableGraphView.swift to your project in Xcode

CocoaPods

Add pod 'ScrollableGraphView' to your Podfile and then make sure to import ScrollableGraphView in your code.

Creating a graph and setting the data.

1. Create a ScrollableGraphView instance and set the data and labels

   letgraphView=ScrollableGraphView(frame: someFrame)letdata:[Double]=[4,8,15,16,23,42]letlabels=["one","two","three","four","five","six"]
   graphView.setData(data, withLabels: labels)

2. Add the ScrollableGraphView to the view hierarchy.

   someViewController.view.addSubview(graphView)

Things you could use it for:

• ✔ Study applications to show time studied/etc
• ✔ Weather applications
• ✔ Prototyping
• ✔ Simple data visualisation

Things you shouldn't/cannot use it for:

• ✘ Rigorous statistical software
• ✘ Important & complex data visualisation
• ✘ Graphing continuous mathematical functions

Customisation

The graph can be customised by setting any of the following public properties before displaying the ScrollableGraphView. The defaults are shown below.

Line Styles

Property	Description
lineWidth: CGFloat	Specifies how thick the graph of the line is. In points.
lineColor: UIColor	The color of the graph line. UIColor.
lineStyle: ScrollableGraphViewLineStyle	Whether or not the line should be rendered using bezier curves are straight lines. Possible values: ScrollableGraphViewLineStyle.Straight ScrollableGraphViewLineStyle.Smooth
lineJoin	How each segment in the line should connect. Takes any of the Core Animation LineJoin values.
lineCap	The line caps. Takes any of the Core Animation LineCap values.

Fill Styles

Property	Description
backgroundFillColor: UIColor	The background colour for the entire graph view, not just the plotted graph.
shouldFill: Bool	Specifies whether or not the plotted graph should be filled with a colour or gradient.
fillType: ScrollableGraphViewFillType	Specifies whether to fill the graph with a solid colour or gradient. Possible values: ScrollableGraphViewFillType.Solid ScrollableGraphViewFillType.Gradient
fillColor: UIColor	If fillType is set to .Solid then this colour will be used to fill the graph.
fillGradientStartColor: UIColor	If fillType is set to .Gradient then this will be the starting colour for the gradient.
fillGradientEndColor: UIColor	If fillType is set to .Gradient, then this will be the ending colour for the gradient.
fillGradientType:ScrollableGraphViewGradientType	If fillType is set to .Gradient, then this defines whether the gradient is rendered as a linear gradient or radial gradient. Possible values: ScrollableGraphViewFillType.Solid ScrollableGraphViewFillType.Gradient

Bar Styles

Property	Description
shouldDrawBarLayer: Bool	Whether bars should be drawn or not. If you want a bar graph, this should be set to true. However, you will probably want to disable drawing the data points with shouldDrawDataPoint = false. If you want to hide the line as well: lineColor = UIColor.clearColor()
barWidth: CGFloat	The width of an individual bar on the graph.
barColor: UIColor	The actual colour of the bar.
barLineWidth: CGFloat	The width of the outline of the bar
barLineColor: UIColor	The colour of the bar outline

Spacing

Property	Description
topMargin: CGFloat	How far the "maximum" reference line is from the top of the view's frame. In points.
bottomMargin: CGFloat	How far the "minimum" reference line is from the bottom of the view's frame. In points.
leftmostPointPadding: CGFloat	How far the first point on the graph should be placed from the left hand side of the view.
rightmostPointPadding: CGFloat	How far the final point on the graph should be placed from the right hand side of the view.
dataPointSpacing: CGFloat	How much space should be between each data point.
direction: ScrollableGraphViewDirection	Which way the user is expected to scroll from. Possible values: ScrollableGraphViewDirection.LeftToRight ScrollableGraphViewDirection.RightToLeft For example, if it is set to .RightToLeft, the graph will start on the "right hand side" of the graph and the user will have to scroll towards the left.

Graph Range

Property	Description
rangeMin: Double	The minimum value for the y-axis. This is ignored when shouldAutomaticallyDetectRange or shouldAdaptRange = true
rangeMax: Double	The maximum value for the y-axis. This is ignored when shouldAutomaticallyDetectRange or shouldAdaptRange = true
shouldAutomaticallyDetectRange: Bool	If this is set to true, then the range will automatically be detected from the data the graph is given.
shouldRangeAlwaysStartAtZero: Bool	Forces the graph's minimum to always be zero. Used in conjunction with shouldAutomaticallyDetectRange or shouldAdaptRange, if you want to force the minimum to stay at 0 rather than the detected minimum.

Data Point Drawing

Property	Description
shouldDrawDataPoint: Bool	Whether or not to draw a symbol for each data point.
dataPointType: ScrollableGraphViewDataPointType	The shape to draw for each data point. Possible values: ScrollableGraphViewDataPointType.Circle ScrollableGraphViewDataPointType.Square ScrollableGraphViewDataPointType.Custom
dataPointSize: CGFloat	The size of the shape to draw for each data point.
dataPointFillColor: UIColor	The colour with which to fill the shape.
customDataPointPath: ((centre: CGPoint) -> UIBezierPath)?	If dataPointType is set to .Custom then you,can provide a closure to create any kind of shape you would like to be displayed instead of just a circle or square. The closure takes a CGPoint which is the centre of the shape and it should return a complete UIBezierPath.

Adapting & Animations

Property	Description
shouldAdaptRange: Bool	Whether or not the y-axis' range should adapt to the points that are visible on screen. This means if there are only 5 points visible on screen at any given time, the maximum on the y-axis will be the maximum of those 5 points. This is updated automatically as the user scrolls along the graph.
shouldAnimateOnAdapt: Bool	If shouldAdaptRange is set to true then this specifies whether or not the points on the graph should animate to their new positions. Default is set to true. Looks very janky if set to false.
animationDuration: Double	How long the animation should take. Affects both the startup animation and the animation when the range of the y-axis adapts to onscreen points.
adaptAnimationType: ScrollableGraphViewAnimationType	The animation style. Possible values: ScrollableGraphViewAnimationType.EaseOut ScrollableGraphViewAnimationType.Elastic ScrollableGraphViewAnimationType.Custom
customAnimationEasingFunction: ((t: Double) -> Double)?	If adaptAnimationType is set to .Custom, then this is the easing function you would like applied for the animation.
shouldAnimateOnStartup: Bool	Whether or not the graph should animate to their positions when the graph is first displayed.

Reference Lines

Property	Description
shouldShowReferenceLines: Bool	Whether or not to show the y-axis reference lines and labels.
referenceLineColor: UIColor	The colour for the reference lines.
referenceLineThickness: CGFloat	The thickness of the reference lines.
referenceLinePosition: ScrollableGraphViewReferenceLinePosition	Where the labels should be displayed on the reference lines. Possible values: ScrollableGraphViewReferenceLinePosition.Left ScrollableGraphViewReferenceLinePosition.Right ScrollableGraphViewReferenceLinePosition.Both
referenceLineType: ScrollableGraphViewReferenceLineType	The type of reference lines. Currently only .Cover is available.
numberOfIntermediateReferenceLines: Int	How many reference lines should be between the minimum and maximum reference lines. If you want a total of 4 reference lines, you would set this to 2. This can be set to 0 for no intermediate reference lines.This can be used to create reference lines at specific intervals. If the desired result is to have a reference line at every 10 units on the y-axis, you could, for example, set rangeMax to 100, rangeMin to 0 and numberOfIntermediateReferenceLines to 9.
shouldAddLabelsToIntermediateReferenceLines: Bool	Whether or not to add labels to the intermediate reference lines.
shouldAddUnitsToIntermediateReferenceLineLabels: Bool	Whether or not to add units specified by the referenceLineUnits variable to the labels on the intermediate reference lines.

Reference Line Labels

Property	Description
referenceLineLabelFont: UIFont	The font to be used for the reference line labels.
referenceLineLabelColor: UIColor	The colour of the reference line labels.
shouldShowReferenceLineUnits: Bool	Whether or not to show the units on the reference lines.
referenceLineUnits: String?	The units that the y-axis is in. This string is used for labels on the reference lines.
referenceLineNumberOfDecimalPlaces: Int	The number of decimal places that should be shown on the reference line labels.

Data Point Labels (x-axis)

Property	Description
shouldShowLabels: Bool	Whether or not to show the labels on the x-axis for each point.
dataPointLabelTopMargin: CGFloat	How far from the "minimum" reference line the data point labels should be rendered.
dataPointLabelBottomMargin: CGFloat	How far from the bottom of the view the data point labels should be rendered.
dataPointLabelFont: UIFont?	The font for the data point labels.
dataPointLabelColor: UIColor	The colour for the data point labels.
dataPointLabelsSparsity: Int	Used to force the graph to show every n-th dataPoint label

Customisation Examples

Note: Examples here use a "colorFromHex" extension for UIColor.

Default

letgraphView=ScrollableGraphView(frame: frame)
graphView.setData(data, withLabels: labels)self.view.addSubview(graphView)

Smooth Dark

letgraphView=ScrollableGraphView(frame: frame)
graphView.backgroundFillColor =UIColor.colorFromHex("#333333")
graphView.rangeMax =50
graphView.lineWidth =1
graphView.lineColor =UIColor.colorFromHex("#777777")
graphView.lineStyle =ScrollableGraphViewLineStyle.Smooth
graphView.shouldFill =true
graphView.fillType =ScrollableGraphViewFillType.Gradient
graphView.fillColor =UIColor.colorFromHex("#555555")
graphView.fillGradientType =ScrollableGraphViewGradientType.Linear
graphView.fillGradientStartColor =UIColor.colorFromHex("#555555")
graphView.fillGradientEndColor =UIColor.colorFromHex("#444444")
graphView.dataPointSpacing =80
graphView.dataPointSize =2
graphView.dataPointFillColor =UIColor.whiteColor()
graphView.referenceLineLabelFont =UIFont.boldSystemFontOfSize(8)
graphView.referenceLineColor =UIColor.whiteColor().colorWithAlphaComponent(0.2)
graphView.referenceLineLabelColor =UIColor.whiteColor()
graphView.dataPointLabelColor =UIColor.whiteColor().colorWithAlphaComponent(0.5)
graphView.setData(data, withLabels: labels)self.view.addSubview(graphView)

Bar Dark (Bar layer thanks to @RedBlueThing)

letgraphView=ScrollableGraphView(frame:frame) // Disable the lines and data points.
graphView.shouldDrawDataPoint =false
graphView.lineColor =UIColor.clearColor()
// Tell the graph it should draw the bar layer instead.
graphView.shouldDrawBarLayer =true
// Customise the bar.
graphView.barWidth =25
graphView.barLineWidth =1
graphView.barLineColor =UIColor.colorFromHex("#777777")
graphView.barColor =UIColor.colorFromHex("#555555")
graphView.backgroundFillColor =UIColor.colorFromHex("#333333")
graphView.referenceLineLabelFont =UIFont.boldSystemFontOfSize(8)
graphView.referenceLineColor =UIColor.whiteColor().colorWithAlphaComponent(0.2)
graphView.referenceLineLabelColor =UIColor.whiteColor()
graphView.numberOfIntermediateReferenceLines =5
graphView.dataPointLabelColor =UIColor.whiteColor().colorWithAlphaComponent(0.5)
graphView.shouldAnimateOnStartup =true
graphView.shouldAdaptRange =true
graphView.adaptAnimationType =ScrollableGraphViewAnimationType.Elastic
graphView.animationDuration =1.5
graphView.rangeMax =50
graphView.shouldRangeAlwaysStartAtZero =true

Dot

letgraphView=ScrollableGraphView(frame:frame)
graphView.backgroundFillColor =UIColor.colorFromHex("#00BFFF")
graphView.lineColor =UIColor.clearColor()
graphView.dataPointSize =5
graphView.dataPointSpacing =80
graphView.dataPointLabelFont =UIFont.boldSystemFontOfSize(10)
graphView.dataPointLabelColor =UIColor.whiteColor()
graphView.dataPointFillColor =UIColor.whiteColor()
graphView.referenceLineLabelFont =UIFont.boldSystemFontOfSize(10)
graphView.referenceLineColor =UIColor.whiteColor().colorWithAlphaComponent(0.5)
graphView.referenceLineLabelColor =UIColor.whiteColor()
graphView.referenceLinePosition =ScrollableGraphViewReferenceLinePosition.Both
graphView.numberOfIntermediateReferenceLines =9
graphView.rangeMax =50self.view.addSubview(graphView)

Pink Mountain

letgraphView=ScrollableGraphView(frame:frame)
graphView.backgroundFillColor =UIColor.colorFromHex("#222222")
graphView.lineColor =UIColor.clearColor()
graphView.shouldFill =true
graphView.fillColor =UIColor.colorFromHex("#FF0080")
graphView.shouldDrawDataPoint =false
graphView.dataPointSpacing =80
graphView.dataPointLabelFont =UIFont.boldSystemFontOfSize(10)
graphView.dataPointLabelColor =UIColor.whiteColor()
graphView.referenceLineThickness =1
graphView.referenceLineLabelFont =UIFont.boldSystemFontOfSize(10)
graphView.referenceLineColor =UIColor.whiteColor().colorWithAlphaComponent(0.5)
graphView.referenceLineLabelColor =UIColor.whiteColor()
graphView.referenceLinePosition =ScrollableGraphViewReferenceLinePosition.Both
graphView.numberOfIntermediateReferenceLines =1
graphView.rangeMax =50self.view.addSubview(graphView)

Solid Pink with Margins

You can use the top and bottom margin to leave space for other content:

letgraphView=ScrollableGraphView(frame:frame)
graphView.bottomMargin =350
graphView.topMargin =20
graphView.backgroundFillColor =UIColor.colorFromHex("#222222")
graphView.lineColor =UIColor.clearColor()
graphView.lineStyle =ScrollableGraphViewLineStyle.Smooth
graphView.shouldFill =true
graphView.fillColor =UIColor.colorFromHex("#FF0080")
graphView.shouldDrawDataPoint =false
graphView.dataPointSpacing =80
graphView.dataPointLabelFont =UIFont.boldSystemFontOfSize(10)
graphView.dataPointLabelColor =UIColor.whiteColor()
graphView.referenceLineThickness =1
graphView.referenceLineLabelFont =UIFont.boldSystemFontOfSize(10)
graphView.referenceLineColor =UIColor.whiteColor().colorWithAlphaComponent(0.25)
graphView.referenceLineLabelColor =UIColor.whiteColor()
graphView.numberOfIntermediateReferenceLines =0
graphView.rangeMax =50self.view.addSubview(graphView)

Improvements

Pull requests, improvements & criticisms to any and all of the code are more than welcome.

Known Issues

If you find any bugs please create an issue on Github.

Other

Follow me on twitter for interesting updates (read: gifs) about other things that I make.