Develop Reference

Horizontal Label problem with GraphView while scrolling

I am facing some weird problems with my (Line) GraphView!
To explain it a bit better I'll add a pic that shows what happens when I start scrolling horizontal (vertical scrolling is not needed).
The thing is:
The DataPoints are displayed correctly, but not my labels! I wrote the correct label in red color into the pictures above!
Whenever I start scrolling the labels start to "jump" around weirdly.
The DataPoints are received from a SharedPreference file with String/Integer pairs [Strings are always MMMyyyy (f.e. "Mar2020")]
I get the pairs out of my SP-file, put the Strings as static labels into my graph use the DataPoints in this way "logical" way (not the actual code!)
DataPoint[0] = (0, valueOfKey0)
DataPoint[1] = (1, valueOfKey1)
Here is the code how the graph is called for / drawn in the Activity
private void setupGraph(final GraphView graph, String subName){
GraphDataHelper graphDataHelper = new GraphDataHelper(mContext);
LineGraphSeries<DataPoint> series;
/*Have to call .removeAllSeries to draw each graph individually
* Otherwise they will be drawn over another!*/
graph.removeAllSeries();
/*Gets Values from each Sub
* --> Gets values form each key/value pair of specific SharedPreference-file
* --> sets values in order (0, 1, 2,... n)*/
series = new LineGraphSeries<DataPoint>(graphDataHelper.generateGraphData(subName));
series.setDrawDataPoints(true);
series.setColor(getResources().getColor(R.color.casualWhite));
series.setAnimated(true);
graph.addSeries(series);
/*Fill Labels for X-Axis:
* Get the specific Monthly-Keys for the choosen Sub
* In special cases extra rules are declared in .getSpecificSubMonthKeys() method
* Put all entries of ArrayList in Array (StaticLabelsFormatter only works with "normal" Array)*/
ArrayList<String> array_paths = graphDataHelper.getSpecificSubMonthKeys(subName);
int size = array_paths.size();
String[] paths = new String[size];
for (int i=0; i<size; i++){
paths[i] = array_paths.get(i);
}
StaticLabelsFormatter staticLabelsFormatter = new StaticLabelsFormatter(graph);
staticLabelsFormatter.setHorizontalLabels(paths);
graph.getGridLabelRenderer().setLabelFormatter(staticLabelsFormatter);
graph.getViewport().setXAxisBoundsManual(true);
if(size == 5 || size > 5){
graph.getViewport().setMinX(0.0);
graph.getViewport().setMaxX(4.0);
graph.getGridLabelRenderer().setNumHorizontalLabels(5);
} else if(size == 4){
graph.getViewport().setMinX(0.0);
graph.getViewport().setMaxX(3.0);
graph.getGridLabelRenderer().setNumHorizontalLabels(4);
} else if(size == 3){
graph.getViewport().setMinX(0.0);
graph.getViewport().setMaxX(2.0);
graph.getGridLabelRenderer().setNumHorizontalLabels(3);
} else if(size == 2){
graph.getViewport().setMinX(0.0);
graph.getViewport().setMaxX(1.0);
graph.getGridLabelRenderer().setNumHorizontalLabels(2);
}
graph.getViewport().setScrollable(true);
graph.getGridLabelRenderer().setHorizontalLabelsColor(getResources().getColor(R.color.midBlue));
graph.getGridLabelRenderer().setVerticalLabelsColor(getResources().getColor(R.color.midBlue));
graph.getGridLabelRenderer().setGridColor(getResources().getColor(R.color.darkBlue));
graph.getGridLabelRenderer().setPadding(50);
graph.getGridLabelRenderer().setLabelsSpace(30);
I call for .removeAllSeries because the User is able to call for another graph via a dropdown-Spinner.
Also I set different MinX & MaxX Points because there can be the case that an entry doesn't have 5 DataPoints yet and so I change the Viewport in regard of that (didn't find a better solution for that so I am also open for some better code here, but it does work this way). My SharedPreference-file always has a minimun of 2 key/value pairs
Also little extra question: Is there a way to give ONLY the horizontal labels some extra labelspace. If I use setLabelSpace it will also apply on the vertical labels and I do not want that. But the horizontal labels are just so close to the axis.
Also sorry for ugly code. It was my first time using GraphView!
Thanks ahead!

