Android bar chart with Tooltip example

Hii Developer in this Android Tutorial, I am sharing how to make an Android bar chart with Tooltip example to show bar value in android. In this Android example, I am getting data for a rest API  and API response we show in a bar chart. Add on this user can click on the Bar chart showing a Tooltip for Bar Value and Title.

Android bar chart with Tooltip example shows data with server API. In today’s customer requirements and user-friendly app-making I very difficult to show we can add a new thing with a bar chart to show data in Bar chart Tooltip. So Just Follow these Simple Steps for Do.

Step 1:-  Add PhilJay MPAndroidChart Bar Chart Chart Dependency.

implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'

 Step 2: Make a Bar Chart Layout in your XML file and add these.

<com.github.mikephil.charting.charts.BarChart
    android:id="@+id/Monitoring_Memory_PieChart"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:minHeight="320dp" />

Step 3: Implement a java class and add an API response on the Bar Chart.

public class Home extends AppCompatActivity implements OnChartValueSelectedListener {
BarChart BarChart;
ArrayList<DataObject> CPU_BarChart = new ArrayList<>();
ArrayList<String> serviceCPUStringList = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_advanced_monitoring_home);
    FindViewById();
    androidx.appcompat.app.ActionBar actionBar = getSupportActionBar();
    actionBar.setHomeButtonEnabled(true);
    actionBar.setDisplayHomeAsUpEnabled(true);
    actionBar.setTitle("Codeplayon");
    BarChart =(BarChart)findViewById(R.id.Monitoring_CPU_PieChart);
    initializeCPUBarChart()
    Service_CpuCout();
}

private void initializeCPUBarChart() {
        BarChart.getDescription().setEnabled(false);
        BarChart.setPinchZoom(true);
        BarChart.getAxisLeft().setDrawGridLines(false);
        BarChart.getAxisRight().setDrawGridLines(false);
        BarChart.getAxisRight().setEnabled(false);
        BarChart.animateY(1500);
        BarChart.getLegend().setEnabled(false);
        BarChart.getAxisRight().setDrawLabels(false);
        BarChart.setDoubleTapToZoomEnabled(false);
        Monitoring_CPU_BarChart.setOnChartValueSelectedListener(this);
        Monitoring_CPU_BarChart.setDrawBarShadow(false);
        BarChart.setDrawValueAboveBar(true);
        BarChart.getDescription().setEnabled(false);
        // scaling can now only be done on x- and y-axis separately
        BarChart.setDrawGridBackground(false);
        // chart.setDrawYLabels(false);
        XAxis xAxis = BarChart.getXAxis();
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
//        xAxis.setTypeface(tfLight);
        xAxis.setDrawGridLines(false);
        xAxis.setGranularity(1f); // only intervals of 1 day
        xAxis.setLabelCount(7);
        ValueFormatter custom = new MyValueFormatter("");
        YAxis leftAxis = BarChart.getAxisLeft();
//        leftAxis.setTypeface(tfLight);
        leftAxis.setLabelCount(8, false);
        leftAxis.setValueFormatter(custom);
        leftAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);
        leftAxis.setSpaceTop(15f);
        leftAxis.setAxisMinimum(0f); // this repla
    }

