How can I set background color for the space between two x grid in AchartEngine

Question

I have created a bar chart using AchartEngine. I like to set different color for the space between two x grid, like the image below. And also how to remove "-" symbol in each axis label.( Need to remove "-" present in 4hr-). If setting color is not possible, I like to show only 4 y labels, with highest value at top. And also I like to fix the space between two labels by myself. And I also need to add hr or some other text for the y labels. The below code is what I use.And also in some device for value 0, a thin line get displayed. I don't want that, if value is greater than 0 only bar should be present. And I get like this. I want the chart to be like the one at the end of the question.

        int largest = y[0];
        for (int i = 1; i < y.length; i++) {
            if (y[i] > largest) {
                largest = y[i];
            }
        }
        CategorySeries series = new CategorySeries("");
        for (int i = 0; i < y.length; i++) {

            series.add("Bar" + (i + 1), y[i]);
        }

        XYMultipleSeriesDataset dataSet = new XYMultipleSeriesDataset();
        dataSet.addSeries(series.toXYSeries()); // number of series

        // customization of the chart

        XYSeriesRenderer renderer = new XYSeriesRenderer(); // one renderer for
                                                            // one series
        renderer.setColor(Color.RED);
        renderer.setDisplayChartValues(false);
        renderer.setChartValuesSpacing((float) 5.5d);
        renderer.setLineWidth((float) 1.5d);

        XYMultipleSeriesRenderer mRenderer = new XYMultipleSeriesRenderer();

        mRenderer.addSeriesRenderer(renderer);
        // mRenderer.setChartTitle("Demo Graph");
        // mRenderer.setXTitle("xValues");

        mRenderer.setYTitle("minutes");

        mRenderer.setLabelsColor(getResources().getColor(R.color.txt_blue));

        mRenderer.setShowGridX(false); // this will show the grid in graph
        mRenderer.setShowGridY(false);
        // mRenderer.setAntialiasing(true);
        mRenderer.setBarSpacing(.5); // adding spacing between the line or
                                        // stacks
        // mRenderer.setApplyBackgroundColor(true);
        // mRenderer.setBackgroundColor(Color.BLACK);
        mRenderer.setXAxisMin(0);
        mRenderer.setYAxisMin(0);
        mRenderer.setXAxisMax(7);
        mRenderer.setZoomInLimitY(10);
        if (largest < 6) {
            mRenderer.setYAxisMax(6);
        } else {
            mRenderer.setYAxisMax(largest);
        }
        mRenderer.setScale(4);

        mRenderer.setXLabels(0);
        mRenderer.addXTextLabel(1, "Sun");
        mRenderer.addXTextLabel(2, "Mon");
        mRenderer.addXTextLabel(3, "Tue");
        mRenderer.addXTextLabel(4, "Wed");
        mRenderer.addXTextLabel(5, "Thu");
        mRenderer.addXTextLabel(6, "Fri");
        mRenderer.addXTextLabel(7, "Sat");
        // mRenderer.setYLabels(0);
        //
        // mRenderer.addYTextLabel(2, "2 min");
        //
        // mRenderer.addYTextLabel(4, "4 min");
        //
        // mRenderer.addYTextLabel(6, "6 min");
        // mRenderer.addYTextLabel(7, "Sat");
        mRenderer.setXLabelsColor(getResources().getColor(R.color.txt_blue));
        mRenderer.setYLabelsColor(0, getResources().getColor(R.color.txt_blue));
        mRenderer.setLabelsColor(getResources().getColor(R.color.txt_blue));
        // mRenderer.setYLabelsAlign(Align.RIGHT);
        mRenderer.setYLabelsPadding(20);
        mRenderer.setPanEnabled(false, false);
        mRenderer.setZoomEnabled(false, false);
        mRenderer.setPanEnabled(false, false); // will fix the chart position
        // Intent intent = ChartFactory.getBarChartIntent(context, dataSet,
        // mRenderer,Type.DEFAULT);
        mRenderer.setBarSpacing(1);
        // mRenderer.setYLabelsPadding(5);
        mRenderer.setMarginsColor(Color.argb(0x00, 0x01, 0x01, 0x01));
        mRenderer.setShowAxes(false);
        // mRenderer.setXAxisMin(-0.5);
        // 1080 x 1920
        if (screen_width == 480 && screen_height == 800) {

            mRenderer.setAxisTitleTextSize(15);
            mRenderer.setLabelsTextSize(15);
        } else if (screen_width > 480 && screen_width < 1000
                && screen_height > 800 && screen_height < 1700) {
            mRenderer.setAxisTitleTextSize(20);
            mRenderer.setLabelsTextSize(20);
        }

        else if (screen_width > 1000 && screen_height > 1700) {
            mRenderer.setAxisTitleTextSize(30);
            mRenderer.setLabelsTextSize(30);
        } else if (screen_width < 480 && screen_height < 800) {
            mRenderer.setAxisTitleTextSize(10);
            mRenderer.setLabelsTextSize(10);
        }

        mRenderer.setShowLegend(false);

        mChart = (GraphicalView) ChartFactory.getBarChartView(getBaseContext(),
                dataSet, mRenderer, Type.DEFAULT);

        // Adding the Line Chart to the LinearLayout
        chartContainer.addView(mChart);