How to set color for values in MPAndroidChart?

I am using MPAndroidChart.
Searched through the documentation but couldn't find anything that implemented correctly. I have a graph at the moment but I want to change the color of the line if it goes over a certain amount. Graph Example In the example I have linked, it shows a line drawn through the values from 10. I would like this line (the one going through the chart) and the color of the line in the chart to change color over 10. Is this possible? Using MPAndroidChart. I have one dataset at the moment.
Thanks in advance.

Yes. You just need a simple logic.
List<Integer> colors = ...;
List<Entry> entries = ...;
for(...) {
entries.add(...);
if(entries.get(i).getVal() > 10)
colors.add(customcolor);
else
colos.add(othercolor);
}

With LineDataSet.setColors() you can add a list of colors. Each color entry is for one data entry.
'
The trick is to calculate intermediate values for crossing the border.
Everytime I add a data entry, i call this method
private fun addDiffValue(newEntry : Entry){
val last = recordedValues[2].last()
val limit = 50f
if(last.y < limit && newEntry.y > limit ){
val gradient = (newEntry.y - last.y) / (newEntry.x - last.x)
val x_border = last.x + ((limit - last.y) / gradient)
recordedValues[2].add(Entry(x_border, limit))
diffColors.add(Color.LTGRAY)
diffColors.add(Color.RED)
}
// Vorher größer, jetzt kleiner
else if(last.y > limit && newEntry.y < limit) {
val gradient = (newEntry.y - last.y) / (newEntry.x - last.x)
val x_border = last.x + ((limit - last.y) / gradient)
recordedValues[2].add(Entry(x_border, limit))
diffColors.add(Color.RED)
diffColors.add(Color.LTGRAY)
}else if(last.y > limit ){
diffColors.add(Color.RED)
} else {
diffColors.add(Color.LTGRAY)
}
recordedValues[2].add(newEntry)
}
It is important to say, that I start with recordedValues[2].add(Entry(0f,0f)), otherwise last() would throw an error.
I create the LineDataSet and add the colors:
val dataSet3 = LineDataSet(recordedValues[2], "My Label")
dataSet3.setColors(diffColors)
As you can see in this screenshot, all values above 50 are red.

mpandroidchart - How can I avoid the repeated values in Y-Axis?

I want to avoid the repeated values and the -0 values in Y-Axis, avoiding the image situation.
I have these ideas to solve this, but any solution:
Limit the zoom before having repeated values in YAxis, therefore stop the infinite zoom-in on the chart
Get the YAxis values and remove the duplicate values.

Though this is an older question I'd like to add to it for future reference. Newer versions of the library have a little known feature that resolves the duplicated labels, called granularity. This is way simpler to use than the older solutions (though to be fair, this wasn't available at the time those were posted).
You can always check the latest AxisBase Javadocs (3.0.0-beta1) for a more detailed explanation. Here are the relevant methods:
setGranularity(float granularity):
Set a minimum interval for the axis when zooming in. The axis is not
allowed to go below that limit. This can be used to avoid label
duplicating when zooming in.
setGranularityEnabled(boolean enabled):
Enabled/disable granularity control on axis value intervals. If
enabled, the axis interval is not allowed to go below a certain
granularity.
So in your case you'd need to set the granularity to 0.1f since you have one decimal point. The following snippet of code should avoid the repeated values on the axis:
YAxis yAxis = mChart.getAxisLeft();
yAxis.setGranularityEnabled(true);
yAxis.setGranularity(0.1f);

tl;dr You can do this by changing the label count in onChartScale.
First, you want your listener set up:
chart.setOnChartGestureListener(this); // set a listener ;)
You try to get the top/bottom drawn values and check what gets drawn on the screen. Apply some basic calculations, and you're set.
The following code will draw 2 labels if the zoom level gets (too) high and up to 9 otherwise:
#Override
public void onChartScale(MotionEvent me, float scaleX, float scaleY) {
final YAxis yAxis = mChart.getAxisLeft();
final Transformer transformer = mChart.getTransformer(YAxis.AxisDependency.LEFT);
// ...minor dirty hack
final PointD top = transformer.getValuesByTouchPoint(0, 0);
final PointD bottom = transformer.getValuesByTouchPoint(0, mChart.getHeight());
final int diff = (int)(top.y - bottom.y);
// draw 2-9 axis labels
final int count = Math.min(9, Math.max(diff, 2));
Log.d("scale", String.format("scale %f: diff %d and count %d", scaleY, diff, count));
// "force" the count, for there are drawing issues where none get drawn on high zoom levels (just try it out)
yAxis.setLabelCount(count, true);
}
// todo implement other interface methods
The value formatter and everything else stays the same.
And some ugly screenshot to show that it works :D

