I am using Graphview in Android. Inside my graph, I am showing bargraph with some custom static labels.
If I am not manually adjusting the Xbounds, then static labels show up , but they are not placed at the middle of bar. Also the bars don't have proper spacing.
series.resetData(graphDataPoints.toArray(new GraphDataPoint[graphDataPoints.size()]));
StaticLabelsFormatter mLabelsFormatter = new StaticLabelsFormatter(graph);
mLabelsFormatter.setHorizontalLabels(horizontalLabels.toArray(new String[horizontalLabels.size()]));
mGridLabelRenderer.setLabelFormatter(mLabelsFormatter);
If I manually adjust Xbounds, then bars show up nicely, but the static labels are distorted. In my case one label doesn't show up.
series.resetData(graphDataPoints.toArray(new GraphDataPoint[graphDataPoints.size()]));
graph.getViewport().setXAxisBoundsManual(true);
graph.getViewport().setMinX(series.getLowestValueX() -0.5);
graph.getViewport().setMaxX(series.getHighestValueX() +0.5);
StaticLabelsFormatter mLabelsFormatter = new StaticLabelsFormatter(graph);
mLabelsFormatter.setHorizontalLabels(horizontalLabels.toArray(new String[horizontalLabels.size()]));
mGridLabelRenderer.setLabelFormatter(mLabelsFormatter);
Please help!
In my case the problem was that I created the DataPoints as DataPoint(i+1,y), so there was an offset in the horizontal direction. Then I put minX to 0 and maxX to NBRBARS+1 so that you could see everything of the bars.
To compensate for the labels I had to add one space " " on each side of the array, i.e. String labels[] = {" ", "label 1", "label 2", " "}.
Related
I want to draw stock's history price chart with volume, similar to this:
With MPAndroidChart, I managed to get this result using CombinedChart:
Here's my code snippet:
CombinedChart mChart = (CombinedChart) findViewById(R.id.chart);
final ArrayList<BarEntry> barList = new ArrayList<>();
final ArrayList<Entry> lineList = new ArrayList<>();
// add Bar & Line data entries
.....
// bar depends on LEFT y-axis
BarDataSet barSet = new BarDataSet(barList, "");
barSet.setAxisDependency(YAxis.AxisDependency.LEFT);
BarData barData = new BarData(barSet);
// line depends on RIGHT y-axis
LineDataSet lineSet = new LineDataSet(lineList, "");
lineSet.setAxisDependency(YAxis.AxisDependency.RIGHT);
LineData lineData = new LineData(lineSet);
// set data to chart
....
float barYMax = barData.getYMax();
float lineYMin = lineData.getYMin();
// to make bar appears at bottom
YAxis leftAxis = mChart.getAxisLeft();
leftAxis.setAxisMaximum(barYMax * 10);
// to make line appears at top
YAxis rightAxis = mChart.getAxisRight();
rightAxis.setAxisMinimum(lineYMin * 0.5f);
In order to make "Line Chart" appears above "Bar Chart":
Bar chart depends on Left y-axis. To make bar appears at bottom, I make it's scale larger, with leftAxis.setAxisMaximum(barYMax * 10).
Line chart depends on Right y-axis. To shift line up, I do rightAxis.setAxisMinimum(lineYMin * 0.5f).
I wonder is there a better recommended way to achieve this effect?
With my solution, line chart may still overlap with bar partially. Ideally I wish to achieve no overlapping at all, with line appears completely on top of bar.
I created a simple game where move the objects from one place to another and each moves increment count of moves in score table. After all objects are moved correct I want set opacity to screen and slowly resizing score from initial size(e.g. 15px) to whole screen(e.g. 50px). I load font like this:
FontFactory.setAssetBasePath("font/");
final ITexture mainFontTexture = new BitmapTextureAtlas(activity.getTextureManager(), 256, 256, TextureOptions.BILINEAR_PREMULTIPLYALPHA);
font = FontFactory.createStrokeFromAsset(activity.getFontManager(), mainFontTexture, activity.getAssets(), "font.ttf", 15, true, Color.WHITE, 2, Color.BLACK);
font.load();
In createScene() method I create HUD with text and I initial text:
Int mMoves = 0;
HUD gameHUD = new HUD();
Text mText = new Text(25, 25, font, "Moves: " + "123456789", getVertexBufferObjectManager());
And each moves set text with actual moves count:
mText.setText("Moves: " + mMoves++);
And when level was complete I don't know how can I resize this text. I mean something like scale with transition in CSS3..
Thanks for all comments
You can set the size of the text by using the setscale function.
If you just want to set the size use the following :
Example : mText.setScale(1.5f);
You can also use Entity modifiers to create an animation:
ScaleModifier scale = new ScaleModifier(1f, 1f, 1.1f);
LoopEntityModifier loop = new LoopEntityModifier(scale);
mText.registerEntityModifier(loop);
This will give a animation effect re-sizing the text in a loop.
Is their any possibility to hide all rounded items from this picture.
I have used the following code,
public void setDataList(List<HorizontalBarChartData> dataList, Resources resources) {
ArrayList<String> categories = new ArrayList<String>();
ArrayList<BarEntry> values = new ArrayList<BarEntry>();
ArrayList<BarDataSet> dataSets = new ArrayList<BarDataSet>();
BarDataSet set1;
for (int i = 0; i < dataList.size(); i++) {
categories.add(dataList.get(i).getName());
values.add(new BarEntry(dataList.get(i).getValue(), i));
}
/*set1 = new BarDataSet(values, "Income, Expense, Disposable Income");*/
set1 = new BarDataSet(values, "Category 1, Category 2, Category 3");
set1.setBarSpacePercent(35f);
set1.setColors(new int[]{resources.getColor(R.color.cyan_blue), resources.getColor(R.color.vermilion_tint), resources.getColor(R.color.sea_green)});
dataSets.add(set1);
BarData data = new BarData(categories, dataSets);
data.setValueTextSize(10f);
horizontalBarChart.setData(data);
}
Update
How to hide rounded part from this image?
Yes, is possible, just using following code:
mChart.setDescription(""); // Hide the description
mChart.getAxisLeft().setDrawLabels(false);
mChart.getAxisRight().setDrawLabels(false);
mChart.getXAxis().setDrawLabels(false);
mChart.getLegend().setEnabled(false); // Hide the legend
As per this answer
mChart.getXAxis().setDrawLabels(false); will hide the entire X-Axis(as required for this question).
For positioning the X-Axis, following code works.
XAxis xAxis = mChart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
Position can be set to
BOTTOM
BOTH_SIDED
BOTTOM_INSIDE
TOP
TOP_INSIDE
This helps if you are trying to hide only the particular side axis instead of hiding the entire axis.
It appears mChart.setDescription() no longer accepts a String.
The method now accepts an instance of the Description Class like this:
mChart.setDescription(Description description)
So to modify or delete the Chart Description you may do it like below
Description description = new Description();
description.setText("");
mChart.setDescription(description);
Following code work for all chart
Legend l = mchart.getLegend();
l.setEnabled(false);.
To hide description, use this
mChart.getDescription().setEnabled(false)
Below code works for PieChart. Try to get same method for your Chart.
Legend l = mChart.getLegend();
l.setPosition(LegendPosition.NONE);
chart=(LineChart) findViewById(R.id.Chart);
chart.getLegend().setEnabled(false); // for hiding square on below graph
Kotlin solution for MPAndroidChart:v3.1.0
chart.description.isEnabled = false // hide the description
chart.legend.isEnabled = false // hide the legend
chart.xAxis.setDrawLabels(false) // hide bottom label
chart.axisLeft.setDrawLabels(false) // hide left label
chart.axisRight.setDrawLabels(false) // hide right label
I had the problem, that the bottom xAxis Labels are cutted off when I used mChart.getLegend().setEnabled(false)
Now I use chart.getLegend().setForm(Legend.LegendForm.NONE); instead and the labels are not cutted of anymore
I have a graph and I need the Y axis to display to 1dp. This works by doing the following code.
NumberFormat nf = NumberFormat.getInstance();
nf.setMinimumFractionDigits(1);
graph.getGridLabelRenderer().setLabelFormatter(new DefaultLabelFormatter(nf, nf));
I need the X axis to display 2 strings, 1 at the beginning and 1 at the end. This works by doing the following code.
StaticLabelsFormatter staticLabelsFormatter = new StaticLabelsFormatter(graph);
staticLabelsFormatter.setHorizontalLabels(new String[] {firstStr,lastStr});
graph.getGridLabelRenderer().setLabelFormatter(staticLabelsFormatter);
graph.getGridLabelRenderer().setNumHorizontalLabels(2);
My problem is I can't do both on the same graph!
Both work individually but not together, any ideas gratefully recieved
I am using version 4.0 of Graphview
yes you can combine the static labels and dynamic labels.
Use the StaticLabelFormatter and set the dyamic label formatter.
http://jjoe64.github.io/GraphView/javadoc/com/jjoe64/graphview/helper/StaticLabelsFormatter.html#setDynamicLabelFormatter-com.jjoe64.graphview.LabelFormatter-
Something like this should work:
NumberFormat nf = NumberFormat.getInstance();
nf.setMinimumFractionDigits(1);
StaticLabelsFormatter staticLabelsFormatter = new StaticLabelsFormatter(graph);
staticLabelsFormatter.setHorizontalLabels(new String[] {firstStr,lastStr});
staticLabelsFormatter.setDynamicLabelFormatter(new DefaultLabelFormatter(nf, nf));
graph.getGridLabelRenderer().setLabelFormatter(staticLabelsFormatter);
graph.getGridLabelRenderer().setNumHorizontalLabels(2);
Documentation
http://www.android-graphview.org/documentation/label-formatter
i have been having trouble setting padding or something similar to an actor. Cant figure out the way. I guess that I must add something in the skin maybe?
I have this TextField:
textboxskin = new Skin();
textboxskin.add("textfieldback", new Texture("data/textfieldback.png"));
textboxskin.add("cursor", new Texture("data/cursortextfield.png"));
textboxskin.add("selection", new Texture("data/selection.png"));
textboxskin.add("font", font);
TextFieldStyle textfieldstyle = new TextFieldStyle();
textfieldstyle.background= textboxskin.getDrawable("textfieldback");
textfieldstyle.disabledFontColor=Color.BLACK;
textfieldstyle.font=textboxskin.getFont("font");
textfieldstyle.fontColor=Color.WHITE;
textfieldstyle.cursor=textboxskin.getDrawable("cursor");
textfieldstyle.selection=textboxskin.getDrawable("selection");
textfieldusername = new TextField("username", textfieldstyle);
which looks like this:
As you can see it looks horrible left centered...
EDIT:
I tried to do the following and it worked in my tests:
textfieldstyle.background.setLeftWidth(textfieldstyle.background.getLeftWidth() + 10);
Searching the libgdx API I couldn't find a way to specify padding for the text inside the TextField component.
As a workaround, yout could copy the original TextField source and create a new TextField, with another name providing a way to implement the padding.
Copy the contents of the libgdx TextField (https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/scenes/scene2d/ui/TextField.java?source=cc)
to another file and call it MyTextField (as an example). Replace the broken TextField references with the new class name.
Create a new variable called paddingLeft, for example:
public float paddingLeft = 0.0f;
In the draw() method, you can add your padding to the sum to define a new position for the String. Where the code says:
font.draw(batch, displayText, x + bgLeftWidth + textOffset, y + textY + yOffset, visibleTextStart, visibleTextEnd);
replace with:
font.draw(batch, displayText, x + bgLeftWidth + textOffset + leftPadding, y + textY + yOffset, visibleTextStart, visibleTextEnd);
(notice the " + leftPadding" in the second code)
Then, if you are using skins, remember to reference your TextField in the uiskin.json file:
mypackage.MyTextField$TextFieldStyle: {
default: { selection: selection, background: textfield, font: default-font, fontColor: white, cursor: cursor }
}
and use it in your code:
MyTextField txtTest = new MyTextField("Test", skin);
txtTest.leftPadding = 10.0f;
This is not the ideal way, but will work.
Use the Table class to lay out scene2d UIs. To set up the Table:
stage = new Stage();
Table table = new Table();
table.setFillParent(true);
stage.addActor(table);
table.add(textFieldUsername).padBottom(20f); //also use padTop, padLeft, and padRight
table.row();
In the main loop, call:
stage.act(Gdx.graphics.getDeltaTime());
stage.draw();
For more information on tables, see: http://code.google.com/p/table-layout/
You could use a NinePatch. This separates your texture into nine "patches" you define their height and width, and then you give it to a NinePatchDrawable which you can give to a TextButton. I believe the outer "patches" act as margins and with some tweaking (not strenuous) it would look great and accomplish your goals.
I learned about them from this post:
Loading nine-patch image as a Libgdx Scene2d Button background looks awful