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.
Related
Let's say I have an Activity containing a ChartView (blue rectangle)
Now, I want to place another View on top of it that will stretch from the X-axis all the way to the top of ChartView.
I tried to do that by setting the margin-bottom equal to the height of the X-axis (red area), but I don't know how to get its height
How can I achieve this effect? Is there a way to get X-axis height in Android MP Chart? Or maybe there is a walkaround that will have a similar result?
Desirable outcome (the gray area is a view placed on top of the chart):
chart.getXAxis().mLabelHeight returns the height of x-Axis by pixel.
You can get it after OnGlobalLayoutListener, because it is calculated after x-Axis is drawn.
----------Updated Jun 22nd
another way is to use "getHeight() - mViewPortHandler.contentBottom()", but mViewPortHandler is protected, so an extended chart is necessary to provide access to mViewPortHandler
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.
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?
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.
I want to combine 3 bar series and 3 line series in one chart using achartengine.
When I specify the type of chart as BarChart and give it 3 series, things work right. The bars widths are what I set and the spacing and colouring is correct:
(see image here: http://i42.tinypic.com/ifu1ap.jpg)
But when I specify the chart type as
mChart = ChartFactory.getCombinedXYChartView(getView().getContext(), mDataset, mRenderer, new String[] {BarChart.TYPE, BarChart.TYPE, BarChart.TYPE, LineChart.TYPE, LineChart.TYPE,LineChart.TYPE });
the bars display on top of each other and the widths aren't right:
(see image here: http://i43.tinypic.com/2vum2xv.jpg)
Neither XYMultipleSeriesRenderer.setBarWidth() nor XYSeriesRenderer.setLineWidth() works for the bar widths.
I thought that if I added the XYSeries x values with an offset that I could fix the overlapping bars issue but then the widths of the bars are still not what I set it to be.
Does anyone know (the right way) how to make a chart that shows multiple bar and line series in one chart?
You are correct about using an offset to render the bars such as they don't overlap.
However, for spacing them, you need to use renderer.setBarSpacing(2); which means that the space between 2 items in the same series is equal to two times width of one bar.