Android GraphView - How to use separate LabelFormatter? - android

I'm using Android GraphView. I want to use DateAsXAxisLabelFormatter for x-axis, and a custom LabelFormatter for y-axis. Otherwise the y-axis labels gets cut off. See this: android graph-view y axis numbers being cut out
If I use static padding as suggested in the answers of above question, then there is extra padding sometimes.
See the images below:
When there are integers in y-labels (and I have given large padding to cope with numbers like: -0.0231, -0.0450, etc.):
When there are floating points in y-labels (and I have give small padding to make it look nice for numbers like: 10, 25, 40, etc):
And I'm unable to find the sweet spot.
If I could use a separate for both of the axes then I would set setMaximumFractionDigits(2), and provide a static padding. That remove my problem. But I couldn't do both, it seem to override the other (see the code for better understanding). I can either use DateAsXAxisLabelFormatter or a DefaultLabelFormatter but not both at the same time.
Here is the code:
NumberFormat nf = NumberFormat.getInstance();
nf.setMaximumFractionDigits(2);
nf.setMaximumIntegerDigits(2);
graphView.getGridLabelRenderer().setLabelFormatter(new DateAsXAxisLabelFormatter(MainActivity.this, simpleDateFormat));
graphView.getGridLabelRenderer().setLabelFormatter(new DefaultLabelFormatter(nf, nf)); // This overrides the previous LabelFormatter
// If I try to set them both together. I get this error.
graphView.getGridLabelRenderer().setLabelFormatter(new DateAsXAxisLabelFormatter(MainActivity.this, simpleDateFormat), nf);
//setLabelFormatter (LabelFormatter) in GridLabelRenderer cannot be applied to (DateAsXAxisLabelFormatter, java.text.NumberFormat)
How do I use both of the LabelFormatter separately for both axes?

Related

How to set padding between value labels and line for MPAndroidChart LineChart

When I create a line chart with values for each point, the values on the chart overlap the line, as shown in the screenshot. Is there a function to add padding to the values to raise them up so that this doesn't happen? I've looked all over the place for an answer to this or even someone else having the same issue and haven't found what I'm looking for.
My current chart:
I figured it out.
Based on this line in the source code:
int valOffset = (int) (dataSet.getCircleRadius() * 1.75f);
The padding is calculated based on the radius of the circle on the line, so my solution is to increase the size of the circle, set the outer radius to be transparent, and set the hole color to be the same as the line, which accomplishes what I want. This may not work for everyone, depending on what you're trying to do, but it worked in my case.

Using Google's Text Recognition API to detect horizontal lines instead of blocks in images

Is there a way to detect full-sized, horizontal lines (max width) instead of text blocks in images using Google's Text Recognition API? Say, if I wanted to retrieve the total due from a receipt image like this:
... because as of now, the API detects texts in blocks instead in an arbitrary order like this:
... and no, TextBlock's getComponents() only retrieves the Lines within each TextBlock since TextBlock is at the top of the Text hierarchy (TextBlock contains Line) as mentioned in the docs here. If only this API could start off with Lines instead of TextBlocks for an image bitmap's frame...
I even tried resizing the text blocks' bounding box (rectangle) with hard-coded coordinates to hopefully detect the full line of text, "Chicken Bowl... 7.15", but to no avail as shown below:
val textRecognizer = TextRecognizer.Builder(this).build()
if (textRecognizer.isOperational) {
val imageFrame = Frame.Builder()
.setBitmap(imageBitmap)
.build()
val textBlocks = textRecognizer.detect(imageFrame)
for (i in 0 until textBlocks.size()) {
val textBlock = textBlocks.get(textBlocks.keyAt(i))
textBlock.boundingBox.set(97, 1244, 1235, 1292)
val textValue = textBlock.value
Log.d(LOG_TAG, "textValue: " + textValue)
}
}
You are right - the API just gives you the coordinates of the text blocks and of the lines within the blocks. Therefore you have to sort out all lines by yourself.
Before you can start with this, you should rotate the coordinates in a way that the baselines are (more or less) horizontal. Be aware that the coordinates of the bounding boxes are sometimes in a wrong order. You should sort these misleading boxes out, when you calculate the needed rotation angle.
After you rotated all the coordinates, you can start to match all word-bounding-boxes and create the lines that you need. In my code I did this by comparing the vertical center of the boxes. Be aware of fragements with very small or very large height (in comparison to the average height). You have to give them a special treatment.
I can asure you that this works well with receipts as shown in your example.

