How to Display AChartEngine bar chart properly

Question

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:

1. the left and right portion of graph are lost in 1:1 view.
2. The distance between Bar is so much high. I need to reduce it.
3. The Bar is not appropriately above the text label.
4. The text label color is white. I tried setLabelColor() but not working.
5. The text-size above bar is small.
6. 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:

1. mRenderer.setChartValuesTextSize(size); is not working as it is deprecated
2. Bar text remains small till now
3. The highest bar is split off at the top
4. X Axis Label is not in proper alignment with bar

Answer 1

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); 

Answer 2

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!

Answer 3

   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);

    }

Answer 4

Following your numbering scheme:

1. You can fix this by setting the X axis min and max of the visible area: mRenderer.setXAxisMin(min); and mRenderer.setXAxisMax(max);
2. 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.
3. There is an opened issue for this.
4. Try mRenderer.setXLabelsColor(color);
5. renderer.setChartValuesTextSize(size);
6. mRenderer.setXLabels(0);

Edit:

1. Use renderer.setChartValuesTextSize(size);
2. Same as #1.
3. mRenderer.setYAxisMax(300);
4. Known issue: http://code.google.com/p/achartengine/issues/detail?id=312