philackm/scrollablegraphview

An adaptive scrollable graph view for iOS to visualise simple discrete datasets. Written in Swift.

ScrollableGraphView

Announcements

9-7-2017 - Version 4:

Version 4 was released which adds multiple plots, dynamic reloading of values, more reference line customisation options and various bug fixes.

You can see the major changes in the API here.

The public interface is incompatible with previous versions. If you prefer to keep using the older version, make sure to specify version 3 in your podfile or downloaded the classes from a pre-v4 release.

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.

Contribution

All pull requests are welcome. There is a list of features people would like on the issues page, ranging from simple changes to quite complex. Feel free to jump on in.

Sponsors

Development of this component has been sponsored by Anomaly. Check them out here.

Contents

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

Features

Feature List
Initialisation animations and range adaption animations.
Multiple plots and dynamic reloading of the values.
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 as many points as you can throw at it.
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 all of the files in the Classes directory to your project in Xcode to your project in Xcode.

CocoaPods

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

Carthage

Add github "philackm/ScrollableGraphView" ~> 4.0.2 to your Cartfile and then make sure to link the frameworks and import ScrollableGraphView in your code.

Creating a graph and providing it with data.

1. Create a ScrollableGraphView instance. The graph requires a data source, which is an object that conforms to the ScrollableGraphViewDataSource protocol.

   // Compose the graph view by creating a graph, then adding any plots
   // and reference lines before adding the graph to the view hierarchy.
   let graphView = ScrollableGraphView(frame: frame, dataSource: self)
   
   let linePlot = LinePlot(identifier: "line") // Identifier should be unique for each plot.
   let referenceLines = ReferenceLines()
   
   graphView.addPlot(plot: linePlot)
   graphView.addReferenceLines(referenceLines: referenceLines)

2. Ensure the dataSource object conforms to the ScrollableGraphViewDataSource protocol and implements the following three methods like so:

   func value(forPlot plot: Plot, atIndex pointIndex: Int) -> Double {
       // Return the data for each plot.
       switch(plot.identifier) { 
       case "line":
           return linePlotData[pointIndex]
       default:
           return 0
       }
   }
   
   func label(atIndex pointIndex: Int) -> String {
       return "FEB \(pointIndex)"
   }
   
   func numberOfPoints() -> Int {
       return numberOfDataPointsInGraph
   }

3. Finally, add the ScrollableGraphView to the view hierarchy.

   someViewController.view.addSubview(graphView)

This will create a graph that looks something like:

Interface Builder support

There is now support for Interface Builder (from CocoaPod version 2.0.0). See the example project in the folder: graphview_example_ib

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 entire graph is composed by initially creating an empty ScrollableGraphView object and progressively adding whatever plots and reference lines you require.

Create a plot using the any of the LinePlot, DotPlot, BarPlot constructors. Create reference lines using the ReferenceLines() constructor. Before adding the ScrollableGraphView object to the view hierarchy, add the plots and reference lines to the graph using the addPlot and addReferenceLines methods. You can add multiple plots (examples are shown below). Each plot must have the same number of data points.

In the case of interface builder, graph customisation is performed via the properties pane, whilst plots and reference lines customisation is done in the corresponding view controller. See the example project in the folder: graphview_example_ib

Graph Customisation

These settings can be set directly on the ScrollableGraphView object before adding it to the view hierarchy.

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.
shouldAnimateOnStartup: Bool	Whether or not the graph should animate to their positions when the graph is first displayed.

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 shouldAdaptRange = true
rangeMax: Double	The maximum value for the y-axis. This is ignored when shouldAdaptRange = true
shouldRangeAlwaysStartAtZero: Bool	Forces the graph's minimum to always be zero. Used in conjunction with shouldAdaptRange, if you want to force the minimum to stay at 0 rather than the detected minimum.

Plot Customisation

For all plots you can specify animation related information for when the plot first appears and during adaptions.

Animation

Property	Description
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.

LinePlot

Line plot specific customisation options. These options are available on any LinePlot object.

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
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: ScrollableGraphViewGradientType.linear ScrollableGraphViewGradientType.radial

DotPlot

Dot plot specific customisation options. These options are available on any DotPlot object.

Property	Description
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.

BarPlot

Bar plot specific customisation options. These options are available on any BarPlot object.

