PhilJay / MPAndroidChart

A powerful 🚀 Android chart view / graph view library, supporting line- bar- pie- radar- bubble- and candlestick charts as well as scaling, panning and animations.
Other
37.64k stars 9.02k forks source link

How to make a realtime rollingwindow graph #314

Closed PieterAelse closed 9 years ago

PieterAelse commented 9 years ago

Loving the looks and usability of this library!

But I needed a 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: rolling_window_chart 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.

PhilJay commented 9 years ago

Check this out: https://github.com/PhilJay/MPAndroidChart/blob/master/MPChartExample/src/com/xxmassdeveloper/mpchartexample/RealtimeLineChartActivity.java

The feature you are describing should now be possible.

PieterAelse commented 9 years ago

Works good! Thanks for making this possible :)

One issue I'm currently struggling with regarding this is that after I do a clear (chart.clear()) and re-initialize my linedata+set just like before, I end up with a smaller viewport than the current XValuesCount.

If I clear when moveViewToX hasn't been called yet (my entryset is smaller than XValuesCount) the clear works as expected and before.

I tried using moveViewToX(0), fitScreen and setVisibleXRange or a combination of these. (Also setVisibleXRange is the maximum visible X, I'm missing a minimum)

Examples where I'm displaying the last 10 values of my realtime data and I clear: 1) if entrySet < 10, clear works fine 2) if entrySet > 10, thus moveViewToX() is used, I end up seeing X-range from 3-5 till 10, missing the first values in the current viewport (although I can scroll back to 0 ofcourse) 3) if entrySet > 10 and I clear + use moveViewToX(0) I end up with seeing X-range from 0 to 5-10, sometimes even 0 to 1! Also here I can scroll forward until x=10, but I want to see 0-10 in the starting viewport after clearing.

My guess is something extra needs to be reset, since this problem only occurs when moveViewToX is called in the past.

Please let me know if any further testing/explaining or a new issue is needed for this!

PieterAelse commented 9 years ago

After further investigation I've made a new issue regarding the comment above: https://github.com/PhilJay/MPAndroidChart/issues/431

stephenjen commented 9 years ago

In the RealTime Chart example, I've enabled the thread to addEntry(), and within addEntry() I've uncommented mChart.invalidate();. So now, the x axis scales until entry 121 is reach, after which the chart always displays the latest 120 entries. Is there a way to always display the full x axis, even when the number of entries is less than 120 (no scaling effect)?

sushant7387 commented 8 years ago

my requirement is display yahoo finance live trading graph in android app

Sahil19oz commented 6 years ago

hello there,im trying to plot the graph but im getting many errors ,like cannot import github and all,can you please help?