[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.
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(...)
I took your code and changed it a bit. It will only show up to GRAPH_WIDTH number of points at a time. Then it scrolls along deleting the older data. Useful if you're only interested in relatively recent data. Is that what you were going for?
public void addTimeEntry() {
String entry_date_time = new SimpleDateFormat("MMM d - HH:mm:ss").format(new Date());
LineData lineData = mChart.getData();
int GRAPH_WIDTH = 15;
if (lineData != null) {
LineDataSet set = lineData.getDataSetByIndex(0);
if (set == null) {
set = createSet();
lineData.addDataSet(set);
}
// Make rolling window
if (lineData.getXValCount() > GRAPH_WIDTH) {
lineData.getXVals().remove(0);
set.removeEntry(0);
lineData.getXVals().add(entry_date_time);
lineData.addEntry(new Entry((float) (Math.random() * 40) + 30f, GRAPH_WIDTH), 0);
// lineData.getXVals().add(entry_date_time);
// Move all entries 1 to the left..
for (int i=0; i < set.getEntryCount(); i++) {
Entry e = set.getEntryForXIndex(i);
if (e==null) continue;
e.setXIndex(e.getXIndex() - 1);
}
}
else{
lineData.getXVals().add(entry_date_time);
lineData.addEntry(new Entry((float) (Math.random() * 40) + 30f, lineData.getXValCount()-1), 0);
}
// let the chart know it's data has changed
mChart.notifyDataSetChanged();
mChart.invalidate();
}
}
Related
I need to draw graph like the image i have uploaded , i am using MP chart library and develop a graph but want to customize it according to my requirement but not able to find solution for my requirements my basic requirement is for x axis i want to show custom values at axis like 5-11 12-18 but i am passing value to x axis like this
private ArrayList<String> setXAxisValues() {
ArrayList<String> xVals = new ArrayList<String>();
xVals.add("10");
xVals.add("20");
xVals.add("30");
xVals.add("30.5");
xVals.add("40");
return xVals;
}
So it is showing x values like this 10 20 30 so on so i want my graph to be built upon using these x value which is happening right now but want to show custom value at bottom like 5-11 etc and this value is dynamic coming from Api response so please help me about this , Waiting for positive and early response Thanks in Advance
To format the x-axis values, you should use the setValueFormatter method which takes a callback interface were you have to implement the getFormattedValue method which is called before drawing the x-axis value.
xAxis.setValueFormatter((value, axis) -> {
String res = "";
try {
// get current position of x-axis
int currentPosition = (int) value;
// check if position between array bounds
if (currentPosition > -1 && currentPosition < maxSize) {
// get value from formatted values array
res = xVals.get(currentPosition);
}
} catch (Exception e) {
// handle exception
}
return res;
});
For line charts I find that if I have multiple y values for a single x, it works fine as long as it isn't the final x. If it's the final x, it only displays the first entry. Is there a known workaround for this?
Example:
//firstTimestamp is earlier than secondTimestamp
data.add(new Entry(firstTimestamp, 10));
data.add(new Entry(firstTimestamp, 20)); //won't show unless you uncomment below
data.add(new Entry(firstTimestamp, 30)); //won't show unless you uncomment below
//data.add(new Entry(secondTimestamp, 40));
Graph when second timestamp commented out:
Graph with second timestamp uncommented (note that the 20 and 30 are now included, whereas they weren't before):
Edit:
I believe I've found the cause of this problem and can fix it in the following way, by changing
public abstract class BarLineScatterCandleBubbleRenderer extends DataRenderer {
// ... lines removed ... //
public void set(BarLineScatterCandleBubbleDataProvider chart, IBarLineScatterCandleBubbleDataSet dataSet) {
float phaseX = Math.max(0.f, Math.min(1.f, mAnimator.getPhaseX()));
float low = chart.getLowestVisibleX();
float high = chart.getHighestVisibleX();
Entry entryFrom = dataSet.getEntryForXValue(low, Float.NaN, DataSet.Rounding.DOWN);
Entry entryTo = dataSet.getEntryForXValue(high, Float.NaN, DataSet.Rounding.UP);
min = entryFrom == null ? 0 : dataSet.getEntryIndex(entryFrom);
max = entryTo == null ? 0 : dataSet.getEntryIndex(entryTo);
range = (int) ((max - min) * phaseX);
}
// ... lines removed ... //
}
to this, which I believe will resolve the issue:
public abstract class BarLineScatterCandleBubbleRenderer extends DataRenderer {
// ... lines removed ... //
public void set(BarLineScatterCandleBubbleDataProvider chart, IBarLineScatterCandleBubbleDataSet dataSet) {
float phaseX = Math.max(0.f, Math.min(1.f, mAnimator.getPhaseX()));
float low = chart.getLowestVisibleX();
float high = chart.getHighestVisibleX();
Entry entryFrom = dataSet.getEntryForXValue(low, Float.NaN, DataSet.Rounding.DOWN);
//my edits here
int indexTo = dataset.getEntryIndex(high, Float.NaN, DataSet.Rounding.UP);
List<Entry> values = dataset.getValues();
while (indexTo + 1 < values.size() && values.get(indexTo + 1).getX() == high) {
indexTo++;
}
Entry entryTo = values.get(indexTo);
//my edits end here
min = entryFrom == null ? 0 : dataSet.getEntryIndex(entryFrom);
max = entryTo == null ? 0 : dataSet.getEntryIndex(entryTo);
range = (int) ((max - min) * phaseX);
}
// ... lines removed ... //
}
How can I subclass this / use these edits?
Please note that the only supported use case for LineChart entries is adding them ordered ascending. This is documented in the wiki:
Please be aware that this library does not officially support drawing LineChart data from an Entry list not sorted by the x-position of the entries in ascending manner.
The reason for this is that the renderer is optimised for unique ascending order entries.
If you want to get around this, I suggest you have a look at the source for LineChartRenderer. You will have to place breakpoints and find the issue that is causing it to render in the way you have demonstrated. Then you can consider subclassing the renderer to meet your requirement. Essentially you would be removing the optimisation in order to support the extra use case (non-unique values).
EDIT: If you are unwilling to manipulate the existing object graph to obtain the behaviour you want, you might want to consider forking the library with the change. Then you can build a .jar of your fork and include it in your Android project. Refer to the instructions in the answers below for the same:
How to make a .jar from an Android Studio project
How to add a .jar as a library in Android Studio
I am working on an Android application which is plotting the heart rate using a line graph. I am receiving a packet of data via UDP broadcast in every 65 milliseconds which I need to plot. The graph rendering is very smooth for the first 2-3 minutes and after that it getting slower. Could anyone help me to figure out what makes it getting slow over time? How to free up the memory while plotting large data?
private void addEntryGraph01(int ch0[], LineChart chart) {
LineData data = chart.getLineData();
if (data != null) {
ILineDataSet set = data.getDataSetByIndex(0);
if (set == null) {
set = createSet();
data.addDataSet(set);
}
data.addXValue("");
for (int i = 0; i < ch0.length; i++)
data.addEntry(new Entry((float) (ch0[i]), set.getEntryCount()), 0);
chart.notifyDataSetChanged();
chart.setVisibleXRange(50, 50);
chart.moveViewToX(data.getXValCount() - 10);
return;
}
}
private LineDataSet createSet() {
LineDataSet set = new LineDataSet(null, "");
set.setDrawCubic(true);
set.setDrawValues(false);
set.setCubicIntensity(0.1f);
set.setAxisDependency(YAxis.AxisDependency.LEFT);
set.setColor(ColorTemplate.getHoloBlue());
set.setCircleColor(ColorTemplate.getHoloBlue());
set.setLineWidth(1f);
set.setDrawCircles(false);
set.setFillAlpha(65);
set.setFillColor(ColorTemplate.getHoloBlue());
set.setHighLightColor(Color.rgb(244, 117, 177));
set.setValueTextColor(Color.WHITE);
set.setValueTextSize(10f);
return set;
}
We ran a few tests to compare performance of various Android Charting Libraries here, and MPAndroidChart came out second, but SciChart for Android was first by a wide margin.
This is a new (commercial) charting component tailored for real-time use in Android Apps and Embedded Systems. It's a few days away from release so not available just yet but will be extremely soon!
Disclosure: Please be advised I work on the SciChart Android project.
I am investigating MPAndroidChart for usage in my company's Android and iOS application and I have found a problem that I need a solution to in order to be able to use this framework.
The application will mostly use the Line Chart functionality and the supplied data can contain NULL entries. I have seen other posts that discusses this matter and apparently there is no solution to showing NULL values yet. MPAndroidChart with null values
The author suggests simply not adding the data point to the set, but in my case it's very important that there is a "hole" in the graph were there is more than two consecutive NULL values (or however to represent it) i.e that the graph is not continous between two points with NULL values in between. Is there any way I can accomplish this with this framework?
I have been looking into the possibility of separating the data points into different data sets, but it seems like kind of a hack.
Thank you!
Dataset example:
[1 2 10 NULL NULL NULL 20 25 30]
The Line must NOT connect the numbers 10 and 20.
This is what I ended up coming up with to solve this - for anyone in the future. It iterates through and creates new entries in a data set until it hits a null value, and then it creates data sets with "fake" entries that use a boolean in the entry constructor. Boolean can be found from
"entry.getData()"
and you can then you can use this to set that Dataset to not be visible
"mLineDataSet.setVisible(false);"
Note: Do not try to set Dataset Color to transparent - the library has a bug where if certain entries are null the graph doesn't even appear.
private void createDataSets() {
for (int index = 0; index < mGraph.getGraphDataSets().size(); index++) {
lastIndexCreated = 0;
final GraphDataSet mDataSet = mGraph.getGraphDataSets().get(index);
final ArrayList<Entry> mEntries = getEntries(mDataSet.getYValues(), lastIndexCreated);
final LineDataSet mLineDataSet = getDataSet(mEntries, mDataSet, color);
mGraphLineData.addDataSet(mLineDataSet);
lastIndexCreated = mEntries.size() - 1;
while (lastIndexCreated < mDataSet.getYValues().size() - 1) {
final LineDataSet set = getDataSet(mEntriesSet, mDataSet, colorSecondary);
if (mEntriesSet.size() != 0)
mGraphLineData.addDataSet(set);
lastIndexCreated = (int) mEntriesSet.get(mEntriesSet.size() - 1).getX();
}
}
}
private ArrayList<Entry> getEntries(final List<Float> yValues, final int firstValueIndex) {
final ArrayList<Entry> mEntries = new ArrayList<>();
for (int i = firstValueIndex; i < yValues.size(); i++) {
if (yValues.get(i) != null)
//boolean here is false means that dataset is not fake and should be shown
mEntries.add(new Entry(i, yValues.get(i), false));
else if (firstValueIndex == i) {
//add a "Fake" data entry, and use mEntry.getData to set line to not be visible.
mEntries.add(new Entry(i, 0, true));
break;
} else {
break;
}
}
return mEntries;
}
I have a 10-field average lap calculator. However, in testing, someone said they normally only run X laps in practice, vs. 10 (let's say 7).
I think I could use an if statement, but there'd be at least 10 of them and a bunch of clumsy code, and I'm not sure on arrays/switch statements exactly. I think all of those might be possible, but my low level of experience has yet to fully comprehend these useful tools.
CURRENT CODE:
double tenLapAvgVar = ((lap1Var + lap2Var + lap3Var + lap4Var + lap5Var + lap6Var + lap7Var + lap8Var + lap9Var + lap10Var) / 10);
So essentially, if someone leaves a field or fields blank, I want to calculate the average based on the populated fields, not 10 (if they leave 3 fields blank, calculate based on 7, for instance). Any help you guys could provide would be much appreciated, thanks!
You could have an ArrayList<EditText> object and a method which iterates over it and adds up the values. Something like:
public double getLapAverage()
{
int noOfCompletedLaps = 0;
double lapAve = 0;
double lapsTotal = 0;
for(EditText text : textBoxes)
{
if(text.getText().toString().length() > 0)
{
//psuedo code, and assuming text is numerical
lapsTotal += Double.parse(text.getText().toString());
noOfCompletedLaps++;
}
}
if( noOfCompletedLaps > 0)
{
lapAve = lapsTotal / noOfCompletedLaps;
}
return lapAve;
}
Maybe it would be better if you used an array instead of 10 different variables.
Then you can use a for statement and initialize them to 0, afterwords let the user fill the array and count how many are not zero.
Finally sum up all the array and divide by the count you previously calculated.