Sunday, June 11, 2017

How to make a CombinedChart have two different scales on MPAndroidChart?

Leave a Comment

I have a CombinedChart and I would like that LineChart will take left axis as reference and BarChart will take right axis as reference but I could not get it out.

I am trying the following code:

barDataSet.setAxisDependency(YAxis.AxisDependency.RIGHT); lineDataSet.setAxisDependency(YAxis.AxisDependency.LEFT); 

but now both charts (LineChart and BarChart) are on the left (mixing them and right axis have disappeared).

Left and right axis have different granularity.

How can I properly make that each chart takes as reference one different Y axis (left or right respectively)?

Thanks in advance!

1 Answers

Answers 1

This is certainly possible in MPAndroidChart version 3.0.2.

As you can observe from the screenshot below, the LineDataSet has AxisDependency.LEFT (scaled from 0 - 21) while the BarDataSet has AxisDependency.RIGHT (scaled from 0 - 50) and, as required, they have different granularity:

a chart with the LineDataSet dependent on the left and the BarDataSet dependent on the right axis

Here is a proof of concept for generating the above chart that is a simple adaptation of the example project on GitHub:

import android.graphics.Color; import android.os.Bundle; import android.support.v4.app.FragmentActivity; import android.view.WindowManager;  import com.github.mikephil.charting.charts.CombinedChart; import com.github.mikephil.charting.charts.CombinedChart.DrawOrder; import com.github.mikephil.charting.components.AxisBase; import com.github.mikephil.charting.components.Legend; import com.github.mikephil.charting.components.XAxis; import com.github.mikephil.charting.components.XAxis.XAxisPosition; import com.github.mikephil.charting.components.YAxis; import com.github.mikephil.charting.data.BarData; import com.github.mikephil.charting.data.BarDataSet; import com.github.mikephil.charting.data.BarEntry; import com.github.mikephil.charting.data.CombinedData; import com.github.mikephil.charting.data.Entry; import com.github.mikephil.charting.data.LineData; import com.github.mikephil.charting.data.LineDataSet; import com.github.mikephil.charting.formatter.IAxisValueFormatter;  import java.util.ArrayList;  public class CombinedChartActivity extends FragmentActivity {      private String[] mMonths = new String[] {             "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"     };      private CombinedChart mChart;     private final int itemcount = 12;      @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_combined);          mChart = (CombinedChart) findViewById(R.id.chart1);         mChart.getDescription().setEnabled(false);         mChart.setBackgroundColor(Color.WHITE);         mChart.setDrawGridBackground(false);         mChart.setDrawBarShadow(false);         mChart.setHighlightFullBarEnabled(false);          mChart.setDrawOrder(new DrawOrder[]{                 DrawOrder.BAR, DrawOrder.BUBBLE, DrawOrder.CANDLE, DrawOrder.LINE, DrawOrder.SCATTER         });          Legend l = mChart.getLegend();         l.setWordWrapEnabled(true);         l.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);         l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.CENTER);         l.setOrientation(Legend.LegendOrientation.HORIZONTAL);         l.setDrawInside(false);          YAxis rightAxis = mChart.getAxisRight();         rightAxis.setDrawGridLines(false);         rightAxis.setGranularity(10f);         rightAxis.setAxisMinimum(0f);          YAxis leftAxis = mChart.getAxisLeft();         leftAxis.setDrawGridLines(false);         rightAxis.setGranularity(1f);         leftAxis.setAxisMinimum(0f);          XAxis xAxis = mChart.getXAxis();         xAxis.setPosition(XAxisPosition.BOTH_SIDED);         xAxis.setAxisMinimum(0f);         xAxis.setGranularity(1f);         xAxis.setValueFormatter(new IAxisValueFormatter() {             @Override             public String getFormattedValue(float value, AxisBase axis) {                 return mMonths[(int) value % mMonths.length];             }         });          CombinedData data = new CombinedData();          data.setData(generateLineData());         data.setData(generateBarData());          xAxis.setAxisMaximum(data.getXMax() + 0.25f);          mChart.setData(data);         mChart.invalidate();     }      private LineData generateLineData() {          LineData d = new LineData();          ArrayList<Entry> entries = new ArrayList<Entry>();          for (int index = 0; index < itemcount; index++)             entries.add(new Entry(index + 0.5f, getRandom(15, 5)));          LineDataSet set = new LineDataSet(entries, "Line DataSet");         set.setColor(Color.rgb(0,100,0));         set.setLineWidth(2.5f);         set.setCircleColor(Color.rgb(0,100,0));         set.setCircleRadius(5f);         set.setFillColor(Color.rgb(0,100,0));         set.setMode(LineDataSet.Mode.CUBIC_BEZIER);         set.setDrawValues(true);         set.setValueTextSize(10f);         set.setValueTextColor(Color.rgb(0,100,0));          set.setAxisDependency(YAxis.AxisDependency.LEFT);         d.addDataSet(set);          return d;     }      private BarData generateBarData() {         ArrayList<BarEntry> entries = new ArrayList<BarEntry>();          for (int index = 0; index < itemcount; index++) {             entries.add(new BarEntry(index, getRandom(25, 25)));         }          BarDataSet set = new BarDataSet(entries, "Bar DataSet");         set.setColor(Color.rgb(60, 220, 78));         set.setValueTextColor(Color.rgb(60, 220, 78));         set.setValueTextSize(10f);         set.setAxisDependency(YAxis.AxisDependency.RIGHT);          return new BarData(set);     }      private float getRandom(float range, float startsfrom) {         return (float) (Math.random() * range) + startsfrom;     } } 
If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment