最新の値をグラフに追加していく方法

Question

###前提・実現したいこと
X-codeにてswiftを用いて、心電図の状態をリアルタイムで表示するものを作成したく思っております。

###発生している問題・エラーメッセージ
現状下記のようなグラフを表示させるとこまで辿り着くことができました（参照ライブラリ）。ただ、リアルタイムで最新の値をグラフに追加していくグラフをどのように実装すべきかがわかりません。

###該当のソースコード

import UIKit
import ScrollableGraphView

class EcgDailyViewController: UIViewController {
    
    @IBOutlet weak var ecgGraph: UIView!
    
    var graphView = ScrollableGraphView()
    var label = UILabel()
    let numberOfDataItems = 29
    lazy var data: [Double] = self.generateRandomData(self.numberOfDataItems, max: 50)
    lazy var labels: [String] = self.generateSequentialLabels(self.numberOfDataItems, text: "Time")
    
    
    override func viewDidLoad() {
        super.viewDidLoad()

        createDarkGraph()
        graphView.set(data: data, withLabels: labels)
        self.ecgGraph.clipsToBounds = true
        self.ecgGraph.addSubview(graphView)
        
    }
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        
        let rect = CGRect(x:0, y:0, width:ecgGraph.frame.width, height:ecgGraph.frame.height) //Swift3.0
        graphView.frame = rect
    }
    
    fileprivate func createDarkGraph() {
        
        graphView.backgroundFillColor = UIColor.colorFromHex(hexString: "#333333")
        
        graphView.lineWidth = 1
        graphView.lineColor = UIColor.colorFromHex(hexString: "#777777")
        graphView.lineStyle = ScrollableGraphViewLineStyle.smooth
        
        graphView.shouldFill = true
        graphView.fillType = ScrollableGraphViewFillType.gradient
        graphView.fillColor = UIColor.colorFromHex(hexString: "#555555")
        graphView.fillGradientType = ScrollableGraphViewGradientType.linear
        graphView.fillGradientStartColor = UIColor.colorFromHex(hexString: "#555555")
        graphView.fillGradientEndColor = UIColor.colorFromHex(hexString: "#444444")
        
        graphView.dataPointSpacing = 80
        graphView.dataPointSize = 2
        graphView.dataPointFillColor = UIColor.white
        
        graphView.referenceLineLabelFont = UIFont.boldSystemFont(ofSize: 8)
        graphView.referenceLineColor = UIColor.white.withAlphaComponent(0.2)
        graphView.referenceLineLabelColor = UIColor.white
        graphView.numberOfIntermediateReferenceLines = 5
        graphView.dataPointLabelColor = UIColor.white.withAlphaComponent(0.5)
        
        graphView.shouldAnimateOnStartup = true
        graphView.shouldAdaptRange = true
        graphView.adaptAnimationType = ScrollableGraphViewAnimationType.elastic
        graphView.animationDuration = 1.5
        graphView.rangeMax = 50
        graphView.shouldRangeAlwaysStartAtZero = true
        
        return
    }
    
    private func generateRandomData(_ numberOfItems: Int, max: Double) -> [Double] {
        var data = [Double]()
        for _ in 0 ..< numberOfItems {
            var randomNumber = Double(arc4random()).truncatingRemainder(dividingBy: max)
            
            if(arc4random() % 100 < 10) {
                randomNumber *= 3
            }
            
            data.append(randomNumber)
        }
        return data
    }
    
    private func generateSequentialLabels(_ numberOfItems: Int, text: String) -> [String] {
        var labels = [String]()
        for i in 0 ..< numberOfItems {
            labels.append("\(text) \(i+1)")
        }
        return labels
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
    

}

Answer 1

データを追加してセットし直してやればグラフにも追加できますが、スクロール位置が先頭に戻ったり、アニメーションしたりします。

//データ追加
data.append(Double(arc4random_uniform(50)))
labels.append("Time \(labels.count+1)")

//アニメーションを一旦off
graphView.shouldAnimateOnStartup = false //※追記

//こうしておくとグラフ描画時に右端が表示される
graphView.direction = .RightToLeft //※追記

//データ再セット
graphView.setData(data, withLabels: labels)

//アニメーションをonに戻す
graphView.shouldAnimateOnStartup = true //※追記

余計なことをせずにグラフをリフレッシュするような関数があるのではないかと思うので探してみて下さい。

【追記】
ということで、少し探してみたのですが見つからなかったので、それっぽくなるように追記しておきました。

Comments

[PYPP]

ご返信いただき誠にありがとうございます。他のコードをどこに記載すべきかはわかったと思うのですが、下記の2行は新しくメソッドを作成しそこで動作させる形でしょうか？
------------------------------------------------------------------------------
graphView.setData(data, withLabels: labels)
graphView.shouldAnimateOnStartup = true
------------------------------------------------------------------------------

他のコード文は下記の認識です。
------------------------------------------------------------------------------
data.append(Double(arc4random_uniform(50)))　//generateRandomDataメソッドを修正
labels.append("Time \(labels.count+1)")　//generateSequentialLabelsメソッドを修正
graphView.shouldAnimateOnStartup = false　//createDarkGraph()メソッドを修正
graphView.direction = .RightToLeft　//createDarkGraph()メソッドに追記
------------------------------------------------------------------------------

[fuzzball]

回答に書いたコードは一連の動作です。「データ追加」から「アニメーションをonに戻す」まで、一気に実行して下さい。（既存のコードに対する修正ではありません）

[PYPP]

ご返信いただきありがとうございます。新しいメソッドrecreateDarkGraph()を作成し、viewDidLoad() メソッドにrecreateDarkGraph()を記載するイメージでしょうか？

[fuzzball]

後からデータを追加したいのではないのでしょうか？viewDidLoad()だと、起動時に追加することになりますが。データを追加したいタイミングでrecreateDarkGraph()を呼び出して下さい。

[PYPP]

その通りです。それにて実行してみます。

Answer 2

動的の意味が分からないので、推測で書きますが、何らかの方法で心電図の最新の値をグラフに追加していきたいということであれば、CoreGraphicsを使って２つの点(x0,x0),(x1,y1)の間を直線で描画するのを繰り返すのが一番簡単だと思います。
一定間隔で、新たなデータセットで毎回再描画すればよいです。

Comments

[PYPP]

ご回答いただきありがとうございます。推測された通り、最新の値をグラフに追加していきたいと考えています。現在使っているライブラリを用いずにCoreGraphicsでということでしょうか？

[pebble8888]

そうですね。
まずはfuzzballさんの回答の方を試すのがよいと思います。
参照ライブラリは内部的にCoreGraphicsを使っているようですので、
更新頻度とデータ量が多くて、要求に合わなければ、そのライブラリを修正していくのがよいかもです。

[PYPP]

ありがとうございます。承知しました。現在使用しているライブラリを修正しつつ、難しそうであれば他の方法を取る形にしてみようかと思います。