Property	Description
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.
shouldRoundBarCorners: Bool	Whether or not to use rounded corners for the bars.

Reference Line Customisation

These options are set on the ReferenceLines object before adding it to the graph view.

Reference Lines

Property	Description
shouldShowReferenceLines: Bool	Whether or not to show the y-axis reference lines and labels.
positionType: ReferenceLinePositioningType	Whether the reference lines should be placed relatively, (for example at 0%, 20%, 40%, 60%, 80% and 100% of the max y-axis value), or absolutely at specific values on the y-axis. Possible values: ReferenceLinePositioningType.relative ReferenceLinePositioningType.absolute
relativePositions: [Double]	An array of positions where the reference lines should be placed. Used if positionType == .relative. For example, assigning a value of [0, 0.5, 1] will add 3 reference lines to the graph, one at the bottom of the y-axis (0%), one in the middle of the y-axis (50%) and one at the top (100%). All values in the array should be between 0 and 1.
absolutePositions: [Double]	An array of absolute positions where the reference lines should be placed. Used if positionType == .absolute. For example, assigning a value of [10, 35] will add 2 reference lines to the graph, one at the value of 10 on the y-axis, one at the value of 35 on the y-axis.
includeMinMax: Bool	Whether or not you want to render the minimum and maximum reference line. If this is true, the min and max reference lines are always rendered. Set this to false if you want to specify only one, or neither, with relativePositions or absolutePositions.
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
shouldAddLabelsToIntermediateReferenceLines: Bool	Whether or not to add labels to the intermediate (between min and max) 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 (y-axis)

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.
referenceLineNumberStyle: NSNumberFormatterStyle	The number style 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

All of these examples can be seen in action in the example project: graphview_example_code

Open the project in Xcode and hit run.

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

Default

let graphView = ScrollableGraphView(frame: frame, dataSource: self)

let linePlot = LinePlot(identifier: "simple") // Identifier should be unique for each plot.
let referenceLines = ReferenceLines()

graphView.addPlot(plot: linePlot)
graphView.addReferenceLines(referenceLines: referenceLines)

Bar Dark (Bar layer thanks to @RedBlueThing)

let graphView = ScrollableGraphView(frame: frame, dataSource: self)

// Setup the plot
let barPlot = BarPlot(identifier: "bar")

barPlot.barWidth = 25
barPlot.barLineWidth = 1
barPlot.barLineColor = UIColor.colorFromHex(hexString: "#777777")
barPlot.barColor = UIColor.colorFromHex(hexString: "#555555")

barPlot.adaptAnimationType = ScrollableGraphViewAnimationType.elastic
barPlot.animationDuration = 1.5

// Setup the reference lines
let referenceLines = ReferenceLines()

referenceLines.referenceLineLabelFont = UIFont.boldSystemFont(ofSize: 8)
referenceLines.referenceLineColor = UIColor.white.withAlphaComponent(0.2)
referenceLines.referenceLineLabelColor = UIColor.white

referenceLines.dataPointLabelColor = UIColor.white.withAlphaComponent(0.5)

// Setup the graph
graphView.backgroundFillColor = UIColor.colorFromHex(hexString: "#333333")

graphView.shouldAnimateOnStartup = true

graphView.rangeMax = 100
graphView.rangeMin = 0

// Add everything
graphView.addPlot(plot: barPlot)
graphView.addReferenceLines(referenceLines: referenceLines)
return graphView

Smooth Dark

let graphView = ScrollableGraphView(frame: frame, dataSource: self)

// Setup the line plot.
let linePlot = LinePlot(identifier: "darkLine")

linePlot.lineWidth = 1
linePlot.lineColor = UIColor.colorFromHex(hexString: "#777777")
linePlot.lineStyle = ScrollableGraphViewLineStyle.smooth

linePlot.shouldFill = true
linePlot.fillType = ScrollableGraphViewFillType.gradient
linePlot.fillGradientType = ScrollableGraphViewGradientType.linear
linePlot.fillGradientStartColor = UIColor.colorFromHex(hexString: "#555555")
linePlot.fillGradientEndColor = UIColor.colorFromHex(hexString: "#444444")

linePlot.adaptAnimationType = ScrollableGraphViewAnimationType.elastic