Answer 1

Two things:

• The way I get this kind of backgrounds is to add stacked bar series with one value on the x-axis and as much values on the y-axis as you need. Than render this stacked bar first and let the real bar chart render on top of it. The other way, to set the background color transparent and have a background drawable behind the chart, is difficult. I tried that but I didn't find a way to synchronize the background with the value in the chart (basically I gave up on this and was succesful with the `Background-series").

• Eliminate the dash: My idea was, to set the dash to an transparent color. But the color depends in AChartEngine on the color of the labels, not - as one might expect - on the color of the axis. So, without rewriting parts of the Renderer it's not possible in this version (currently 1.1) to eliminate the dash on a value.

EDIT: Example for first point.

Here's some short code to produce the background for itself.

public Intent execute(Context context) {
    // The demo source counts series by number of titles here
    String[] titles = new String[] { "The Background", "", "" };

    // "stacked" values. The highest first. It's printed first.
    List<double[]> values = new ArrayList<double[]>();
    values.add(new double[] { 6d, 6d, 6d, 6d, 6d, 6d, 6d });
    values.add(new double[] { 4d, 4d, 4d, 4d, 4d, 4d, 4d });
    values.add(new double[] { 2d, 2d, 2d, 2d, 2d, 2d, 2d });

    // Background colors. Here blue and white to actually differentiate it
    int[] colors = new int[] { Color.BLUE, Color.WHITE, Color.BLUE};

   // Some settings for the renderer. Change as necessary
    XYMultipleSeriesRenderer renderer = buildBarRenderer(colors);
    setChartSettings(
        renderer, "", "", "", 1d, 7d, 0d, 6d,
        Color.TRANSPARENT, Color.TRANSPARENT);
    renderer.setXLabels(0);
    renderer.setYLabels(0);
    renderer.setPanEnabled(false, false);
    renderer.setZoomEnabled(false);
    renderer.setBarSpacing(0d);
    renderer.setShowLegend(false);

    // done. start activity with given intent
    return ChartFactory.getBarChartIntent(
        context, buildBarDataset(titles, values), renderer, Type.STACKED);
}

• I've used the demo source to have the code here as short as possible. The methods I use are buildBarRenderer, buildBarDataset and setChartSettings. You can find them all in the AbstractDemoChart class.

  • The min and max values are hardcoded to 1-7 (for weekdays) and 0-6 for y-values. Also, the settings are just the keep away all decorations. In your case you set them as you've shown in your example.

  • As aChartEngine has no real concept of stacked bars - it just draws the bars behind each other, so that the one with the highest value is seen above the others - you just need to add your values now at the end of the values list as new series.