I am using achartengine 1.0.1 (latest) and want to demonstrate a bar chart.
This is what I want:
My Desired Graph
What I achieved so far
1:1 view:
Zoom-out View:
Problems:
- the left and right portion of graph are lost in 1:1 view.
- The distance between Bar is so much high. I need to reduce it.
- The Bar is not appropriately above the text label.
- The text label color is white. I tried
setLabelColor()
but not working. - The text-size above bar is small.
- XAxis Text "AC", "WA" etc are overlapping with 1, 2, 3. I want to remove 1, 2, 3 and only show "AC", "WA" etc.
Do you know how to fix these problems? I need a graph approximately like my desired graph. Thanks in advance.
Edit:
This is my trying code:
public GraphicalView getView(Context context)
{
// Bar 1
XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
XYSeries ac = new XYSeries("AC");
XYSeries pe = new XYSeries("PE");
XYSeries wa = new XYSeries("WA");
XYSeries tl = new XYSeries("TL");
XYSeries ml = new XYSeries("ML");
XYSeries ce = new XYSeries("CE");
XYSeries re = new XYSeries("RE");
XYSeries ot = new XYSeries("OT");
ac.add(1, 291);
pe.add(2, 11);
wa.add(3, 204);
tl.add(4, 28);
ml.add(5, 0);
ce.add(6, 21);
re.add(7, 51);
ot.add(8, 4);
dataset.addSeries(ac);
dataset.addSeries(pe);
dataset.addSeries(wa);
dataset.addSeries(tl);
dataset.addSeries(ml);
dataset.addSeries(ce);
dataset.addSeries(re);
dataset.addSeries(ot);
XYMultipleSeriesRenderer mRenderer = new XYMultipleSeriesRenderer();
mRenderer.setChartTitle("Submission Statistics");
mRenderer.setXTitle("Verdict Code");
mRenderer.setYTitle("No. of Submissions");
mRenderer.setAxesColor(Color.BLACK);
mRenderer.setLabelsColor(Color.BLACK);
mRenderer.setApplyBackgroundColor(true);
mRenderer.setBackgroundColor(Color.WHITE);
mRenderer.setMarginsColor(Color.WHITE);
mRenderer.setZoomEnabled(true);
mRenderer.setZoomButtonsVisible(true);
mRenderer.setBarSpacing(-0.5);
// mRenderer.setMargins(new int[] {20, 30, 15, 0});
mRenderer.setAxisTitleTextSize(16);
mRenderer.setChartTitleTextSize(20);
mRenderer.setLabelsTextSize(15);
mRenderer.setLegendTextSize(15);
mRenderer.addXTextLabel(1, "AC");
mRenderer.addXTextLabel(2, "PE");
mRenderer.addXTextLabel(3, "WA");
mRenderer.addXTextLabel(4, "TL");
mRenderer.addXTextLabel(5, "ML");
mRenderer.addXTextLabel(6, "CE");
mRenderer.addXTextLabel(7, "RE");
mRenderer.addXTextLabel(8, "OT");
mRenderer.setBarWidth(50);
// mRenderer.setXAxisMax(9);
mRenderer.setXAxisMin(0);
mRenderer.setYAxisMin(0);
XYSeriesRenderer renderer = new XYSeriesRenderer();
renderer.setColor(Color.parseColor("#00AA00"));
renderer.setDisplayChartValues(true);
XYSeriesRenderer renderer2 = new XYSeriesRenderer();
renderer2.setColor(Color.parseColor("#666600"));
renderer2.setDisplayChartValues(true);
XYSeriesRenderer renderer3 = new XYSeriesRenderer();
renderer3.setColor(Color.parseColor("#FF0000"));
renderer3.setDisplayChartValues(true);
XYSeriesRenderer renderer4 = new XYSeriesRenderer();
renderer4.setColor(Color.parseColor("#0000FF"));
renderer4.setDisplayChartValues(true);
XYSeriesRenderer renderer5 = new XYSeriesRenderer();
renderer5.setColor(Color.parseColor("#6767D0"));
renderer5.setDisplayChartValues(true);
XYSeriesRenderer renderer6 = new XYSeriesRenderer();
renderer6.setColor(Color.parseColor("#AAAA00"));
renderer6.setDisplayChartValues(true);
XYSeriesRenderer renderer7 = new XYSeriesRenderer();
renderer7.setColor(Color.parseColor("#00AAAA"));
renderer7.setDisplayChartValues(true);
XYSeriesRenderer renderer8 = new XYSeriesRenderer();
renderer8.setColor(Color.parseColor("#000000"));
renderer8.setDisplayChartValues(true);
mRenderer.addSeriesRenderer(renderer);
mRenderer.addSeriesRenderer(renderer2);
mRenderer.addSeriesRenderer(renderer3);
mRenderer.addSeriesRenderer(renderer4);
mRenderer.addSeriesRenderer(renderer5);
mRenderer.addSeriesRenderer(renderer6);
mRenderer.addSeriesRenderer(renderer7);
mRenderer.addSeriesRenderer(renderer8);
return ChartFactory.getBarChartView(context, dataset,mRenderer, Type.DEFAULT);
}
Edit (After applying Dan's suggestion)
My new code:
.........
mRenderer.setChartTitle("Submission Statistics");
mRenderer.setXTitle("Verdict Code");
mRenderer.setYTitle("No. of Submissions");
mRenderer.setAxesColor(Color.BLACK);
mRenderer.setApplyBackgroundColor(true);
mRenderer.setBackgroundColor(Color.WHITE);
mRenderer.setMarginsColor(Color.WHITE);
mRenderer.setZoomEnabled(true);
mRenderer.setBarSpacing(-0.5);
mRenderer.setMargins(new int[] {20, 30, 15, 0});
mRenderer.setShowLegend(false);
mRenderer.setAxisTitleTextSize(16);
mRenderer.setChartTitleTextSize(20);
mRenderer.setLabelsTextSize(15);
mRenderer.setLegendTextSize(15);
mRenderer.addXTextLabel(1, "AC");
mRenderer.addXTextLabel(2, "PE");
mRenderer.addXTextLabel(3, "WA");
mRenderer.addXTextLabel(4, "TL");
mRenderer.addXTextLabel(5, "ML");
mRenderer.addXTextLabel(6, "CE");
mRenderer.addXTextLabel(7, "RE");
mRenderer.addXTextLabel(8, "OT");
mRenderer.setBarWidth(50);
mRenderer.setXAxisMin(-2);
mRenderer.setXAxisMax(11);
mRenderer.setYAxisMin(0);
mRenderer.setYLabelsAlign(Align.RIGHT);
mRenderer.setXLabelsColor(Color.BLACK);
mRenderer.setYLabelsColor(0, Color.BLACK);
mRenderer.setXLabels(0);
mRenderer.setChartValuesTextSize(16);
.........
Now the problems are:
mRenderer.setChartValuesTextSize(size);
is not working as it is deprecated- Bar text remains small till now
- The highest bar is split off at the top
- X Axis Label is not in proper alignment with bar
Following your numbering scheme:
- You can fix this by setting the X axis min and max of the visible area:
mRenderer.setXAxisMin(min);
andmRenderer.setXAxisMax(max);
- You can reduce it by increasing the width or by using the above methods such as there is more space to the left and right.
- There is an opened issue for this.
- Try
mRenderer.setXLabelsColor(color);
renderer.setChartValuesTextSize(size);
mRenderer.setXLabels(0);
Edit:
- Use
renderer.setChartValuesTextSize(size);
- Same as #1.
mRenderer.setYAxisMax(300);
- Known issue: http://code.google.com/p/achartengine/issues/detail?id=312
I discovered that sizes are not correctly density calculated.
If u want:
mRenderer.setLabelsTextSize(15);
mRenderer.setLegendTextSize(15);
You need to set:
mRenderer.setLabelsTextSize(15* getResources().getDisplayMetrics().density);
mRenderer.setLegendTextSize(15* getResources().getDisplayMetrics().density);
I encounter the same problem. This is because AChartegine is trying to allocate enough space for each renderer so make a shift. This should simply resolved by Type.STACKED
Change
ChartFactory.getBarChartView(context, dataset,mRenderer, Type.DEFAULT);
to
ChartFactory.getBarChartView(context, dataset,mRenderer, Type.STACKED);
Hope this helps!
GraphicalView mChart = createIntent();
layout_graph.addView(mChart);
public GraphicalView createIntent() {
String[] titles = new String[] { " " };
List<Double> values = new ArrayList<Double>();
for (int i = 0; i < yaxes_value.size(); i++) {
// values.add(Double.parseDouble(yaxes_value.get(i)));
}
int[] colors = new int[] { Color.parseColor("#4DBA7A") };
XYMultipleSeriesRenderer renderer = buildBarRenderer(colors);
setChartSettings(renderer, "Simple Bar Chart", X_title, Y_title+type,
Color.BLACK, Color.BLACK,values);
for (int i = 0; i < Xaxes_value.size(); i++) {
renderer.addXTextLabel(i + 1, Xaxes_value.get(i));
}
int length = renderer.getSeriesRendererCount();
for (int i = 0; i < length; i++) {
SimpleSeriesRenderer seriesRenderer = renderer
.getSeriesRendererAt(i);
// seriesRenderer.setDisplayChartValues(true);
}
final GraphicalView grfv = ChartFactory.getBarChartView(
GraphActivity.this, buildBarDataset(titles, values), renderer,
Type.DEFAULT);
return grfv;
}
protected XYMultipleSeriesRenderer buildBarRenderer(int[] colors) {
XYMultipleSeriesRenderer renderer = new XYMultipleSeriesRenderer();
renderer.setAxisTitleTextSize(25);
renderer.setChartTitleTextSize(20);
renderer.setLabelsTextSize(20);
renderer.setLegendTextSize(20);
renderer.setPanEnabled(false, false);
renderer.setPanEnabled(false);
renderer.setZoomEnabled(false);
renderer.setZoomEnabled(false, false);
renderer.setBarSpacing(1f);
renderer.setBarWidth(50f);
renderer.setMarginsColor(Color.WHITE);
renderer.setXLabelsColor(Color.BLACK);
renderer.setYLabelsColor(0, Color.BLACK);
renderer.setApplyBackgroundColor(true);
renderer.setXLabelsAngle(335);
int length = colors.length;
for (int i = 0; i < length; i++) {
SimpleSeriesRenderer r = new SimpleSeriesRenderer();
r.setColor(colors[i]);
r.setChartValuesSpacing(10);
renderer.addSeriesRenderer(r);
}
return renderer;
}
protected XYMultipleSeriesDataset buildBarDataset(String[] titles,
List<Double> values) {
XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
int length = titles.length;
for (int i = 0; i < length; i++) {
CategorySeries series = new CategorySeries(titles[i]);
for (int j = 0; j < values.size(); j++) {
series.add(values.get(j));
}
dataset.addSeries(series.toXYSeries());
}
return dataset;
}
protected void setChartSettings(XYMultipleSeriesRenderer renderer,
String title, String xTitle, String yTitle, int axesColor,
int labelsColor,List<Double> values) {
renderer.setChartTitle(title);
renderer.setYLabelsAlign(Align.RIGHT);
renderer.setXTitle(xTitle);
renderer.setYTitle(yTitle);
renderer.setXAxisMin(0);
renderer.setXLabels(0);
renderer.setXLabelsPadding(10);
renderer.setYLabelsPadding(2);
renderer.setYAxisMin(0);
renderer.setMargins(new int[] { 40, 100, 40, 20 });
// renderer.setYAxisMin((Collections.min(values)) / 2);
// renderer.setYAxisMax((Collections.max(values))
// + (Collections.min(values)));
renderer.setXAxisMax(layout_addrow.getChildCount() + 1);
renderer.setAxesColor(axesColor);
renderer.setLabelsColor(labelsColor);
}
来源:https://stackoverflow.com/questions/17681287/how-to-display-achartengine-bar-chart-properly