let dotPlot = DotPlot(identifier: "darkLineDot") // Add dots as well.
dotPlot.dataPointSize = 2
dotPlot.dataPointFillColor = UIColor.white

dotPlot.adaptAnimationType = ScrollableGraphViewAnimationType.elastic

// Setup the reference lines.
let referenceLines = ReferenceLines()

referenceLines.referenceLineLabelFont = UIFont.boldSystemFont(ofSize: 8)
referenceLines.referenceLineColor = UIColor.white.withAlphaComponent(0.2)
referenceLines.referenceLineLabelColor = UIColor.white

referenceLines.positionType = .absolute
// Reference lines will be shown at these values on the y-axis.
referenceLines.absolutePositions = [10, 20, 25, 30]
referenceLines.includeMinMax = false

referenceLines.dataPointLabelColor = UIColor.white.withAlphaComponent(0.5)

// Setup the graph
graphView.backgroundFillColor = UIColor.colorFromHex(hexString: "#333333")
graphView.dataPointSpacing = 80

graphView.shouldAnimateOnStartup = true
graphView.shouldAdaptRange = true
graphView.shouldRangeAlwaysStartAtZero = true

graphView.rangeMax = 50

// Add everything to the graph.
graphView.addReferenceLines(referenceLines: referenceLines)
graphView.addPlot(plot: linePlot)
graphView.addPlot(plot: dotPlot)

Dot

let graphView = ScrollableGraphView(frame: frame, dataSource: self)

// Setup the plot
let plot = DotPlot(identifier: "dot")

plot.dataPointSize = 5
plot.dataPointFillColor = UIColor.white

// Setup the reference lines
let referenceLines = ReferenceLines()
referenceLines.referenceLineLabelFont = UIFont.boldSystemFont(ofSize: 10)
referenceLines.referenceLineColor = UIColor.white.withAlphaComponent(0.5)
referenceLines.referenceLineLabelColor = UIColor.white
referenceLines.referenceLinePosition = ScrollableGraphViewReferenceLinePosition.both

referenceLines.shouldShowLabels = false

// Setup the graph
graphView.backgroundFillColor = UIColor.colorFromHex(hexString: "#00BFFF")
graphView.shouldAdaptRange = false
graphView.shouldAnimateOnAdapt = false
graphView.shouldAnimateOnStartup = false

graphView.dataPointSpacing = 25
graphView.rangeMax = 50
graphView.rangeMin = 0

// Add everything
graphView.addPlot(plot: plot)
graphView.addReferenceLines(referenceLines: referenceLines)

Pink

let graphView = ScrollableGraphView(frame: frame, dataSource: self)

// Setup the plot
let linePlot = LinePlot(identifier: "pinkLine")

linePlot.lineColor = UIColor.clear
linePlot.shouldFill = true
linePlot.fillColor = UIColor.colorFromHex(hexString: "#FF0080")

// Setup the reference lines
let referenceLines = ReferenceLines()

referenceLines.referenceLineThickness = 1
referenceLines.referenceLineLabelFont = UIFont.boldSystemFont(ofSize: 10)
referenceLines.referenceLineColor = UIColor.white.withAlphaComponent(0.5)
referenceLines.referenceLineLabelColor = UIColor.white
referenceLines.referenceLinePosition = ScrollableGraphViewReferenceLinePosition.both

referenceLines.dataPointLabelFont = UIFont.boldSystemFont(ofSize: 10)
referenceLines.dataPointLabelColor = UIColor.white
referenceLines.dataPointLabelsSparsity = 3

// Setup the graph
graphView.backgroundFillColor = UIColor.colorFromHex(hexString: "#222222")

graphView.dataPointSpacing = 60
graphView.shouldAdaptRange = true

// Add everything
graphView.addPlot(plot: linePlot)
graphView.addReferenceLines(referenceLines: referenceLines)

Multiple Plots v1

// Setup the line plot.
let blueLinePlot = LinePlot(identifier: "multiBlue")

blueLinePlot.lineWidth = 1
blueLinePlot.lineColor = UIColor.colorFromHex(hexString: "#16aafc")
blueLinePlot.lineStyle = ScrollableGraphViewLineStyle.smooth

