combination of two bar chart and two line chart using aChartEngine in Android

Question

below code to combine two bar and two line chart :

public class GraphCombination {

private Context context;
private String[] weekDays = new String[] { "Sunday", "Monday", "Tuesday",
        "Wednesday", "Thrusday", "Friday", "Saturday" };
private XYSeriesRenderer lowestTempBarRenderer, highestTempBarRenderer,
        lowestTempLineRenderer, highestTempLineRenderer;
private XYMultipleSeriesRenderer multiRenderer;
private int margins[] = { 50, 50, 50, 50 };

public GraphCombination(Context context) {
    this.context = context;
}

public void drawChart() {
    int days[] = { 0, 1, 2, 3, 4, 5, 6 };
    double lowestTemp[] = { 23.5, 25.2, 27.8, 21.2, 26.3, 27.1, 22.6 };
    double highestTemp[] = { 38.2, 39.4, 40.8, 36.1, 39.9, 41.1, 38.5 };

    XYSeries lowestTempSeries = new XYSeries("Lowest Temperature");
    XYSeries highestTempSeries = new XYSeries("Highest Temperature");
    for (int i = 0; i < days.length; i++) {
        lowestTempSeries.add(i, lowestTemp[i]);
        highestTempSeries.add(i, highestTemp[i]);
    }

    XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();

    dataset.addSeries(highestTempSeries);
    dataset.addSeries(lowestTempSeries);
    dataset.addSeries(highestTempSeries);
    dataset.addSeries(lowestTempSeries);

    setLowestTempBarRenderer();
    setHighestTempBarRenderer();
    setLowestTempLineRenderer();
    setHighestTempLineRenderer();
    setMultiRenderer();

    for (int i = 0; i < days.length; i++) {
        multiRenderer.addXTextLabel(i, weekDays[i]);
    }

    multiRenderer.addSeriesRenderer(highestTempBarRenderer);
    multiRenderer.addSeriesRenderer(lowestTempBarRenderer);
    multiRenderer.addSeriesRenderer(highestTempLineRenderer);
    multiRenderer.addSeriesRenderer(lowestTempLineRenderer);

    Intent intent = ChartFactory.getCombinedXYChartIntent(context, dataset,
            multiRenderer, new String[] { BarChart.TYPE, BarChart.TYPE,
                    LineChart.TYPE, LineChart.TYPE }, "Combined Chart");
    context.startActivity(intent);

}

private void setLowestTempBarRenderer() {

    lowestTempBarRenderer = new XYSeriesRenderer();
    lowestTempBarRenderer.setColor(context.getResources().getColor(
            R.color.lowTemp));
    lowestTempBarRenderer.setFillPoints(true);
    lowestTempBarRenderer.setLineWidth(1);
    lowestTempBarRenderer.setChartValuesTextAlign(Align.RIGHT);
    lowestTempBarRenderer.setChartValuesTextSize(15f);
    lowestTempBarRenderer.setDisplayChartValues(true);
}

private void setHighestTempBarRenderer() {

    highestTempBarRenderer = new XYSeriesRenderer();
    highestTempBarRenderer.setColor(context.getResources().getColor(
            R.color.highTemp));
    highestTempBarRenderer.setFillPoints(true);
    highestTempBarRenderer.setLineWidth(1);
    highestTempBarRenderer.setChartValuesTextAlign(Align.RIGHT);
    highestTempBarRenderer.setChartValuesTextSize(15f);
    highestTempBarRenderer.setDisplayChartValues(true);
}

private void setMultiRenderer() {

    multiRenderer = new XYMultipleSeriesRenderer();
    multiRenderer.setChartTitle("Bar Chart and Line Chart");
    multiRenderer.setXTitle("Week Days");
    multiRenderer.setYTitle("Temperature in celsius");

    multiRenderer.setXAxisMin(-1);
    multiRenderer.setXAxisMax(7);
    multiRenderer.setYAxisMin(15);
    multiRenderer.setYAxisMax(45);

    multiRenderer.setLabelsTextSize(17f);
    multiRenderer.setLegendTextSize(20f);
    multiRenderer.setAxisTitleTextSize(25f);
    multiRenderer.setMargins(margins);
    multiRenderer.setChartTitleTextSize(30f);

    multiRenderer.setApplyBackgroundColor(true);
    multiRenderer.setBackgroundColor(context.getResources().getColor(
            R.color.background));
    multiRenderer.setYLabelsAlign(Align.RIGHT);
    multiRenderer.setBarSpacing(1);
    multiRenderer.setZoomButtonsVisible(false);
    multiRenderer.setPanEnabled(false);

    multiRenderer.setXLabels(0);

}

private void setLowestTempLineRenderer() {
    lowestTempLineRenderer = new XYSeriesRenderer();
    lowestTempLineRenderer.setColor(context.getResources().getColor(
            R.color.lowTemp));
    lowestTempLineRenderer.setFillPoints(true);
    lowestTempLineRenderer.setLineWidth(3);
    lowestTempLineRenderer.setChartValuesTextAlign(Align.CENTER);
    lowestTempLineRenderer.setChartValuesTextSize(15f);
    lowestTempLineRenderer.setDisplayChartValues(false);
}

private void setHighestTempLineRenderer() {
    highestTempLineRenderer = new XYSeriesRenderer();
    highestTempLineRenderer.setColor(context.getResources().getColor(
            R.color.highTemp));
    highestTempLineRenderer.setFillPoints(true);
    highestTempLineRenderer.setLineWidth(3);
    highestTempLineRenderer.setChartValuesTextAlign(Align.CENTER);
    highestTempLineRenderer.setChartValuesTextSize(15f);
    highestTempLineRenderer.setDisplayChartValues(false);
}
}

due to above code i got this type of graph :

and i want this type of graph :

so how to avoid overlapping in two bar chart..??

Answer 1

just change this one

 for (int i = 0; i < days.length; i++) {
    lowestTempSeries.add(i, lowestTemp[i]);
    highestTempSeries.add(i, highestTemp[i]);
   }

with this :

for (int i = 0, j = 0; i < days.length; i++, j += 2) {
        lowestTempSeries.add(j, lowestTemp[i]);
        highestTempSeries.add(j + 0.9, highestTemp[i]);
    }

and also change this :

  for (int i = 0; i < days.length; i++) {
    multiRenderer.addXTextLabel(i, weekDays[i]);
}

with this :

    for (int i = 0, j = 1; i < days.length; i++, j += 2) {
        multiRenderer.addXTextLabel(j - 0.5, weekDays[i]);
    }