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.
Related
I m using MPANdroidChartLibrary, but facing issues when showing vertical legends in the bottom of the chart. The last legend cut off.
See attached image:
As the last legend is cut after AM registration in small devices.
I follow Answer1
3: MpAndroidChart Piechart legends cutting issue at the bottom center and Answer2 posts on stack overflow but nothing works for me.
Surprisingly, This issue only comes on smaller devices even after using scroll view around the chart while on large device like above 6 inch all legends are visible properly.
Add as much offset as you legend grows.
there are two methods add the specified padding at the top and bottom of the chart
mPiecPieChart.setExtraBottomOffset(12f);//from bottom side if legends are bottom side
mPiecPieChart.setExtraTopOffset(12f);//if legends are on top side or change both if legend are on both sides
by this line of code you can set margin between below line and legend last entry!
legend.setYOffset(50f);
as your legends increase you can increase value and on reducing legend entries you can reduce this value also!
Legend legend = chart.getLegend();
legend.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);
legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.CENTER);
legend.setOrientation(Legend.LegendOrientation.VERTICAL);
legend.setDrawInside(false);
legend.setYOffset(50f);//here value changes
I have 3 issue related to MPChartAndroid.
How to make chart to see selected values.
1. Add space to the left of LeftAxis and to the right of rightAxis to fully see the values.
2. how to make first and last chart value to fully see the values.
3. Add space under xAxis to see the cut text.
To overcome issue with cutoff x-Axis label, you need to set some extra space on bottom of your chart view.
mLineChart.setExtraOffsets(left,top,right,bottom); try code below
mLineChart.setExtraOffsets(0,0,0,10);
For overcome issue with overlapping value on axis line you need to set some spacing (start position of lines) on x-Axis, try code below
xAxis.setSpaceMax(0.01f);
xAxis.setSpaceMin(0.01f);
also try xAxis.setAvoidFirstLastClipping(true);
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.
I'm using a fill to color the area below my chart, and I want the graph to take up the entire view, so I'm setting zero margin on the right and left in my renderer.
mRenderer.setMargins(new int[]{20, 0, 20, 0});
Graph renders great; uses all horizontal space and doesn't look wonky like it does without fill extending to right or left margins when they're set to > 0 values.
I'm also using custom text labels, aligned center, and I'm getting the outer two labels clipped; setting padding on x labels amplifies the problem by pushing labels off view.
Is there a way I can fit all the x labels in without the truncation, and without having to use margins? I can fit them all using margins, but then it just looks funky using the fill below.
Ideally, I guess there'd be some way to set alignment on each text label individually; probably asking for a lot. Or, a means to specify whether it should fit x labels when using custom text labels, such that it would align right on the first, and align left on the last.
Thanks
I have an application using Achartengine and I am trying to move the legend independently. Every time I try to move it, it has some side effect.
Here is an image of the application:
[Image of my application where the legend overlaps the x axis labels but still shows]
[IMG]http://i42.tinypic.com/2jd2y6g.png[/IMG]
http://i42.tinypic.com/2jd2y6g.png
Here is an image of the application when I apply some solutions that I found here on stackoverflow:
[Image of my application where the legend has disappeared under the bottom of the screen]
[IMG]http://i44.tinypic.com/16bipmp.png[/IMG]
http://i44.tinypic.com/16bipmp.png
The thing I tried is to set the legend height with this method mRenderer.setLegendHeight(20);
The only thing I want to do is to move the legend down a few pixels so that it will not overlap the x axis labels or the x axis label name.
Moving the legend all the way to the top would be even better.
BTW I am also using mRenderer.setMargins(new int[] { 20, 30,0, 20 }); to set the margins and I have tried different combinations.
Any suggestions?
I can't post images yet.
You need to set a higher bottom margin, the third value in the array:
renderer.setMargins(new int[] { top, left, bottom, right });
You can also try the legend fit:
renderer.setFitLegend(true);