blueLinePlot.shouldFill = true
blueLinePlot.fillType = ScrollableGraphViewFillType.solid
blueLinePlot.fillColor = UIColor.colorFromHex(hexString: "#16aafc").withAlphaComponent(0.5)

blueLinePlot.adaptAnimationType = ScrollableGraphViewAnimationType.elastic

// Setup the second line plot.
let orangeLinePlot = LinePlot(identifier: "multiOrange")

orangeLinePlot.lineWidth = 1
orangeLinePlot.lineColor = UIColor.colorFromHex(hexString: "#ff7d78")
orangeLinePlot.lineStyle = ScrollableGraphViewLineStyle.smooth

orangeLinePlot.shouldFill = true
orangeLinePlot.fillType = ScrollableGraphViewFillType.solid
orangeLinePlot.fillColor = UIColor.colorFromHex(hexString: "#ff7d78").withAlphaComponent(0.5)

orangeLinePlot.adaptAnimationType = ScrollableGraphViewAnimationType.elastic

// Setup the reference lines.
let referenceLines = ReferenceLines()

referenceLines.referenceLineLabelFont = UIFont.boldSystemFont(ofSize: 8)
referenceLines.referenceLineColor = UIColor.white.withAlphaComponent(0.2)
referenceLines.referenceLineLabelColor = UIColor.white

referenceLines.dataPointLabelColor = UIColor.white.withAlphaComponent(1)

// Setup the graph
graphView.backgroundFillColor = UIColor.colorFromHex(hexString: "#333333")

graphView.dataPointSpacing = 80
graphView.shouldAnimateOnStartup = true
graphView.shouldAdaptRange = true

graphView.shouldRangeAlwaysStartAtZero = true

// Add everything to the graph.
graphView.addReferenceLines(referenceLines: referenceLines)
graphView.addPlot(plot: blueLinePlot)
graphView.addPlot(plot: orangeLinePlot)

Multiple Plots v2

It is possible to combine multiple plots to get different looks. We use the the dot plot to add markers to the line plot in this case:

let graphView = ScrollableGraphView(frame: frame, dataSource: self)

// Setup the first plot.
let blueLinePlot = LinePlot(identifier: "multiBlue")

blueLinePlot.lineColor = UIColor.colorFromHex(hexString: "#16aafc")
blueLinePlot.adaptAnimationType = ScrollableGraphViewAnimationType.elastic

// dots on the line
let blueDotPlot = DotPlot(identifier: "multiBlueDot")
blueDotPlot.dataPointType = ScrollableGraphViewDataPointType.circle
blueDotPlot.dataPointSize = 5
blueDotPlot.dataPointFillColor = UIColor.colorFromHex(hexString: "#16aafc")

blueDotPlot.adaptAnimationType = ScrollableGraphViewAnimationType.elastic

// Setup the second plot.
let orangeLinePlot = LinePlot(identifier: "multiOrange")

orangeLinePlot.lineColor = UIColor.colorFromHex(hexString: "#ff7d78")
orangeLinePlot.adaptAnimationType = ScrollableGraphViewAnimationType.elastic

// squares on the line
let orangeSquarePlot = DotPlot(identifier: "multiOrangeSquare")
orangeSquarePlot.dataPointType = ScrollableGraphViewDataPointType.square
orangeSquarePlot.dataPointSize = 5
orangeSquarePlot.dataPointFillColor = UIColor.colorFromHex(hexString: "#ff7d78")

orangeSquarePlot.adaptAnimationType = ScrollableGraphViewAnimationType.elastic

// Setup the reference lines.
let referenceLines = ReferenceLines()

referenceLines.referenceLineLabelFont = UIFont.boldSystemFont(ofSize: 8)
referenceLines.referenceLineColor = UIColor.white.withAlphaComponent(0.2)
referenceLines.referenceLineLabelColor = UIColor.white
referenceLines.relativePositions = [0, 0.2, 0.4, 0.6, 0.8, 1]

referenceLines.dataPointLabelColor = UIColor.white.withAlphaComponent(1)

// Setup the graph
graphView.backgroundFillColor = UIColor.colorFromHex(hexString: "#333333")

graphView.dataPointSpacing = 80

graphView.shouldAnimateOnStartup = true
graphView.shouldAdaptRange = true
graphView.shouldRangeAlwaysStartAtZero = true

