Realtime Data chart refresh

[andrealufino]

I'm using the LineChartView to display data that is continuously received (every 0.2 seconds usually, the time could change). My problem is : how do I refresh the chart correctly? At the moment, I have this code to reload :

lineChart.data?.notifyDataChanged()
lineChart.notifyDataSetChanged()
lineChart.animate(xAxisDuration: 0.01)

I'm using the lineChart.animate(xAxisDuration: 0.01) to redraw (refresh) the chart every time I receive new samples. The reload animation is not smooth and it happens using an animation, a workaround basically. How can I achieve the same effect, but in the correct way?

As you can see in issue number #2857 , the invalidate() method is missing.

[thierryH91200]

LineChartRealTimeViewController.zip

a little help in the zip

[andrealufino]

Interesting. Basically, I wrote the same lines of yours, without these :

chartView.xAxis.resetCustomAxisMax()
chartView.xAxis.resetCustomAxisMin()

Why are these lines necessary?

Then, as I can see, you didn't refresh the chart. There's no call to invalidate() an no way to correctly refresh the chart.

ps: What I also wanted is to move the chart always to the last added entry, basically an auto scroll of the chart every time a new data is added.

[thierryH91200]

these lines are necessary

chartView.xAxis.resetCustomAxisMax()
chartView.xAxis.resetCustomAxisMin()

because of these lines

there will be no lag / not autoscroll and it is the catastrophe

let xAxis = chartView.xAxis
        xAxis.labelPosition = .bottom
        xAxis.axisMinimum = 0.0
        xAxis.axisMaximum = 50.0

65 is the time

[andrealufino]

I didn't understand what you mean saying

there will be no lag / not autoscroll and it is the catastrophe

The procedure I'm using to update the chart is correct, but the chart isn't refreshing itself if I don't call animate method because of the lack of the invalidate() one. How the reset of the x axis could help in refreshing the chart?

[thierryH91200]

let xAxis = chartView.xAxis
        xAxis.labelPosition = .bottom
        xAxis.axisMinimum = 0.0
        xAxis.axisMaximum = 50.0

axisMinimum and axisMaximum are fixed values

I promise you that it works very well

try my demo on my account

[andrealufino]

I've just downloaded your demo, but I'm not able to compile. The Chart.xcproj file is missing. However, I've tried as you say, but nothing to do. Could you please contact me at my email (you find it on my profile)? If we find a solution, I will post it here later

[pingd]

What I do is:

• add/update entries,
• notifyDataChanged,
• notifyDataSetChanged,
• either move to the most recent entry (moveViewToX) or update view with setNeedsDisplay.

Here's a code snippet:

        // add/update entries; if there is a new entry, set needToMove to true

        data.notifyDataChanged()

        chartView.notifyDataSetChanged()

        if needToMove {
            chartView.moveViewToX(Double(data.getDataSetByIndex(0).entryCount - 1))
        } else {
            chartView.setNeedsDisplay()
        }

[andrealufino]

I did exactly what you said, but nothing to do. The chart is not automatically refreshing.

[thierryH91200]

here is a little project

realTime.zip

[andrealufino]

I've seen you example project and I've run it. Everything is perfect, but you're doing something a bit different from what I need (and from what I think usually should be done when drawing a chart). With these lines :

if yEntries.count >= Int(50 / step)
{
    yEntries.removeFirst()
}

you're removing values from the entries. In this way user isn't able to drag the chart to see old values because they're basically not present. That's why your chart is "moving". Because you always have a set of values with a range of 50.0 and, when you reach 51, you remove the first and reset the x axis minimum and maximum.

What I want to do is to be able to drag the chart to see old values and, when I active real time mode, the chart should move itself to the maximum x value, smoothly. Your way is a good compromise I think.

ps: Thanks for sending me a sample project 👍

[thierryH91200]

I noticed your remarks

realTime.zip

[andrealufino]

Great example. There is only one "problem" left. I noticed your chart is draggable only when zoomed and only between a range of 50 (30-80, 0-50, 90-140). How can I make it draggable for the whole data set?

[liuxuan30]

Sorry to jump in, but this thread seems a good example whoever needs real time update should look at this. But Seems this cannot be pinned top. use a label for now

[Mouns31]

Hello everybody, I have an issue with the refresh of line Chart and I use mp android chart library. I want to display real time data. Can you help me please ? Is it possible to have a look to the solution proposed above please ?

Thanks for your support

Regards