How to redraw chart every x seconds with MPAndroidChart?

Question

I have a pie chart (MPAndroidChart) getting data through Volley and I am using the following to update the chart every 3 seconds but the chart is not getting re drawn. This is all located within a fragment which is shown in a tab view. The chart only refreshes when I click another tab and go back to it. It doesn't redraw itself while I am on the page.

public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View layout = inflater.inflate(R.layout.activity_device_current_report, container, false);

        new Handler().postDelayed(new Runnable(){
            @Override
            public void run() {
                new AttemptJson().execute();
            }
        }, 3000);
        return layout;
    }

I have an inner class AttemptJson:

class AttemptJson extends AsyncTask<String, String, String> {

        @Override
        protected String doInBackground(String... strings) {
            updateChart();
            return "";
        }
    }

This is my updateChart method which grabs the JSON file and stores it using Volley.

private void updateChart() {

        requestQueue = Volley.newRequestQueue(getContext());
        JsonObjectRequest req = new JsonObjectRequest(Request.Method.GET, url,

                new Response.Listener<JSONObject>() {
                    @Override
                    public void onResponse(JSONObject response) {
                        try {
                            JSONArray dataset = response.getJSONArray("dataset");
                            JSONArray time = response.getJSONArray("time");

                            JSONArray temp = dataset.getJSONObject(0).getJSONArray("data");
                            JSONArray humid = dataset.getJSONObject(1).getJSONArray("data");
                            for (int i = 0; i < temp.length(); i++) {
                                float temp_data = Float.parseFloat(temp.getJSONObject(i).getString("value"));
                                float time_data = Float.parseFloat(time.getJSONObject(i).getString("time"));

                                temperature.add(new Entry(time_data, temp_data));
                            }
                            float data = (float)(Float.parseFloat(humid.getJSONObject(humid.length()-1).getString("value")) + Math.random()*20 - 5);
                            if(humidity.size() != 0) humidity.clear();
                            humidity.add(new PieEntry(data));
                            humidity.add(new PieEntry(100 - data));

                            drawGraph();
                        } catch (JSONException e) {
                            Log.d("debug", "Object dataset is incorrect");
                            e.printStackTrace();
                        }
                    }
                },

                new Response.ErrorListener() {
                    @Override
                    public void onErrorResponse(VolleyError error) {

                    }
                });
        requestQueue.add(req);
    }

In that method I call drawGraph() to draw the actual graph:

private void drawGraph() {
        LineChart temperatureChart;
        PieChart humidityChart;

        LineDataSet lineDataSet1 = new LineDataSet(temperature, "temperature");
        lineDataSet1.setDrawCircles(false);
        lineDataSet1.setColor(Color.BLUE);
        lineDataSet1.setDrawValues(false);

        temperatureChart = (LineChart) getActivity().findViewById(R.id.curr_chart_temp);
        humidityChart = (PieChart) getActivity().findViewById(R.id.curr_chart_humid);

        temperatureChart.setData(new LineData(lineDataSet1));
        temperatureChart.getAxisLeft().setAxisMinimum(-50f);
        temperatureChart.getAxisLeft().setAxisMaximum(50f);
        temperatureChart.getAxisRight().setEnabled(false);
        temperatureChart.animateX(2000);
        temperatureChart.setVisibleXRangeMaximum(400);
        temperatureChart.invalidate();

        PieDataSet dataset = new PieDataSet(humidity,"Humidity");
        dataset.setColors(new int[]{Color.RED,Color.WHITE});
        PieData humidValue= new PieData(dataset);
        humidValue.setDrawValues(false);
        humidityChart.setData(humidValue);
        DecimalFormat df = new DecimalFormat("#.##");
        humidityChart.setCenterText( df.format(humidity.get(0).getValue()) + "%");
        humidityChart.setDrawCenterText(true);
        humidityChart.animateY(1000);

    }

David Rawson David Rawson · Accepted Answer · 2017-01-07T03:55:15

Using findViewById to get a handle on a View as a function-local variable repeatedly is not the correct approach in Android. Your current code is updating a separate instance of LineChart from the one displayed on the screen.

Instead, make LineChart and PieChart class fields.

public class MyFragment extends Fragment {
    private final LineChart lineChart;
    private final PieChart pieChart;

    public View onCreateView() {  
        View layout = inflater.inflate(R.layout.activity_device_current_report, container, false);  
        lineChart = layout.findViewById(R.id.curr_chart_temp);
        pieChart = layout.findViewById(R.id.curr_chart_humid);
        //insert the rest of your onCreate() code
    }
}

Then in updateChart() you can use the rest of the code apart from the declaration of LineChart,PieChart and the findViewById. Don't forget to call notifyDatasetChanged() after you modify the dataset.

How to redraw chart every x seconds with MPAndroidChart?

1 Answers