How to make MPAndroidChart background like this?

Question

Designer sent me chart that look like this:

enter image description here

But I do not know how to make background like that, becase this chart background have as you can see two different colors that changes for every chart item.

Here is my result:

enter image description here

Is possible to make chart background as designer made it?

score 1 · Answer 1 · edited May 23 '17 at 12:31

I guess @abhinav means something like this:

@Override
protected void onCreate(final Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.chart);

    //
    // configure chart
    final CombinedChart chart = (CombinedChart) findViewById(R.id.chart);

    // prepare labels on x-axis
    final List<String> labels = new ArrayList<>();
    labels.add("MAY 22");
    labels.add("MAY 23");
    labels.add("MAY 24");
    labels.add("MAY 25");
    labels.add("MAY 26");
    labels.add("MAY 27");
    labels.add("MAY 28");

    // prepare data for line graph
    final List<Entry> ratesEntries = new ArrayList<>();
    ratesEntries.add(new Entry(85f, 0));
    ratesEntries.add(new Entry(75f, 1));
    ratesEntries.add(new Entry(15f, 2));
    ratesEntries.add(new Entry(40f, 3));
    ratesEntries.add(new Entry(75f, 4));
    ratesEntries.add(new Entry(60f, 5));
    ratesEntries.add(new Entry(0f, 6));

    final List<ILineDataSet> ratesDatasets = new ArrayList<>();
    ratesDatasets.add(createRatesDataset(ratesEntries));

    // prepare data for bar graph
    final BarData periodBarData = new BarData(labels);

    List<BarEntry> periodEntries;

    periodEntries = new ArrayList<>();
    periodEntries.add(new BarEntry(100f, 0));
    periodEntries.add(new BarEntry(100f, 2));
    periodEntries.add(new BarEntry(100f, 4));
    periodEntries.add(new BarEntry(100f, 6));

    BarDataSet periodDataset;

    periodDataset = new BarDataSet(periodEntries, null);
    periodDataset.setColor(Color.parseColor("#ccd2c0ff")); // transparency 80%
    periodDataset.setDrawValues(false);
    periodDataset.setBarSpacePercent(0);
    periodBarData.addDataSet(periodDataset);

    periodEntries = new ArrayList<>();
    periodEntries.add(new BarEntry(100f, 1));
    periodEntries.add(new BarEntry(100f, 3));
    periodEntries.add(new BarEntry(100f, 5));

    periodDataset = new BarDataSet(periodEntries, null);
    periodDataset.setColor(Color.parseColor("#ccc0daff")); // transparency 80%
    periodDataset.setDrawValues(false);
    periodDataset.setBarSpacePercent(0);
    periodBarData.addDataSet(periodDataset);

    // prepare data for combined chart
    final CombinedData data = new CombinedData(labels);
    data.setData(new LineData(labels, ratesDatasets));
    data.setData(periodBarData);

    chart.setData(data);
}

private ILineDataSet createRatesDataset(final List<Entry> entries) {
    final LineDataSet d = new LineDataSet(entries, null);
    d.setColor(Color.BLUE);
    d.setLineWidth(2.5f);
    d.setCircleColor(Color.BLUE);
    d.setCircleRadius(5f);
    d.setFillColor(Color.BLUE);
    d.setDrawCubic(true);
    d.setDrawValues(false);
    d.setValueTextSize(10f);
    d.setValueTextColor(Color.BLUE);
    d.setAxisDependency(YAxis.AxisDependency.LEFT);

    return d;
}

Note that the bars have 80% in alpha channel (for more information look here: How to make a background 20% transparent on Android).

score 0 · Answer 2 · answered Aug 05 '15 at 10:58

0

You can plot the combined chart [see this].

There is a trick to draw a graph as you mention. In the combined chart, draw the bar-chart with maximum values and set color as you want it.

answered Aug 05 '15 at 10:58

abhi

1,412
19
25

On link that you added chart does not look like mine. Can you please add example code for background like mine? – Zookey Aug 05 '15 at 11:12
You can draw bar chart with two BarDataSet(s) and give different colors to these sets. Also, set the spacing between bars as 0f. You will get the same background. – abhi Aug 05 '15 at 11:15

How to make MPAndroidChart background like this?

2 Answers2