private void Service_CpuCout() {
        loading_CPU_BarChart.setVisibility(View.VISIBLE);
        // Enter the correct url for your api service site
        JsonObjectRequest jsonObjectRequest = new JsonObjectRequest(Request.Method.GET, ConfiURL.Top_Five_ServiceCPU+"?serviceName=CPU&noOfHost=5&graphType=SRV", null,
                new Response.Listener<JSONObject>() {
                    @Override
                    public void onResponse(JSONObject response) {
//                        Toast.makeText(mActivity, "String Response : " + response.toString(), Toast.LENGTH_LONG).show();
                        try {
                            loading_CPU_BarChart.setVisibility(View.GONE);
                            CUPRetry_Button.setVisibility(View.GONE);
                            Log.d("JSON", String.valueOf(response));
                            String Error = response.getString("httpStatus");
                            if (Error.equals("OK")) {
                                JSONObject body = response.getJSONObject("body");
                                JSONObject Response =body.getJSONObject("Response");
                                JSONArray  Services = Response.getJSONArray("Services");
                                for (int i = 0; i < Services.length(); i++) {
                                    JSONObject json_data = Services.getJSONObject(i);
                                    JSONArray service = json_data.getJSONArray("service");
                                    onPostServiceCpulist(service);
                                }
                            }else if(Error.equalsIgnoreCase("UNAUTHORIZED")){

                            }
                        } catch (JSONException e) {
                            e.printStackTrace();
                            loading_CPU_BarChart.setVisibility(View.GONE);
                        }
                    }
                }, error -> {
            VolleyLog.d("Error", "Error: " + error.getMessage());
            loading_CPU_BarChart.setVisibility(View.GONE);
            Monitoring_CPU_BarChart.setNoDataText("No chart data available. kindly refresh it");
            CUPRetry_Button.setVisibility(View.VISIBLE);
            if (error instanceof TimeoutError || error instanceof NoConnectionError) {


            } else if (error instanceof AuthFailureError) {

                //TODO
            } else if (error instanceof ServerError) {

                //TODO
            } else if (error instanceof NetworkError) {

                //TODO
            } else if (error instanceof ParseError) {

            }
        }) {
            @Override
            public String getBodyContentType() {
                return "application/json; charset=utf-8";
            }

            @Override
            public Map<String, String> getHeaders() throws AuthFailureError {
                HashMap<String, String> headers = new HashMap<String, String>();
                headers.put("Authorization", new SessionManagement().getSavedToken(AdvancedMonitoringHome.this));
                return headers;
            }
        };
        requestQueue = Volley.newRequestQueue(getApplicationContext());
        jsonObjectRequest.setRetryPolicy(new DefaultRetryPolicy(10000, DefaultRetryPolicy.DEFAULT_MAX_RETRIES, DefaultRetryPolicy.DEFAULT_BACKOFF_MULT));
        requestQueue.add(jsonObjectRequest);
    }

    protected void onPostServiceCpulist(JSONArray result) {
        //this method will be running on UI thread
        ArrayList<DataObject> data = new ArrayList<>();
        data.equals(null);
        try {
            // Extract data from json and store into ArrayList as class objects
            for (int i = 0; i < result.length(); i++) {
                JSONObject json_data = result.getJSONObject(i);
                DataObject report = new DataObject();
                report.mText2 = json_data.getString("perfometer");
                String thisString=json_data.getString("alias");
                String first ;//"hello"
                if (thisString.length() > 7)
                {
                    first = thisString.substring(0, 7);
                }
                else
                {
                    first = thisString;
                }

                report.mText3 = first+"...";
                data.add(report);
                serviceCPUStringList.add(report.mText3);
            }
            CPU_BarChart = data;
            createCPUBarChart(CPU_BarChart);

        } catch (JSONException e) {
        }
    }
    private void createCPUBarChart(ArrayList<DataObject> severityListServer) {
        ArrayList<BarEntry> values = new ArrayList<>();

        for (int i = 0; i < severityListServer.size(); i++) {
            DataObject dataObject = severityListServer.get(i);
            values.add(new BarEntry(i, Integer.parseInt(dataObject.mText2)));
        }

        BarDataSet set1;

        if (BarChart.getData() != null && BarChart.getData().getDataSetCount() > 0) {
            set1 = (BarDataSet) BarChart.getData().getDataSetByIndex(0);
            set1.setValues(values);
            BarChart.getData().notifyDataChanged();
            BarChart.notifyDataSetChanged();
        } else {
            set1 = new BarDataSet(values, "Data Set");
            set1.setColors(SessionManagement.BarCHART_COLORS_Top5);
            set1.setDrawValues(true);
            ArrayList<IBarDataSet> dataSets = new ArrayList<>();
            dataSets.add(set1);
            YAxis y = Monitoring_CPU_BarChart.getAxisLeft();
            y.setAxisMinValue(0);
            y.setLabelCount(4);
            y.setAxisMaxValue(120);
            BarData data = new BarData(dataSets);
            BarChart.setData(data);
            BarChart.setFitBars(true);
            XAxis xAxis = Monitoring_CPU_BarChart.getXAxis();
            xAxis.setGranularity(1f);
            xAxis.setGranularityEnabled(true);
            xAxis.setCenterAxisLabels(false);
            xAxis.setValueFormatter(new IndexAxisValueFormatter(serviceCPUStringList));//setting String values in Xaxis
            BarChart.invalidate();
            XYMarkerView mv = new XYMarkerView(this,new IndexAxisValueFormatter(serviceCPUStringList) );
            mv.setChartView(BarChart); // For bounds control
            BarChart.setMarker(mv);

        }
    }

Step 4: Make a java class with the name XYMarkerView.

In these classes, we create a Tooltip marker showing on click on Bar chart slice showing title and value in Android.

import android.content.Context;
import android.widget.TextView;

import com.github.mikephil.charting.components.MarkerView;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.formatter.ValueFormatter;
import com.github.mikephil.charting.highlight.Highlight;
import com.github.mikephil.charting.utils.MPPointF;
import com.netmagic.netmagicntt.R;

import java.text.DecimalFormat;

public class XYMarkerView extends MarkerView {

    private final TextView tvContent;
    private final ValueFormatter xAxisValueFormatter;

    private final DecimalFormat format;

    public XYMarkerView(Context context, ValueFormatter xAxisValueFormatter) {
        super(context, R.layout.custom_marker_view);

        this.xAxisValueFormatter = xAxisValueFormatter;
        tvContent = findViewById(R.id.tvContent);
        format = new DecimalFormat("###.0");
    }

    // runs every time the MarkerView is redrawn, can be used to update the
    // content (user-interface)
    @Override
    public void refreshContent(Entry e, Highlight highlight) {

//        tvContent.setText(String.format("Name: %s, Value: %s", xAxisValueFormatter.getFormattedValue(e.getX()), format.format(e.getY())));

        tvContent.setText(String.format(" Value: %s", format.format(e.getY())));

        super.refreshContent(e, highlight);
    }

    @Override
    public MPPointF getOffset() {
        return new MPPointF(-(getWidth() / 2), -getHeight());
    }
}