code like this:
mchart.setAutoScaleMinMaxEnabled(false);
mchart.getAxisLeft().setAxisMaxValue(10);
mchart.getAxisLeft().setAxisMinValue(5);
mchart.getAxisRight().setAxisMaxValue(10);
mchart.getAxisRight().setAxisMinValue(5);
or:
boolean a = isReady;
mchart.getAxisLeft().setFormater(new format(float b){ return "" ;})
When u get data :
mchart.setAutoScaleMinMaxEnabled(true);
mchart.getAxisLeft().resetAxisMaxValue();
mchart.getAxisLeft().resetAxisMinValue();
mchart.getAxisRight().resetAxisMaxValue();
mchart.getAxisRight().resetAxisMinValue(5);
I have no code by my hand.

You can set granularity to your required value to prevent the repetition when zoomed.
mBarChart.getAxisLeft().setGranularity(1f); // y-axis scale will be 0,1,2,3,4....
mBarChart.getAxisLeft().setGranularityEnabled(true);
If you want to set granularity dynamically, then implement IAxisValueFormatter and compare the return value to get the difference and set Granularity to that difference.
private float yAxisScaleDifference = -1;
private boolean granularitySet = false;
//say the values returned by IAxisFormatter is in hundreds: 100, 200, 300...
mBarChart.getAxisLeft.setValueFormatter(new IAxisValueFormatter() {
#Override
public String getFormattedValue(float v, AxisBase axisBase) {
if(!granularitySet) {
if(yAxisScaleDifference == -1) {
yAxisScaleDifference = v; //10
}
else {
float diff = v - yAxisScaleDifference; //200 - 100 = 100
if(diff >= 1000) {
yAxisLeft.setGranularity(1000f);
}
else if(diff >= 100) {
yAxisLeft.setGranularity(100f); //set to 100
}
else if(diff >= 1f) {
yAxisLeft.setGranularity(1f);
}
granularitySet =true;
}
}
return val;
}
});
Another Example:
say Y-Axis returns [1200,3400,8000,9000....]
first time: 1200
second time: 3400 - 1200 = 2200
granularity set to 1000
If the difference is not uniform you have to use array to store the differences and take the average to get the right granularity.

If you are using IAxisValueFormatter the problem might be in the conversion of float to Int when trying to access the values array.
For me the solution was to
IAxisValueFormatter numAppointmentsXAxisFormatter = new IAxisValueFormatter() {
#Override
public String getFormattedValue(float value, AxisBase axis) {
int index = (int)Math.ceil(value);
if(index < 0){
index = 0;
}else if(index >= numAppointmentsLabels.size()){
index = numAppointmentsLabels.size()-1;
}
return numAppointmentsLabels.get(index);
}
};
I also added +1 to the label count
chart.getXAxis().setLabelCount(numValue+1, true);
Hope it helps

I have never used MPAndroidCharts before, but just a little search here and there got me this method which I think would be useful.
public void setLabelCount(int count, boolean force) {
if (count > 25)
count = 25;
if (count < 2)
count = 2;
mLabelCount = count;
mForceLabels = force;
}
The description says that "exact specified count of labels will be drawn and evenly distributed alongside the axis". If you can make it work in your favor, you might be able to limit the zoom.
Also, there is another method-
public int getLabelCount() {
return mLabelCount;
}
This returns the number of labels on the axis. Hope this helps.
https://github.com/PhilJay/MPAndroidChart/blob/5a15715b25991e3d61d27d552f9eba45975d65e7/MPChartLib/src/com/github/mikephil/charting/components/YAxis.java

Animating 3 parts of a view