// Add everything to the graph.
graphView.addReferenceLines(referenceLines: referenceLines)
graphView.addPlot(plot: blueLinePlot)
graphView.addPlot(plot: blueDotPlot)
graphView.addPlot(plot: orangeLinePlot)
graphView.addPlot(plot: orangeSquarePlot)

Known Issues

• Some aspects of the graph cannot be customised after it has been added to the view hierarchy.
• Reloading the graph with a different number of data items is currently not supported.
• Performance in the simulator is not great.

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.

scrollablegraphview's Issues

Feature Request: Comments on variables

It would be really nice to have some /// comments before each variable so we know what each one is doing without having to reverse engineer your code 😄

Feature Request: Individual Point or Bar Color and grouped data

It would be nice to have the posibility to set indivudual colors for each point or bar, and also to group multiple data values for each label

OS X support

We’d love to use this library in our Mac app—it looks fantastic!

Add support for label formatter

Is there a way to format the label on y axis? Would be great to be able to format the string. It's useful to display currency and other types of data.

X-axis labels duplicating after some swipes on graph view

A Possible enhancement...

Hi,

Nice work indeed.
Can we have 2 line scrollable graph?
This will be a nice enhancement!

Thank you very much

George Gerardis

Swift 3 Version!

Can you please update it to support Swift 3?

Horizontal line is overflow

Using autolayout, I set the graphview 8px trailing and leading space to its view container. However the graph line is overflow. Please take a look at the picture: https://gyazo.com/4d0bfee262e9977983c568b8943c6d17

Reference lines in x-axis

Hi people, I wonder , how to put the lines on the x axis.

Segmentation fault 11 when inherit from ScrollableGraphView

Hi,
I have Command failed due to signal: Segmentation fault: 11 when trying to inherit from ScrollableGraphView:

@IBDesignable
@objc open class ProductivityGraphView: ScrollableGraphView {

}

1. While loading conformances for 'ProductivityGraphView' at

how to chage a pointcolor?

thank you for your project. i want to change a point color. not all point but a special point. for example, i want change points which are above 30 to red and 30 less than are be white.
how and where can i do it??

Future Request: how to add shadow to the line ?

Hi Guys

I was wondering how to add shadow to the main line that is connecting the dots as I was inspired by a design. I have figure it out. I'm kindly asking the author of the library to expose it, so can be added easily.

the final goal is to get line which will have shadow as the example below created by Sam Thibault in one of his prototypes.

Because this line chart is using CALayer it can have shadow very easy. You just need to find it where exactly is and add the code.

In file ScrollableraphView.swift locate the function shown bellow i.e. "addDrawingLayers" and add the code to add your shadow(of course you can change the values to change the type of the shadow):
bear in mind that I have switched off the property graphView.shouldFill = false because I wanted the shadow to be below the line.

        lineLayer?.shadowOffset = CGSize(width: 4,height: 4)
        lineLayer?.shadowColor = UIColor.darkGrayColor().CGColor
        lineLayer?.shadowRadius = 2.0
        lineLayer?.shadowOpacity = 1.0

After adding the code the line chart was like this

And this is how looks like the function after i added the code.

If someone have idea how to create the gradient for the line itself, it would be great.

Cheers.

Scroll to end on initial load

Is there a way to scroll to the end of the view after the animation is complete? or even before the animation starts?

Change LineColor Stroke when graph already displayed

I have my Graph already displayed. If I tap on a button, i'd like to change the strokecolor of the lineLayer. So I added this in the class:

public func changeLineColor(color : UIColor) {    
  lineLayer?.strokeColor = color.CGColor
}

But if I call it from my view like: myGraph.changeLineColor(myColor) , it will return the error:

fatal error: use of unimplemented initializer 'init(layer:)' for class 'TestGraph.ScrollableGraphViewDrawingLayer'

I can still change the background color by adding this function and it works:

public func changeBackgroundColor(color : UIColor) {
drawingView.backgroundColor = color
}

BUT do you have any idea why I can't change the linecolor ? :/ thanks !!

Is there any way to make simple graph without scrolling which adjust "dataPointSpacing" based on graphview width?

I want "dataPointSpacing" to calculate automatically based on the graph area width (No Scrolling). Is there is any way to achieve that with the current API's?

How can I receive touch events from ScrollableGraphView

