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

Overview

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

Example Application Usage

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.

Init Animation

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

Feature List
Initialisation animations and range adaption animations.

Animating
Multiple plots and dynamic reloading of the values.

dynamic-reload
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.

Adapting
Smooth scrolling around the graph.

Scrolling
Handles as many points as you can throw at it.

More_Scrolling
Many customisation options. (Check the customisation section)

Customising

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:

    String { return "FEB \(pointIndex)" } func numberOfPoints() -> Int { return numberOfDataPointsInGraph } ">
    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:

SimpleGraph

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. Adapting
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

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

simple

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)

bar-dark

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

line-dark-smooth

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

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

line-pink-straight

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

multi-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:

multi-v2

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.

Comments
  • Scroll after create Graph

    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!

    opened by llKoull 11
  • Support for Objective-C

    Support for Objective-C

    Hi! This looks like a great library! I was wondering if it can be used within an Objective-C project? I tried importing it via CocoaPods, but although I can create a ScrollableGraphView, I can´t seem to create a LinePlot, so I can´t finish the setup.

    Any ideas?

    Thanks!

    opened by jlubeck 8
  • Label on bar top

    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.

    opened by leonardosalles 7
  • Animation resets if multiple calls are made

    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.
    opened by felix-dumit 7
  • Feature Request: Interface Builder Designable

    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
    }
    
    enhancement 
    opened by TimAEllis 6
  • Reload data crash

    Reload data crash

    when new data is added to the array and reload the graph view, it crashes "index out of bound exception". I update the array before calling reload method. And also i did debug this, numberOfPoints returns correct value and seems like value(forPlot plot: Plot, atIndex pointIndex: Int) -> Double is not getting updated?

    opened by MacKaSL 5
  • How to update the graph several times in the same screen?

    How to update the graph several times in the same screen?

    How to update the graph with differents datasource.

    For example: The first time I received 3 points to draw, then in the same screen I tap a button to request again but now I received 10 points to draw.

    how is possible in the same screen reload the graph data?

    opened by manuel21 5
  • init(coder:) not implemented

    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") }

    bug 
    opened by thephatp 5
  • Is it possible to load graph with no animations?

    Is it possible to load graph with no animations?

    Is it possible to instantly load the graph rather than using the animations? Im using the graphs with a large dataset and it takes too long to animate the graph... ive tried setting .shouldAnimateOnStartup to false but then nothing loads.

    bug 
    opened by Neilfau 4
  • Index out of range error

    Index out of range error

    I'm getting index out of range error at setPlotPointPositions function . That error only occure at iphone 5s. Dou you have any idea. How can i fix that

    opened by imburakoner 4
  • 'identifier' (in plot.identifier) is inaccessible due to 'internal' protection level

    'identifier' (in plot.identifier) is inaccessible due to 'internal' protection level

    To confirm to ScrollableGraphViewDataSource protocol, when i add

    func value(forPlot plot: Plot, atIndex pointIndex: Int) -> Double

    to my code, Xcode gives the following error at plot.identifier :

    'identifier' is inaccessible due to 'internal' protection level.

    Can anyone help what is going on?

    import UIKit
    import ScrollableGraphView
    
    class ViewController: UIViewController, ScrollableGraphViewDataSource {
        
        // Class members and init...
        
        var linePlotData: [Double] = [1, 2, 3, 4, 5]// data for line plot
        var barPlotData: [Double] =  [1, 2, 3, 4, 5]// data for bar plot
        var xAxisLabels: [String] =  ["Jan", "Feb", "Mar", "Apr", "May"]// the labels along the x axis
        
        var numberOfPointsInGraph = 5
        
        override func viewDidLoad() {
            super.viewDidLoad()
            
            let graph = ScrollableGraphView(frame: self.view.frame, dataSource: self)
            
            // Graph Configuration
            // ###################
            
            graph.backgroundColor = UIColor.white
            graph.shouldAnimateOnStartup = true
            
            // Reference Lines
            // ###############
            
            let referenceLines = ReferenceLines()
            referenceLines.positionType = .relative
            referenceLines.relativePositions = [0, 0.5, 0.8, 0.9, 1]
            
            graph.addReferenceLines(referenceLines: referenceLines)
            
            // Adding Plots
            // ############
            
            let linePlot = LinePlot(identifier: "linePlot")
            linePlot.lineWidth = 5
            linePlot.lineColor = UIColor.black
            
            let barPlot = BarPlot(identifier: "barPlot")
            barPlot.barWidth = 20
            barPlot.barLineColor = UIColor.gray
            
            graph.addPlot(plot: linePlot)
            graph.addPlot(plot: barPlot)
            
            self.view.addSubview(graph)
        }
            
        // Implementation for ScrollableGraphViewDataSource protocol
        func value(forPlot plot: Plot, atIndex pointIndex: Int) -> Double {
            
            switch (plot.identifier) {
            case "linePlot":
                return linePlotData[pointIndex]
                break
            case "barPlot":
                return barPlotData[pointIndex]
                break
            }
        }
       
        func label(atIndex pointIndex: Int) -> String {
            return xAxisLabels[pointIndex]
        }
        
        func numberOfPoints() -> Int {
            return numberOfPointsInGraph
        }
    }
    
    
    
    opened by amirsiddi 3
  • Bar Chart customisations

    Bar Chart customisations

    Hello guys, i really like this library, but I would like if someone help me to config my chart with these options:

    1. Is there any way to add vertical gradient for bar plots?
    2. Is there any way to add a left padding between data points (left vertical panel) and the scroll area? I want to avoid overlapping bar plots with the left panel.
    3. Is there any way to add some vertical lines between bar plots?
    4. Is there any way to get rid of the small line from the left side of the numbers? There is tiny line which can make you think it's minus sign. Thanks in advance.

    Screenshot 2021-04-08 at 11 53 13

    opened by CristianSerea 0
  • Error installing ScrollableGraphView from Cocopod

    Error installing ScrollableGraphView from Cocopod

    [!] Error installing ScrollableGraphView [!] /usr/bin/git clone https://github.com/philackm/ScrollableGraphView.git /var/folders/fs/jk40yr1d4vjbyndwq8n0bb6h0000gn/T/d20200704-2926-1cer985 --template= --single-branch --depth 1 --branch 4.0.6

    Cloning into '/var/folders/fs/jk40yr1d4vjbyndwq8n0bb6h0000gn/T/d20200704-2926-1cer985'... error: RPC failed; curl 18 transfer closed with outstanding read data remaining fatal: the remote end hung up unexpectedly fatal: early EOF fatal: index-pack failed

    opened by banghuazhao 0
  • App crash on startup

    App crash on startup

    Hello. I used example with storyboard, copied the code vor view controller and storyboard and get in my project crash on the line - graphView.dataSource = self

    opened by ucelme 0