I am trying to make an app view that, when presented with a subtraction problem, will show an animation of a growing rectangle (or fat line) that crawls up the number line to that integer.
I already have things set up so that I click "show me!" and bars are drawn along the number line showing the minuend, the subtrahend and the difference, but I'd like to be able to have a positive number's rectangle crawl up in a positive direction, negative from zero in the negative direction.
In looking through the documentation there seem to be several different ways to go about this. I am hoping somebody can suggest a way that's reasonably simple for this novice to implement. Here are the different approaches I've found:
This seems very much like this person's desire to have a bar graph where the bars "pop up," but it doesn't have an answer. Android Animated Bar Chart (invalidate())
I've perused http://developer.android.com/guide/topics/resources/drawable-resource.html -- but I don't have a "drawable" because it's being drawn in the View. I'm thinking of making the rest of the number line a background bitmap per Android View.getDrawingCache returns null, only null but I want three rectangles (for the minuend, subtrahend and difference).
I have thought of making a series of rectangle drawables and showing them frame-by-frame to show the growth.
I have looked at Animation at a specified rate using canvas / Ondraw but cannot discern just what code to wrap in that "if" statement, if in fact my problem is re-drawing...
I looked at using Paths -- and put the following code together. If direction matters, then it seems I should be able to slow things down and watch the path going in that direction, but it's instantaneous. I found I saw an example at http://www.curious-creature.org/2013/12/21/android-recipe-4-path-tracing/
if (minuendLength > 0) // start at 0 and go to the minuend length
{
path.addRect(interpX(0), yPosition(40), interpX(minuendLength), yPosition(43) , Path.Direction.CW);
// interpX lets me say what number on the number line it should align with;
//yPosition is percent of the way down the screen.
canvas.drawPath(path,minuendPaint);
// Seems same as drawRect -- instantaneous.
}
(The number line in the 'background' code is as follows, with different options for different sized integers entered:
if ( (minuendLength <10 && subtrahendLength <10 ) && (minuendLength >-10 && subtrahendLength >-10 ) )
{
this.setLineDimension(10); // default
super.onDraw(canvas);
canvas.drawLine(interpX(-this.getLineDimension()), yPosition(52 ),
interpX(this.getLineDimension()), yPosition(52), axisPaint);
int step = this.getLineDimension()/5; // so you're not writing *all* the numbers
// when they enter numbers and you make your own number line.
// paints the little hatch marks
for (int x = -this.getLineDimension(); x <= this.getLineDimension(); x+=step/2)
canvas.drawLine(interpX(x), yPosition(52), interpX(x), yPosition(53) , littleAxisPaint);
// draw the numbers on the hatch marks
textPaint.setTextAlign(Paint.Align.CENTER);
for (int x = -this.getLineDimension() + step; x < this.getLineDimension(); x += step)
{
canvas.drawText(Integer.toString(x), interpX(x), yPosition(56), textPaint);
}
}

I ended up doing this using Runnables.
animate.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if ( ((addend1 > 0) && (addend2 < 0)) )
{
tempNum1 =addend1 ;
tempNum2 = addend2;
h.post(shrink1bigger);
}
else if (addend1 < 0 && addend2 > 0)
{
tempNum1 =addend1 ;
tempNum2 = addend2;
h.post(shrink2bigger);
}
}
});
private Runnable shrink2bigger = new Runnable(){
#Override
public void run() {
tempNum1+=1;
tempNum2-=1;
shrinkDraw();
Log.i("WatchAnimActivity", "tempNum1 is " + tempNum1);
h.postDelayed(shrink2bigger, 500);
checkTemp(shrink2bigger);
}};
private void shrinkDraw()
{
numLine.setFirstNum(tempNum1);
numLine.setNextNum(tempNum2);
numLine.invalidate();
}
public void checkTemp(Runnable shrink)
{
Log.i("WatchAnimActivity", "tempNum1 in CHeckTemp is " + tempNum1);
if (tempNum1 ==0 || tempNum2==0)
h.removeCallbacks(shrink);
}

Android AchartEngine: How to attach additional data from a different source for each plotted point in a line graph?

