Diesel
Diesel

Reputation: 519

With MPandroidChart display info when tapping on each bar

I'm using MPAndroidChart (V3.0.1) and I'm trying to find a way to display more information when the user taps on each column while using a BarChart.

Each column will eventually have some additional statistics that will displayed only after they've been tapped on.

I've read through the documentation, but if it's there I've either missed it, or simply don't understand what I've read (not a professional coder).

Here is what I've got for my program so far,

public class MainActivity extends AppCompatActivity {

protected BarChart chart;

String[] NameArray = {"a1","a2","a3","a4","a5","a6","a7","a8","a9","a10","a11"};

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

    setContentView(R.layout.activity_main);
    chart = (BarChart) findViewById(R.id.chart1);

    Description desc ;
    Legend L;

    L = chart.getLegend();
    desc = chart.getDescription();
    desc.setText(""); 
    L.setEnabled(false);

    YAxis leftAxis = chart.getAxisLeft();
    YAxis rightAxis = chart.getAxisRight();
    XAxis xAxis = chart.getXAxis();

    xAxis.setPosition(XAxisPosition.BOTTOM);
    xAxis.setTextSize(10f);
    xAxis.setDrawAxisLine(true);
    xAxis.setDrawGridLines(false);
    xAxis.setDrawLabels(true);
    xAxis.setValueFormatter(new MyXAxisValueFormatter( NameArray));

    leftAxis.setTextSize(10f);
    leftAxis.setDrawLabels(false);
    leftAxis.setDrawAxisLine(true);
    leftAxis.setDrawGridLines(false);

    rightAxis.setDrawAxisLine(false);
    rightAxis.setDrawGridLines(false);
    rightAxis.setDrawLabels(false);


    BarData data = new BarData(  setData());


    data.setBarWidth(0.9f); // set custom bar width
    chart.setData(data);

    chart.setFitBars(true); // make the x-axis fit exactly all bars
    chart.invalidate(); // refresh
    chart.setScaleEnabled(false);

    chart.setDoubleTapToZoomEnabled(false);
    chart.setBackgroundColor(Color.rgb(255, 255, 255));
    chart.animateXY(2000, 2000);
    chart.setDrawBorders(false);
    chart.setDescription(desc);
    chart.setDrawValueAboveBar(true);//



}


private BarDataSet setData() {

    ArrayList<BarEntry> entries = new ArrayList<>();

    entries.add(new BarEntry(0f, 30f, "VB"));
    entries.add(new BarEntry(1f, 80f, "V0"));
    entries.add(new BarEntry(2f, 60f, "V1"));
    entries.add(new BarEntry(3f, 50f, "V2"));
    entries.add(new BarEntry(4f, 70f, "V3"));
    entries.add(new BarEntry(5f, 60f, "V4"));

    BarDataSet set = new BarDataSet(entries,"");

    set.setValueTextColor(Color.rgb(155, 155, 155));
    set.setValueFormatter(new MyValueFormatter());
    set.setColor(Color.rgb(155, 155, 155));
      return set;
}

public class MyValueFormatter implements IValueFormatter{
    @Override
    public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler)
    {
        return "V" + (int)value;
    }
}


public class MyXAxisValueFormatter implements IAxisValueFormatter {

    private String[] mValues;

    private MyXAxisValueFormatter(String[] values) {

        this.mValues = values;
    }

    @Override
    public String getFormattedValue(float value, AxisBase axis) {         
        return mValues[(int) value];
    }


}

Simplified Question

When the user taps one of the columns of data in the chart, I would like my TextViews (not presently in my code) to display additional information about the column, for example the average, and variance of the data column.

Upvotes: 0

Views: 1504

Answers (1)

Hassan M Ashraful
Hassan M Ashraful

Reputation: 149

In your onCreate() method add this line,

chart.setOnChartValueSelectedListener(this);

So you can tap to column and show additional data. Add this functions,

    protected RectF mOnValueSelectedRectF = new RectF();

    @Override
    public void onValueSelected(Entry e, Highlight h) {

        if (e == null)
            return;

        RectF bounds = mOnValueSelectedRectF;
        chart.getBarBounds((BarEntry) e, bounds);
        MPPointF position = mChart.getPosition(e, AxisDependency.LEFT);

        Log.i("bounds", bounds.toString());
        Log.i("position", position.toString());

        Log.i("x-index",
                "low: " + chart.getLowestVisibleX() + ", high: "
                        + chart.getHighestVisibleX());

        MPPointF.recycleInstance(position);
    }

    @Override
public void onNothingSelected() { }

Upvotes: 1

Related Questions