Create two or more line graphs using MPAndroidChart [Java]

Why I came up with this article

I'm new to Android app production. I've managed to make something tangible by text and web search, but I'm always searching for code that seems to be helpful because I can't get the basics of thinking. This time I connected to the database and created two line graphs using that data, but I had a hard time not knowing the description of the second line, so I would like to write it here.

reference##

Money Forward Engineer Blog (Android: Rich in graph display. Let's use MPAndroidChart!) Nyan's application development (drawing a graph with the [Android] MPAndroidChart library) ← This is a blog with many articles. Thank you for your help throughout.

environment##

Windows10 AndroidStudio4

Graph initialization

Please see the reference site for the introduction and layout of MPAndroidChart. I've also commented out some methods I didn't use.

LineChartActivity.java

LineChart mChart = findViewById(R.id.lineChart);
        //Whether to display the graph description text
        mChart.getDescription().setEnabled(true);
        //Graph description text (app name, etc.)
        mChart.getDescription().setText(getResources().getString(R.string.app_name));
        //Graph description Text color setting
        //mChart.getDescription().setTextColor(Color.BLACK);
        //Graph description Text size setting
        //mChart.getDescription().setTextSize(10f);
        //Display position setting of graph description text
        //mChart.getDescription().setPosition(0, 0);
        //Graph background color
        mChart.setBackgroundColor(Color.WHITE);

        //x-axis setting
        XAxis xAxis = mChart.getXAxis();
        //Output x-axis diagonally
        xAxis.setLabelRotationAngle(45);
        //x-axis maximum value minimum value
        //0 if~9th is output(10 pieces)If you do not write it, the registered data will be displayed.
        xAxis.setAxisMinimum(0f);
        xAxis.setAxisMaximum(9f);
        //Set the date registered in the database to the x-axis
        xAxis.setValueFormatter(new IndexAxisValueFormatter(getDate()));

        //Make the x-axis a dashed line(Dashed Line)
        xAxis.enableGridDashedLine(10f, 10f, 0f);
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);

        //y-axis setting
        YAxis yAxis = mChart.getAxisLeft();
        //Y-axis maximum / minimum setting
        yAxis.setAxisMaximum(150f);
        yAxis.setAxisMinimum(50f);
        //Make the y-axis a dashed line
        yAxis.enableGridDashedLine(10f, 10f, 0f);
        yAxis.setDrawZeroLine(true);

        //The scale on the right. False if not needed
        mChart.getAxisRight().setEnabled(false);

x-axis settings

The getDate method for x-axis settings. I had to change the type of data registered in the database. It seems that I can write smarter, but for me now, that's it. The variable date is an ArrayList that holds the database data.

LineChartActivity.java

//Rewrite the data saved in String type to date type and SimpleDateFormat
private  ArrayList<String> getDate() {
        ArrayList<String> dateLabels = new ArrayList<>();
        for (int i = 0; i < date.size(); i++) {
            try {
                //Correct the date to date
                String strDate = date.get(i);
                DateFormat dateFormat = new SimpleDateFormat("yyyy/MM/dd");
                Date entryDate = dateFormat.parse(strDate);
                DateFormat dt = new SimpleDateFormat("MM/dd");
                String setDate = dt.format(entryDate);
                dateLabels.add(setDate);
            } catch (ParseException e) {
                e.printStackTrace();
            }
        }
        return dateLabels;
    }

Data display##

The variables valuesMax and valuesMin are ArrayList that hold the data in the database.

LineChartActivity.java

ArrayList<Entry> valuesMax = new ArrayList<>();
ArrayList<Entry> valuesMin = new ArrayList<>();
        LineDataSet max;   //Line arguments
        LineDataSet min;   
//Line setting method
        max = new LineDataSet(valuesMax, "A");//Label name
        max.setColor(Color.RED);          //Line color
        max.setCircleColor(Color.RED);    //Coordinate color
        max.setLineWidth(5f);             //Line thickness 1f~
        max.setCircleRadius(5f);          //Coordinate size
        max.setDrawCircleHole(false);     //Fill the coordinates → false Do not fill → true
        max.setValueTextSize(10f);        //Write the value of the data. Not listed at 0f. Because it is a float, it has a decimal point
        max.setDrawFilled(true);          //Whether to fill under the line
        max.setFillColor(Color.RED);      //Filled field color

//Make another set
        min = new LineDataSet(valuesMin, "B");
        min.setColor(Color.BLUE);
        min.setCircleColor(Color.BLUE);
        min.setLineWidth(5f);
        min.setCircleHoleRadius(5f);
        min.setDrawCircleHole(false);
        min.setValueTextSize(10f);
        min.setDrawFilled(true);
        min.setFillColor(Color.BLUE);

        //set the line on the chart
        ArrayList<ILineDataSet> dataSets = new ArrayList<>();
        dataSets.add(max);
        dataSets.add(min);
        LineData lineData = new LineData(dataSets);
        mChart.setData(lineData);
        //Animate the data. millisecond.Larger numbers are slower
        mChart.animateX(1000);

The line you added to the ILineDateSet is displayed on the screen.

The finished product

Two graphs are displayed. I made the fill red and blue, but the bottom of the blue line is mixed and turned purple ◎ I'm glad if you can use it as a reference.