I tried setting the delegate but touchesBegan or other touch events don't fire from the ScrollableGraphView - they fire from my normal view just fine.

Label on bar top

Hi,

For first, thanks for this awesome code.

At this time I am facing a problem with labels and my question is if there is a way to add a value on top of the bar, for example I have a bar of month January and at the bottom I want to add "January" label and on top of this bar I want to add "R$ 100,00" as a String, is this possible? If yes, please someone can explain how?

PS: Please label it as Question ;)

Thanks.

Carthage

Hi,
For iOS and macOS projets it's will be great to make your component Carthage compatible

Take a look at these articles:

• Ruthlessly Simple Dependency Management with Carthage
• Carthage Tutorial: Getting Started
• Making Carthage-compatible Frameworks with Swift
• Swift Cross Platform Framework (section Configure targets for Carthage) 👍

On your README.md add on top and add section for the installation with Carthage.

bar graph functionality is not found

You have shown in Demo that we can also use it as bar chart . but there are no methods avaliable for bar chart

How to add GraphView in tableViewCell?

Hi guys,

Do you have any idea how to put GraphView in tableViewCell?
I'm getting lots of crash and can't list two or three different graphs in a tableview

Thanks.

Fatal issue with assert

: Error: this application, or a library it uses, has passed an invalid numeric value (NaN, or not-a-number) to CoreGraphics API and this value is being ignored. Please fix this problem.

This line of code is crashing the app.
assert (layer.zeroYPosition > 0);

Prevent graph from dropping off on the right

(or stop the line from rendering after the last data point)

Scenario:
With rightmostPointPadding = 0 my last label gets cut off:

If I extend the padding (or the user pulls to the left more) the line drops down to 0 and looks a little odd

Is it possible to do any of these options?

1. The line continues on whatever it's current trajectory is on
2. Stop it rendering at the last data point (the vertical line being ok, the horizontal one not)
   
3. Prevent the user from swiping past the last data point (not ideal because then the last label gets cut in half)

Thanks!

Pinch / Zoom feature would be great

Can we detect that the user arrived at the end of the graph when he scrolls ?

I am asking this question so we can add dynamically more data the more the users scrolls.

Animation resets if multiple calls are made

Hi,

First of all thanks for this awesome library!

I've been using it and sometimes the graph gets updated twice (usually with the same data), before the animation of the first calls finishes. And this causes the animation to abort and restart for the 2nd call. Which looks odd.

To test this include the following code in the viewDidLoad method of the example project:

  dispatch_after(dispatch_time(DISPATCH_TIME_NOW, Int64(graphView.animationDuration * 0.5 * Double(NSEC_PER_SEC))), dispatch_get_main_queue()){
       self.graphView.setData(self.data, withLabels: self.labels)
 }

I think possible solutions would be:

1. Always start the 2nd animation at the current point each point is
2. If the 2nd call has the exact same data as the currently animating call, don't animate it.

'dataPointLabelsSparsity' is not an available property

dataPointLabelsSparsity is shown in the documentation as an available property yet is not implemented in the actual library. Would be nice to have it available as it sounds super useful.

Support set barColor with random color.

Hi.
Your framework be very helpful. I have a issues need your support with set color barColor as photo bellow. You can help me?.

CocoaPods doesn't work

Hi, I'm trying to use your Lib, but when I add " pod 'ScrollableGraphView' " to my Podfile, the following error occurs.. " Unable to find a specification for 'ScrollableGraphView' ". How can I solve this problem?

Horizontal Bar View

Hi all !

is it possible to display the bar layer horizontally and not vertically ?

Thanks !

Multi line graph

is it possible to show multiple line in the graph?

How do I disable vertical scrolling on the graph?

I wanna keep just the horizontal scrolling and disable vertical. How do I do this?

This is the default behavior

I want the graph t position itself like this.

Or even disable the vertical scroll. Please help me.

Number of labels in the x-axis

is it possible to reduce the number labels shown on the x-axis? When I have to show large number of points , label in the x-axis are overlapping. And I don't want large spacing between those points.

Support negative numbers below zero for BarLayer

Hi,
first of all thank you very much for this great framework!

But currently it is not possible to draw negative bars below zero. E.g. try to draw data = [-10.0, 10.0] with minRange = -20.0: Both bars will start to draw from -20 instead of the baseline 0.

