How to Bind Chart data with two way data binding and MVVM structure

27 Views Asked by At

Hello I am trying to implement 2 way data binding for Pie chart But I don't know the exact way to do that. I have added code here. In View Model I have added static method setPieChartData() Where I am passing a list from XML file . But don't know How to Initialize that list ? How can I pass value in that list ?I need help I want to add sample data (as given in the ViewModel file below). Where I am going wrong ?

<?xml version="1.0" encoding="utf-8"?>
    <layout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto">
    
        <data>
            <variable
                name="viewModel"
                type="com.view_model.ProtectDataViewModel" />
    
        </data>
    
        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <androidx.core.widget.NestedScrollView
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:context=".fragments.ProtectDataFragment"
            android:background="@color/login_bg_black">
    
            <TextView
                android:id="@+id/data_used_tv"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="@string/data_used"
                android:textSize="18sp"
                android:textColor="@color/edit_text_cursor_color"
                android:textFontWeight="400"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintStart_toStartOf="@id/left_guideline"
                android:layout_marginTop="24dp"
                android:gravity="center" />
    
            <TextView
                android:id="@+id/data_protected_days_tv"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="@string/data_protected_in_last_7_days"
                android:textSize="18sp"
                android:textColor="@color/search_hint_text_color"
                android:textFontWeight="400"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintEnd_toStartOf="@id/right_guideline"
                android:layout_marginTop="24dp"
                android:gravity="center" />
    
            <com.github.mikephil.charting.charts.LineChart
                android:id="@+id/line_chart"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_marginTop="63dp"
                app:layout_constraintDimensionRatio="3:2"
                app:layout_constraintTop_toBottomOf="@id/data_used_tv"
                app:layout_constraintStart_toStartOf="@id/left_guideline"
                app:layout_constraintEnd_toStartOf="@id/right_guideline"
                />
    
        <View
           android:id="@+id/separator_view"
        android:layout_width="match_parent"
        android:layout_height="12dp"
        android:layout_marginTop="60dp"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         android:background="@color/login_bottom_dark_black_bg"
         app:layout_constraintTop_toBottomOf="@id/line_chart"/>
    
            <com.github.mikephil.charting.charts.PieChart
                android:id="@+id/pie_chart"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_marginTop="60dp"
                app:layout_constraintDimensionRatio="3:2"
                app:layout_constraintTop_toBottomOf="@id/separator_view"
                app:layout_constraintStart_toStartOf="@id/left_guideline"
                app:layout_constraintEnd_toStartOf="@id/right_guideline"
                android:setPieData="@{viewModel.pieChartLiveData}"/>
            
            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/left_guideline"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_constraintGuide_begin="24dp" />
    
            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/right_guideline"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_constraintGuide_end="24dp" />
    
        </androidx.constraintlayout.widget.ConstraintLayout>
            </androidx.core.widget.NestedScrollView>
        </androidx.constraintlayout.widget.ConstraintLayout>
    </layout>



    

public class ProtectDataViewModel extends ViewModel {
    
        public MutableLiveData<ArrayList<ProtectDataModel>> pieChartLiveData;
        public MutableLiveData<ArrayList<Last7DaysDataModel>> lineChartLiveData;
    
        ArrayList<Last7DaysDataModel> lineChartDataList;
        ArrayList<ProtectDataModel> pieChartDataList;
    
        public MutableLiveData<ArrayList<ProtectDataModel>> getPieChartLiveData() {
            return pieChartLiveData;
        }
    
        public void setPieChartLiveData(MutableLiveData<ArrayList<ProtectDataModel>> pieChartLiveData) {
            this.pieChartLiveData = pieChartLiveData;
        }
    
        public MutableLiveData<ArrayList<Last7DaysDataModel>> getLineChartLiveData() {
            return lineChartLiveData;
        }
    
        public void setLineChartLiveData(MutableLiveData<ArrayList<Last7DaysDataModel>> lineChartLiveData) {
            this.lineChartLiveData = lineChartLiveData;
        }
        
    
        public ProtectDataViewModel() {
            pieChartLiveData = new MutableLiveData<>();
            lineChartLiveData = new MutableLiveData<>();
            init();
        }
    
        private void init() {
            populateLineChartData();
            populatePieData();
            pieChartLiveData.setValue(pieChartDataList);
            lineChartLiveData.setValue(lineChartDataList);
        }
    
        private void populatePieData() {
            pieChartDataList = new ArrayList<>();
            pieChartDataList.add(new ProtectDataModel("Telegram", 200000, R.color.telegram_color));
            pieChartDataList.add(new ProtectDataModel("Chrome", 300000, R.color.chrome_color));
            pieChartDataList.add(new ProtectDataModel("One Drive", 100000, R.color.one_drive_color));
            pieChartDataList.add(new ProtectDataModel("카카오톡", 250000, R.color.kakaotalk_color));
            pieChartDataList.add(new ProtectDataModel("기타", 150000, R.color.etc_color));
        }
    
        private void populateLineChartData() {
            lineChartDataList = new ArrayList<>();
            lineChartDataList.add(new Last7DaysDataModel("11/21", 40));
            lineChartDataList.add(new Last7DaysDataModel("11/22", 60));
            lineChartDataList.add(new Last7DaysDataModel("11/23", 75));
            lineChartDataList.add(new Last7DaysDataModel("11/24", 20));
            lineChartDataList.add(new Last7DaysDataModel("11/25", 90));
            lineChartDataList.add(new Last7DaysDataModel("11/26", 55));
            lineChartDataList.add(new Last7DaysDataModel("11/27", 100));
        }
    
        @BindingAdapter("android:setPieData")
        public static void setPieChart(PieChart pieChart, ArrayList<ProtectDataModel> list){
            PieData pieData;
            PieDataSet pieDataSet;
    
            ArrayList<PieEntry> pieEntries = new ArrayList<PieEntry>();
            for(int i=0; i< list.size(); i++){
                pieEntries.add(new PieEntry(list.get(i).getCount()));
            }
            pieDataSet = new PieDataSet(pieEntries, "");
            pieData = new PieData(pieDataSet);
            pieChart.setData(pieData);
            pieDataSet.setColors(ColorTemplate.JOYFUL_COLORS);
            pieDataSet.setSliceSpace(2f);
            pieDataSet.setValueTextColor(Color.WHITE);
            pieDataSet.setValueTextSize(10f);
            pieDataSet.setSliceSpace(5f);
        }
    
        @BindingAdapter("android:setLineData")
        public static void setLineChart(View lineChart, ArrayList<Last7DaysDataModel> list){}
    
    }
0

There are 0 best solutions below