How to add extra labels at specified points in LineChart?

I would like to add some extra labels to a LineChart (MPAndroidChart) like in the image below. Notice the "Advanced", "Novice" etc labels.
How could I add those to specified y-axis positions so they will always show up like y-axis labels but perhaps on the inside of the graph as shown - or on the right side if necessary?
Update:
All I needed to get what I needed was some LimitLines like this:
LimitLine noviceline = new LimitLine( SSGlobals.getWeightinPreferredUnits_fromPounds(standardweightsarr[2]) , getString(R.string.novice));
noviceline.setLineColor(ContextCompat.getColor(getActivity(), R.color.accentline));
noviceline.setTextColor(ContextCompat.getColor(getActivity(), R.color.accentline));
noviceline.setTextSize(12);
noviceline.setLineWidth(4);
I might style it up a bit more but so far the result looks like so:
There are a couple of options here.
You can see if the LimitLines will fit your purpose - they are able to be configured with a label like this:
LimitLine llXAxis = new LimitLine(10f, "Index 10");
llXAxis.setLineWidth(4f);
llXAxis.enableDashedLine(10f, 10f, 0f);
llXAxis.setLabelPosition(LimitLabelPosition.RIGHT_BOTTOM);
llXAxis.setTextSize(10f);
xAxis.addLimitLine(llXAxis);
You could also use a FrameLayout with over the chart with TextViews for the extra info you want to add. See this
question for something similar and also this question for how to convert between chart values and on-screen pixel co-ordinates.
Alternatively, you can extend the renderer itself to draw your custom text. Please see How do MPAndroidChart renderers work and how do I write a custom renderer? if you wish to attempt that.

BarSeries linewidth ignored on Shinobi

