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;
}
Related
Edit: Show what the mapManager.filter() method does.
I have an Android app with ~20k markers being draw on the map and with filters option so the markers are being drawn and remove a lot.
I'm currently using this clustering library because it's way more efficient for displaying a large amount of markers than the classic google map library. But it's not supported and hasn't been updated since 3 years and i haven't found any alternatives.
Here is a video of the bug.
Here is my code that is call when i click on an filtering option in my app:
private void filter(){
//currentMapManager contain all the filters option and also the array list
//of the unfiltered markers (~20,000 markers)
//it's filter method retrieve the current filtering option enable (marker type, and other specs)
//And return markers from the full arraylist that match those filters options.
ArrayList<MarkerModel> filteredList = currentMapManager.filter(currentMapManager.getAllMarkers());
if (clusterManager != null) {
clusterManager.setItems(new ArrayList<>());
clusterManager.onCameraIdle();
clusterManager.setItems(filteredList);
clusterManager.onCameraIdle();
}
Here the mapManager.filter() method.
public ArrayList<MarkerModel> filter(List<MarkerModel> currentMarkers) {
ArrayList<Object> filtersArray = filters.getFilters();
/* filtersArray is an array like this :
* ['type', ['typeFilter1', 'typeFilter2'],
* 'date', dateTimestamp,
* 'withPictures', true,
* ....]
*/
return filter(currentMarkers, filtersArray);
}
private ArrayList<MarkerModel> filter(List<MarkerModel> currentMarkers,
ArrayList<Object> fieldsAndValues) {
if (fieldsAndValues.size() % 2 == 1) {
throw new IllegalArgumentException("Missing value in call to filterList().
There must be an even number of arguments that alternate between
field names and values");
} else {
//Here the arraylist that we are returning
ArrayList<MarkerModel> filteredMarkers = new ArrayList<>();
List<Object> argumentList = new ArrayList();
Collections.addAll(argumentList, fieldsAndValues);
if (!currentMarkers.isEmpty()) {
for (int j = 0; j < currentMarkers.size(); j++) {
MarkerModel marker = currentMarkers.get(j);
boolean isInFilter = true;
//Check fieldsAndValue filters...
//If isInFilter stay to true we
filteredMarkers.add(marker);
}
}
return filteredMarkers;
}
}
I think the problem is that the cluster library is not supposed to have so much redrawn and it broke at some point from reading and working on 20k items arraylist.
I have look through all the forks branch of this library and look/try to understand the library source code but hasn't find any solution at my problem...
If you need other part of my source code to understand more tell me i will add it.
Thanks a lot if you can help me i have been struggling a lot with this issue...
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 want to add the following sort of data (can be any number of such pairs under 1000) to the newly introduced timeseries chart in MPAndroidChart library
Value : 50.0 at 1472112259
Value : 49.0 at 1472112294
Value : 50.0 at 1472112329
Value : 50.0 at 1472112360
Value : 50.0 at 1472112392
The following data will be fetched from the array.
Right now, I guess there is some mess up with the timestamps.
Here is the complete code: https://gist.github.com/utkarshns/e1723dcc57022fcd392bc3b127b6c898
UNIX timestamps will be parsed to required time format after I can successfully add values to the graph.
Currently, the problem I face is that the timestamps probably get clipped and values are overwritten which leads to a pretty messed up graph with really weird x-axis values.
Update:
Screenshots:
http://imgur.com/a/dGfmz
The problem is that Float values can't hold very big numbers and still be accurate, so you need a separate List with these timestamp values. BigDecimal should be ok for this purpose. Your distances must be in accordance to the time gaps between your events. Just iterate from the start date to end date keeping count of how many timestamps you have and add Entry with count from the timestamps you wish your value to be.
Long myValues[] = {1472112259L, 1472112294L, 1472112329L, 1472112360L, 1472112392L};// your values
ArrayList<Entry> values = new ArrayList<>();// Entry List
Long start = 1472112259L;//start
Long end = 1472112392L;//end
List<BigDecimal> mList = new ArrayList<>(); //Decimal list which holds timestamps
int count = 0;
for (Long i = start; i <= end; i++) {
mList.add(new BigDecimal(i));
if (myValues.equals(i)) {
values.add(new Entry(count, 50));
}
count++;//always increment
}
And your ValueFormatter should look like this:
AxisValueFormatter() {
private FormattedStringCache.Generic<Long, Date> mFormattedStringCache = new FormattedStringCache.Generic<>(new SimpleDateFormat("HH:mm:ss"));
#Override
public String getFormattedValue ( float value, AxisBase axis){
return mFormattedStringCache.getFormattedValue(new Date(mList.get((int)value).longValueExact()*1000), value);
}
#Override
public int getDecimalDigits () {
return 0;
}
}
If you have any question or something is unclear I'll be happy to help.
[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();
}
}