Scroll after create Graph

Hello!

First of all I want to thank you about this awesome library! I'm using it in a new project and It's really smooth. I only have one question. Is it posible to automatically scroll to the end of the graph after it appears on the view?

Best regards!

init(coder:) not implemented

Consider this a feature request rather than a bug. :)

It would be much more convenient to be able to connect directly to the GraphView from Interface Builder. Unfortunately, I have to create a container right now, because when I hook it up in IB, it tries to call the method that is not implemented yet:

required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") }

More flexibility when shouldAutomaticallyDetectRange = true

First of all, great library, I really like it :)

I'm wondering if we could add more flexiblity to shouldAutomaticallyDetectRange = true. Right now, it will resize the graph depending on what is the max-y value and min-y value. I m wondering if we can add some vertical margin in there?

Example: if max-y value is 115, and y-margin is 15, then highest value in graph would be 130 and not 115 like it is now.

I know that I can just find out what is my max y value and then compute the new rangeMax and rangeMin, but I think it would be nice to have it in the library. I can also help with that if need be, it should not be hard by looking at the code :)

Can we use more than one lines?

I want to show more than one lines in the graph. Is it possible to show add two or more lines in the same graph? Please provide a solution.

Add on demand graph will be great feature.

Scroll feature is awesome. While scroll reach at and should be option of append new data and add new point in graph.

Simply Amazing

I just wanted to say thank you to the developer behind this. This has been the best graph option I have ever come across. It's easy to implement, very attractive, easy for the user to interact with, and highly customizable. I also appreciate that the whole thing is in a single Swift file I can just drop in my project.

Thanks for all your hard work! This is fantastic! :)

Multi Line Graph and an option to select the node

Hi,

Could you please add an option to plot multiple values on the graph and an option to select a node/value?

Thanks. Love the Graph.

Update README to fit Swift 3 conversion

I'm having some trouble wondering how to refactor my projects in a way that fits the modifications made by Swift 3 conversion.

dataPointLabels displayed under graph

It would be great to have the option to display the dataPointsLabels (x-axis) under the graph, so it's not in the filled area.

Detect tap Gesture on the x-axis labels

How to detect the tap gesture on the label on the x-axis?

Goal is when the graph is displayed, no "circle" on the curve is displayed but if you tap on the label, the corresponding circle will be displayed with the corresponding value somewhere

Cocoapods please

I'd be cool to also add Cocoapods support. I done this implementation myself last month for my library. Just follow this post and this checklist.

Deprecated Language Features

Multiple language features will be removed in Swift 3. The deprecated language features must be replaced with the Swift 3 equivalents.

Feature Request: Interface Builder Designable

It would be really nice to be able to not only create the object in interface builder but to be able to design the object in interface builder as well.

To fix the first problem you need to replace the initWithCoder function with

required public init?(coder aDecoder: NSCoder) {`
    super.init(coder: aDecoder)`
}

Secondly, after // MARK: - ScrollableGraphView you need to mark the class as "designable" by adding @IBDesignable. Then for each variable which you wish to expose to interface builder you need to mark the variable with @IBInspectable. For example:

public var lineWidth: CGFloat = 2
// Will become
@IBInspectable public var lineWidth: CGFloat = 2

Finally you need to implement this function:

public override func prepareForInterfaceBuilder() {
    //Setup view
}

I have some question , can i display data value?

i am using scrollable-graphview... so I think that is very beautiful chart
but i have to show data value... but scrollable graphview only show path...
how can i show data value each bar ... or each line datapoint ?

tvOS support

It should be possible to add tvOS support. You should just have to disable any touch based apis by wrapping them in checking for the tvOS target.

How can I Give the values to X-Axis and Y-Axis?

Hello, I'm using Scrollable-GraphView of DarkGraph. But I don't know to add the x-axis and y-axis values from my end I have dates in x-axis and float values in Y-axis in different arrays.
How can I give the 2 arrays to X-axis and Y-axis. Thanks!

Question: reference labels

I have a graph that shows data from 1 to 5 and i have labels that equal the date the data was submitted. On the left hand side it shows the data numbers but I want to make them strings where 1 = Good Day, 2 = Ok Day, ect. Is that possible?