Owner
Phillip
Phillip
Simple and intuitive iOS chart library. Contribution graph, clock chart, and bar chart.

TEAChart Simple and intuitive iOS chart library, for Pomotodo app. Contribution graph, clock chart, and bar chart. Supports Storyboard and is fully ac

柳东原 · Dongyuan Liu 1.2k Nov 29, 2022
Simple iOS Application built using UIKit displaying the list of Cryptocurrencies and a detailed screen with a line graph.

CryptoViewer Simple iOS Application built using UIKit displaying the list of Cryptocurrencies and a detailed screen with a line graph. Home Screen: Di

null 0 Jun 14, 2022
Core Charts | Basic Scrollable Chart Library for iOS

Core Charts | Basic Chart Library for iOS HCoreBarChart VCoreBarChart Requirements Installation Usage Appearance Customization Getting Started You nee

Çağrı ÇOLAK 71 Nov 17, 2022
iOS/iPhone/iPad Chart, Graph. Event handling and animation supported.

#EChart A highly extendable, easy to use chart with event handling, animation supported. ##Test How To Use Download and run the EChartDemo project is

Scott Zhu 646 Dec 27, 2022
Infowind - An Open Graph Metadata extension for iOS, iPadOS & MacOS

Infowind ?? InfoWind is an Open Graph Protocol based Safari extension for iOS, i

