How to make a realtime rollingwindow graph using MPAndroidChart

Question

[also posted on MPAndroidChart's Github]

I need realtime graph with a rolling windows, that's when I ran into 'problems'. Adding data is no problem, but after adding data with an Xvalue(index) that's higher than the current width of the graph the graph doesn't autoscroll because it don't seem to be able to always display [X] Xvalues.

Example of issue: The result in graph 3 is not what I want for displaying realtime data. A scrollingwindow is much more usefull. So I tried to archieve this..

My working 'solution' was to remove the first Xvalue, add a new one and move all Xindexes of all Entries on screen one to the left. The result is some code like this:

int GRAPH_WIDTH = 10;
LineData lineData = chart.getData();
LineDataSet lineDataSet = lineData.getDataSetByIndex(0);                        
int count = lineDataSet.getEntryCount();

// Make rolling window
if (lineData.getXValCount() <= count) {
    // Remove/Add XVal
    lineData.getXVals().add("" + count);
    lineData.getXVals().remove(0);

    // Move all entries 1 to the left..
    for (int i=0; i < count; i++) {
        Entry e = lineDataSet.getEntryForXIndex(i);
        if (e==null) continue;

        e.setXIndex(e.getXIndex() - 1);
    }

    // Set correct index to add value
    count = GRAPH_WIDTH; 
}

// Add new value
lineData.addEntry(new Entry([random value], count), 0);

// Make sure to draw
chart.notifyDataSetChanged();
chart.invalidate();

This works quite well actually (as seen in this video here ), but I feel like there must be an easier way to do this. Maybe I overlooked some API window/scrolling.. But if this is the 'right' way to archieve this result then it would be an enhancement to add support for this kind of graphs in your library.

Answer 1

Thank you for the video. I am surprised you found a workaround that is rather complicated but works quite well.

Unfortunately this is currently the only way to achieve what you want. I will work on making this easier soon probably reusing some of your code.

Also take a look at these two methods:

setScaleMinima(...) centerViewPort(...)