[프로젝트1][안드로이드] 내가 Firebase와 연동한 상태로 MPAndroidchart 를 이용하여 Line Chart를 만든 법

0. gradle 환경 설정은 필수. 

 

1.RegisterActivity와 MainActivity(로그인 액티비티)에 다음 문구를 추가한다.

hashMap.put("ChartValues",""); // will add later

RegisterActivity와 MainActivity(로그인 액티비티) 위치 참고.

 

2. fragment_calendar.xml 레이아웃을 다음과 같이 짜준다.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".CalendarFragment">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="@color/white">

        <Button
            android:id="@+id/insertBtn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Insert"
            android:textColor="@color/black" />

        <EditText
            android:id="@+id/xTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="X축"
            android:textColor="@color/black"
            android:textColorHint="@color/black"
            android:gravity="center"/>

        <EditText
            android:id="@+id/yTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Y축"
            android:textColor="@color/black"
            android:textColorHint="@color/black"
            android:gravity="center"/>

        <com.github.mikephil.charting.charts.LineChart
            android:id="@+id/lineChartView"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        </com.github.mikephil.charting.charts.LineChart>


    </LinearLayout>

</FrameLayout>

위와 같이 레이아웃이 구성된다.

3. DataPoint 클래스를 만들어준다.

public class DataPoint {
    int xValue, yValue;

    public DataPoint(int xValue, int yValue) {
        this.xValue = xValue;
        this.yValue = yValue;
    }

    public DataPoint(){

    }

    public int getxValue() {
        return xValue;
    }

    public int getyValue() {
        return yValue;
    }
}

 

 

 

4. CalendarFragment에서 다음과 같은 작업을 해준다.

FirebaseAuth firebaseAuth;
    FirebaseUser user;
    FirebaseDatabase firebaseDatabase;
    DatabaseReference databaseReference, ref2;

    Button insertBtn;
    EditText xValue, yValue;



    LineChart lineChart;
    LineDataSet lineDataSet = new LineDataSet(null,null);
    ArrayList<ILineDataSet> iLineDataSets = new ArrayList<>();
    LineData lineData;

    String id;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View v = inflater.inflate(R.layout.fragment_calendar, container, false);
        super.onCreate(savedInstanceState);


        insertBtn = v.findViewById(R.id.insertBtn);
        xValue=v.findViewById(R.id.xTextView);
        yValue=v.findViewById(R.id.yTextView);
        lineChart = v.findViewById(R.id.lineChartView);
        

        //init firebase
        firebaseAuth = FirebaseAuth.getInstance();
        user = firebaseAuth.getCurrentUser();
        firebaseDatabase = FirebaseDatabase.getInstance();
        databaseReference = firebaseDatabase.getReference("Users");
        ref2 = databaseReference.child(user.getUid());

        retrieveData();
        insertData();
        return v;
    }

 

 

ref2를 만들어준 이유
Path "Users" 안에 있는 여러 UID들 중에서 현재 유저와 같은 UID인 것을 고르기 위해서.

 

사진과 같이 firebase realtime base를 구성해주기 위함이다.

onCreatView 안에 retrieveData()가 들어간 이유

retrieve 뜻은 '(정보를)검색하다' 라는 뜻.

화면을 열었을 때 이전에 있던 정보를 검색하여 그래프를 화면에 띄우기 위해 넣었다.

 

insertData()

        private void insertData(){
            insertBtn.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    id = ref2.child("ChartValues").push().getKey();
                    int x = Integer.parseInt(xValue.getText().toString());
                    int y = Integer.parseInt(yValue.getText().toString());

                    DataPoint dataPoint = new DataPoint(x,y);
                    ref2.child("ChartValues").child(id).setValue(dataPoint);
                   retrieveData();
                }
            });
        }

retreiveData()

       private void retrieveData(){
            ref2.child("ChartValues").addValueEventListener(new ValueEventListener() {
                @Override
                public void onDataChange(@NonNull DataSnapshot snapshot) {

                    ArrayList<Entry>dataVals = new ArrayList<Entry>();

                    if(snapshot.hasChildren()){
                        for (DataSnapshot ds : snapshot.getChildren()){
                            //get data
                            DataPoint dataPoint = ds.getValue(DataPoint.class);
                            dataVals.add(new Entry(dataPoint.getxValue(),dataPoint.getyValue()));

                        }
                        showChart(dataVals);

                    } else {
                        lineChart.clear();
                        lineChart.invalidate();
                    }


                }

                @Override
                public void onCancelled(@NonNull DatabaseError error) {

                }
            });


        }

showChart()

       private void showChart(ArrayList<Entry> dataVals){
            lineDataSet.setValues(dataVals);
            lineDataSet.setLabel("Dataset 1");
            iLineDataSets.clear();
            iLineDataSets.add(lineDataSet);
            lineData = new LineData(iLineDataSets);
            lineChart.clear();
            lineChart.setData(lineData);
            lineChart.invalidate();
        }