Live data on line chart

4 posts, 0 answers
  1. Alexander
    Alexander avatar
    2 posts
    Member since:
    Jun 2012

    Posted 01 Jun Link to this post

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

  2. Sophi
    Admin
    Sophi avatar
    99 posts

    Posted 06 Jun Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. DevCraft banner
  4. Alexander
    Alexander avatar
    2 posts
    Member since:
    Jun 2012

    Posted 06 Jun Link to this post

    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.
  5. Adrian
    Admin
    Adrian avatar
    167 posts

    Posted 09 Jun Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
DevCraft banner