I'm trying to make something that would allow me to press data points in a line graph. I created a subclass of GraphicalView and added a method to it, which gets called when the graph is clicked.
// This goes into the activity
graphicalView.setOnClickListener(new View.OnClickListener() {
graphicalView.displaySomething();
}
// This one is from the GraphicalView subclass
public void displaySomething() {
SeriesSelection seriesSelection = getCurrentSeriesAndPoint();
int pointIndex = seriesSelection.getPointIndex();
double xValue = seriesSelection.getXValue());
/*
Now in this method, I can do some pretty cool stuff like drawing
additional graphics near the clicked point in the line chart simply
by redrawing the graph and passing it some data. This is made possible
by subclassing both LineGraph and ScatterChart.
For the purposes of this question though, I would simply log the
values I'm curious about.
*/
Log.d(TAG, "pointIndex: " + pointIndex + ", xValue: " + xValue);
repaint();
}
Let's just say I have a graph that shows the weight of my pet dog over time and then I have an array of a list of strings which explains why my pet got that heavy, her favorite food at that time, her activites, etc. The data in the array will be displayed somewhere outside the graph (ie. to a group of TextViews). What I expect is to get the index of the clicked point, and then use that to index the array of data.
pointIndex and xValue are the variables I'm curious about. When drawing additional graphics to the graph, pointIndex was very helpful since ScatterChart's drawSeries knows how to use this variable properly. However, it can't be used for what I want to achieve because this value is not constant per point. For example, I have a point in the graph that lies in (5, 10) and it shows up as the fifth point with pointIndex 4 when the graph is not panned to the left. However, when I pan the graph to the left so that the mentioned point shows up as the first point, the pointIndex changes to 0. Which is why I can't use this variable to index the data array.
As with pointIndex, most of the values related to a point have the same behavior, but I've noticed that xValue is constant. I'm considering on using this value to index my external data source, perhaps by using a Map where xValue is the key. However, I can't figure out where to create this data structure. I've looked around achartengine's source code and it seems that the best place to do the Map's initialization is in ScatterChart's drawSeries method. The problem is the array of floats being passed to it also move around relative to the graph's panning, but my array of data does not move along with it. Can you please point me to the right direction?

this code will allows you to click data points in achartengin:
mySimpleXYPlot.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
// handle the click event on the chart
if(event.getAction()==MotionEvent.ACTION_DOWN){
SeriesSelection seriesSelection = mySimpleXYPlot
.getCurrentSeriesAndPoint();
if (seriesSelection == null) {
Toast.makeText(Records.this, "No chart element",
Toast.LENGTH_SHORT).show();
} else {
// display information of the clicked point
Toast.makeText(
Records.this,
"Chart element in series index "
+ seriesSelection.getSeriesIndex()
+ " data point index "
+ seriesSelection.getPointIndex()
+ " was clicked"
+ " closest point value X="
+ seriesSelection.getXValue() + ", Y="
+ seriesSelection.getValue(),
Toast.LENGTH_LONG).show();
}
}
return false;
}
});

I finally got it. I overrided GraphicalView's onDraw method so that I can extract keys and attach them to my data. It goes something like this:
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.getClipBounds(mRect);
int top = mRect.top;
int left = mRect.left;
int width = mRect.width();
int height = mRect.height();
if (mRenderer.isInScroll()) {
top = 0;
left = 0;
width = getMeasuredWidth();
height = getMeasuredHeight();
}
mChart.draw(canvas, left, top, width, height, mPaint);
/*
* This is where we build the map of <data point, info>
*/
if (mIsFirstDraw && mIsAttachData && mAdditionalPointData != null && mAdditionalPointData.size() > 0) {
// ClickablePoints is an interface that has a method to get the datapoints rendered by ScatterChart
List<float[]> pointCoords = ((ClickablePoints) mChart).getDataPointCoords();
mPointKeys = new double[pointCoords.size()];
mAdditionalDataMap = new HashMap<Double, String>();
for (int i = 0, j = mPointKeys.length; i < j; i++) {
float[] coords = pointCoords.get(i);
SeriesSelection seriesSelection = mChart.getSeriesAndPointForScreenCoordinate(
new Point(coords[0], coords[1]));
mPointKeys[i] = seriesSelection.getXValue();
mAdditionalDataMap.put(seriesSelection.getXValue(), mAdditionalPointData.get(i));
}
mIsFirstDraw = false;
}
}
mIsFirstDraw is a flag that indicates that it is the first time that the graph will be drawn. It needs to be taken down afterwards so that it does not repeat attaching keys to the data.