Live data on line chart

[Alexander]

Hello!

I just started to explore the world of your amazing library. Thanks a lot for implementing.

I have a trouble with animation. Could you please help me with it?

I want to show live data with animation for every new point. Chart is blinkingbefore every animation. I've captured a video: https://www.youtube.com/watch?v=mQ5A78P8oXk

Code:

import UIKit
import SwiftyTimer


class NewChartViewController: UIViewController, TKChartDelegate {
    @IBOutlet weak var chart: TKChart!

    var timer: NSTimer!
    var dataPoints = [TKChartDataPoint]()

    override func viewDidLoad() {
        super.viewDidLoad()

        configureChart()
    }

    override func viewDidAppear(animated: Bool) {
        super.viewDidAppear(animated)

        configureTimer()
    }

    func chart(chart: TKChart, animationForSeries series: TKChartSeries, withState state: TKChartSeriesRenderState, inRect rect: CGRect) -> CAAnimation? {
        var animations = [CAAnimation]()


        if (state.points.count() <= 2) {
            return nil
        }

        let indexOfLast = state.points.count() - 1
        let indexOfLastButOne = state.points.count() - 2

        let lastPoint = state.points[indexOfLast] as! TKChartVisualPoint
        let lastButOnePoint = state.points[indexOfLastButOne] as! TKChartVisualPoint

        let pointKeyPath = state.animationKeyPathForPointAtIndex(indexOfLast)!

        let animationX = CABasicAnimation(keyPath: pointKeyPath + ".x")
        animationX.fromValue = lastButOnePoint.x
        animationX.toValue = lastPoint.x
        animationX.duration = 0.4
        animationX.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)
        animations.append(animationX)

        let animationY = CABasicAnimation(keyPath: pointKeyPath + ".y")
        animationY.fromValue = lastButOnePoint.y
        animationY.toValue = lastPoint.y
        animationY.duration = 0.4
        animationY.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)
        animations.append(animationY)

        let group = CAAnimationGroup()
        group.duration = 0.4
        group.animations = animations
        return group
    }

    private func configureTimer() {
        timer = NSTimer.every(1.second) {
            self.updateChart()
        }
    }

    private func configureChart() {
        chart.delegate = self
        chart.allowAnimations = true

        let periodAxis = TKChartDateTimeAxis()
        chart.xAxis = periodAxis
    }

    private func updateChart () -> Void {
        chart.removeAllData()
        let dataPoint = TKChartDataPoint(x: NSDate(), y: Int(arc4random() % 70))
        dataPoints.append(dataPoint)

        chart.yAxis = TKChartNumericAxis(minimum: 0, andMaximum: 100)
        let firstPoint = dataPoints[0]
        let lastPoint = dataPoints[dataPoints.count - 1]
        let xAxis = TKChartDateTimeAxis(minimumDate: firstPoint.dataXValue as! NSDate, andMaximumDate: (lastPoint.dataXValue as! NSDate).dateByAddingMinutes(1))
        xAxis.style.labelStyle.fitMode = TKChartAxisLabelFitMode.None
        xAxis.style.majorTickStyle.maxTickClippingMode = TKChartAxisClippingMode.Visible
        xAxis.majorTickIntervalUnit = TKChartDateTimeAxisIntervalUnit.Seconds
        chart.xAxis = xAxis

        chart.addSeries(TKChartLineSeries(items: dataPoints))
        chart.reloadData()
    }
}

[Sophi]

Hi Alexander,

You can check out our SDK examples, where we have shown how to handle live data animation. Here is link to the example so you can use it as a reference for your project. 

You can clone the repo and run the examples, just do not forget to remove the old references to TelerikUI and add reference to your installation of the framework.

In case you have any further questions, do not hesitate to contact us.

Regards,
Sophi
Telerik

[Alexander]

Thank you for your answer.

I'm talking about your example. My code based on it. Please take a look at captured video and code.

Surprisingly, when I'm adding many points per second to the chart without animation it works like a charm. But when I'm trying to add points with animation even if it's very slow I can see this glitch.

[Adrian]

Hi, Alexander,

I apologize for the late reply. 
I tried to reproduce this glitch but I couldn't. Could you please send me your project where the glitch occurs so I can debug what might be causing it? I am looking forward to your reply.

Regards,
Adrian
Telerik