Gokul Nair 0 Jun 22, 2022
SwiftyOpenGraph - A swift library that retrieves structured open graph data from webpages.

SwiftyOpenGraph Usage Initialization Base Properties Types Installation License Usage Initialization You use SwiftyOpenGraph by initializing OpenGraph

Quintschaf 1 Jan 6, 2022
Creates WordCloud type graph from a string or array of strings input.

CPTWordCloud Example To run the example project, clone the repo, and run pod install from the Example directory first. Requirements Installation CPTWo

Chronic Stim 1 Jan 7, 2022
Light weight charts view generater for iOS. Written in Swift.

# ###Light weight charts view generater for iOS. Written in Swift. Requirements iOS 8.0+ XCode 7.3+ Installation CocoaPods $ pod init specify it in yo

Recruit Holdings. Media Technology Lab 982 Nov 16, 2022
SwiftUICharts - A simple line and bar charting library that supports accessibility written using SwiftUI.

SwiftUICharts - A simple line and bar charting library that supports accessibility written using SwiftUI.

Majid Jabrayilov 1.4k Jan 9, 2023
Easy to use Spider (Radar) Chart library for iOS written in Swift.

DDSpiderChart Easy to use Spider (Radar) Chart library for iOS written in Swift. Requirements iOS 8.0+ / macOS 10.10+ / tvOS 9.0+ / watchOS 2.0+ Xcode

Deniz Adalar 82 Nov 14, 2022
Line Chart library for iOS written in Swift

Swift LineChart Usage var lineChart = LineChart() lineChart.addLine([3, 4, 9, 11, 13, 15]) Features Super simple Highly customizable Auto scaling Touc

Mirco Zeiss 601 Nov 15, 2022
Meet cute and very flexibility library for iOS application for different data view in one circle diagram.

SMDiagramViewSwift Meet cute and very flexibility library for iOS application for different data view in one circle diagram. The opportunity of transf

VRG Soft 42 Sep 17, 2022
A Fourier Series visualisation written in Swift/SwiftUI

Fourier Series Visualisation in SwiftUI This little app visualises different Fourier series using epicycles and a graph. The number of functions and t

Simon Stiefel 229 Jan 1, 2023
Flower-like chart written in Swift

FlowerChart - custom chart written in Swift Fully vector flower-shaped chart written in Swift Flower-shaped chart written in Swift, this repo is a sam

Alexander Telegin 15 Jun 9, 2021
Wrapper for the Prettier code formatter written in Swift

Prettier A wrapper for the Prettier code formatter written in Swift. The package

Simon Støvring 36 Dec 18, 2022
FlowerChart - custom chart written in Swift

FlowerChart - custom chart written in Swift Fully vector flower-shaped chart written in Swift Flower-shaped chart written in Swift, this repo is a sam

Alexander Telegin 15 Jun 9, 2021
ANDLineChartView is easy to use view-based class for displaying animated line chart.

ANDLineChartView for iOS ANDLineChartView is easy to use view-based class for displaying animated line chart. Usage API is simple. Just implement foll

Andrzej Naglik 421 Dec 11, 2022
A simple and beautiful chart lib used in Piner and CoinsMan for iOS(https://github.com/kevinzhow/PNChart) Swift Implementation

PNChart-Swift PNChart(https://github.com/kevinzhow/PNChart) Swift Implementation Installation This isn't on CocoaPods yet, so to install, add this to

Kevin 1.4k Nov 7, 2022
An interactive line chart written in SwiftUI with many customizations.

LineChartView LineChartView is a Swift Package written in SwiftUI to add a line chart to your app. It has many available customizations and is interac

Jonathan Gander 59 Dec 10, 2022