I'm trying to set the width of the bars of a BarSeries with Shinobi.
Code's following:
DataAdapter<String, Double> da1 = new SimpleDataAdapter<String, Double>();
da1.add(new DataPoint<String, Double>("q1", 1.0));
da1.add(new DataPoint<String, Double>("q2", 3.0));
da1.add(new DataPoint<String, Double>("q3", 4.5));
da1.add(new DataPoint<String, Double>("q4", -2.5));
BarSeries series1 = new BarSeries();
series1.setDataAdapter(da1);
BarSeriesStyle css1 = series1.getStyle();
css1.setLineWidth(180.0f);
css1.setAreaColor(Color.YELLOW);
CategoryAxis xAxis = new CategoryAxis();
chart.setXAxis(xAxis);
xAxis.getStyle().setInterSeriesPadding(0.2f);
NumberAxis yAxis = new NumberAxis();
chart.setYAxis(yAxis);
yAxis.getStyle().setInterSeriesPadding(0.2f);
chart.addSeries(series1);
What happens is that the line css1.setLineWidth(180.0f); is completely ignored. I can put 1.0f or 1000.0f and the lines are always the same width no matter what.
What am I missing, or doing wrong? I'm using shinobi 1.5.1.
Edit: same goes with ColumnSeries:
ColumnSeries cs = new ColumnSeries();
DataAdapter<Float, Integer> adapterAxis = new SimpleDataAdapter<Float, Integer>();
adapterAxis.add(new DataPoint<Float, Integer>(0f, 3));
cs.getStyle().setLineColor(Color.BLACK);
cs.getStyle().setLineWidth(1f);
cs.setDataAdapter(adapterAxis);
1f or 20f, nothing changes.
chart.addSeries(cs);
Edit: following Kai's answer.
I tried playing around with setInterSeriesPadding, but it doesn't do what I need in that if I approach 1.f as padding value the bar will shrink, but if I set 0f the bar will have a minimum height and the space between them will remain 'big'.
To be clearer: I have 4 bars at 0 to 4 on the Y axis with different X values. Each one is centered more or less on the Y value (not really, but not important right now). E.g. bar centered in 2 will go from ~1.8 to ~2.2 and bar centered in 3 will go from ~2.8 to to ~3.2. I want them thicker, so that they go from ~1.55 to ~2.45 and from ~2.55 to ~3.45. How do I do that?
Edit 2 (images):
Actual:
Desired (sorry for my lack of Paint skills, it was just a way to show that I want them thicker):
When you refer to width of a bar series, I am going to assume you mean the height, i.e. measuring from the top to the bottom of the bar. I'd like to mention that the setLineWidth() method is not intended for this purpose, but in fact this method is used to style the line which is drawn around the edge of a bar (or column) to act as a border. As the value passed to this method is increased, the bars (or columns) remain the same size, but the line grows inward. Subsequently, a large number will give the appearance of no line, as the bar or column will have a line so thick that it fills the entire bar (or column).
If you wish to manipulate the height of the bars (or the width of the columns) you need to use the methods:
http://www.shinobicontrols.com/docs/ShinobiControls/ShinobiChartsAndroid/1.5.1/Premium/Normal/apidocs/docs/reference/com/shinobicontrols/charts/AxisStyle.html#setInterSeriesPadding(float)
and
http://www.shinobicontrols.com/docs/ShinobiControls/ShinobiChartsAndroid/1.5.1/Premium/Normal/apidocs/docs/reference/com/shinobicontrols/charts/AxisStyle.html#setInterSeriesSetPadding(float)
I hope that you find this information useful. Thanks and kind regards,
Kai.
EDIT:
Hello Stephen,
Thanks for the extra information.
So today I created a quick app, using your code to populate a Shinobi chart with data.
I did see the thin bars issue which you describe. I believe in order to correct this you also need to call the method Axis.setInterSeriesSetPadding(float).
Although when you use a single series in your chart it is not obvious, this method does affect the spacing between individual bars. By default there is a small spacing between bars if this method is not explicitly called.
Please remember also that these two methods expect a float value between 0 (no padding at all) and 1. I suggest you call both of these methods with a parameter of 0.0 and slowly increase the values until you achieve the appearance you wish. You should only need to call these 2 methods on your category axis, not the data axis.
Whilst building my app with your code I did notice that you use a bar series, but you have your category axis on the x axis. I found when I built my app it initially only displayed 3 bars as the first category ("q1") was rendered as having a zero data value. This is because categories are internally given an integer index, and so the first category is stored with a 0 index.
The typical way to use a bar series is to have the categories on the y axis and the data values on the x axis. I modified my app to use this configuration and I found all 4 bars showed correctly. Furthermore I was able to have a padding ranging from nothing, where the bars were butted up against each other, to a lot of padding where the bars appear thin.
I hope that this helps,
Thanks,
Kai.
Disclaimer: I work for ShinobiControls.

Set text width - Andengine gles 2

I have code:
Text infoText = new Text(560, 10, mFont, "this text is too long to be in one line", activity.getVertexBufferObjectManager());
How I can set this text width(for example 200px). When text will be longer than this width it should break line and write more in next line.
I can' t find any example for this. Is it possible in Andengine gles 2 ?
I was looking around in AndEngine's code to find a solution for your problem, and I think I've found it. The method splitLines in the FontUtils class seems to be what you need.
It's arguments are: the the text you're splitting, the font to measure widths with (The font you'll be using for the text), an object that extends List<CharSequence> to save the new lines in, the type of split (AutoWrap.WORDS to split by words) and the maximum width per line.
Here's a link to the example from the AndEngine examples
https://github.com/nicolasgramlich/AndEngineExamples/blob/GLES2/src/org/andengine/examples/TextBreakExample.java
that should do it for you

Categories

Resources