Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/webpack/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
如何使用mpandroidchart在图形滚动时选择条形图/值(类似于三星健康趋势图)_Android_Mpandroidchart - Fatal编程技术网

如何使用mpandroidchart在图形滚动时选择条形图/值(类似于三星健康趋势图)

如何使用mpandroidchart在图形滚动时选择条形图/值(类似于三星健康趋势图),android,mpandroidchart,Android,Mpandroidchart,我想让图表像三星健康,支持滚动和中心选定的项目。我正在使用这个图书馆。但只在tap中工作,我不知道如何将其配置为滚动 我想要这样的东西(看看黑圈): 三星健康图表 Url视频: 图片: 三星图表,点击或滚动时居中选择的项目 我的图表 但我的图表是这样的 Url视频: 图片: 我的图表,仅在点击时居中显示选定项目,而不是滚动显示 我在setOnTestureListener()中尝试了onChartGestureEnd(),但位置x是我的手指第一次接触屏幕的位置。例如:假设我向右(从左到右)滑

我想让图表像三星健康,支持滚动和中心选定的项目。我正在使用这个图书馆。但只在tap中工作,我不知道如何将其配置为滚动

我想要这样的东西(看看黑圈):

三星健康图表

Url视频:

图片:

三星图表,点击或滚动时居中选择的项目

我的图表

但我的图表是这样的

Url视频:

图片:

我的图表,仅在点击时居中显示选定项目,而不是滚动显示

我在setOnTestureListener()中尝试了onChartGestureEnd(),但位置x是我的手指第一次接触屏幕的位置。例如:假设我向右(从左到右)滑动,我的手指第一次触摸是18,中心位置是项目14。我想得到第14项的位置,但不知道怎么做。我想到了减速,所以我调用stopdeduction(),但不起作用

我还尝试了
ViewPager
,但也失败了:(

这是我的活动代码(请忽略变量*2):

BarChartActivity.java
公共类BarChartActivity扩展了AppCompatActivity{
私人条形图麦克哈通;
私人柱状图麦克哈特二号;
私人纺纱机;
私有文本视图mTvDate;
私有文本视图mTvPower;
私有文本视图mTvCost;
私人传奇;
私人传奇lTwo;
私人有限公司;
私人有限公司二号线;
私人XAxis xAxisOne;
私人XAxis xAxisTwo;
私有YAxis-leftAxisOne;
私人雅克西斯2;
私有YAxis rightAxisOne;
私人雅克西斯2;
private ArrayList barValuesOne=new ArrayList();
私有ArrayList barValuesTwo=新ArrayList();
私有列表axisLabelOne=new ArrayList();
私有列表axisLabelTwo=新ArrayList();
private List statisticList=new ArrayList();
private List option=new ArrayList();
私有字符串TAG=“bebe”;
私有字符串[]dummycast;
私有字符串[]dummyPower;
私有字符串[]dummyDate;
私有索引;
@凌驾
创建时受保护的void(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity\u be\u图表);
setTitle(“BarChartActivity”);
//todo:为不同的dpi创建另一个布局
mChartOne=findviewbyd(R.id.chart1);
McHartwo=findViewById(R.id.chart2);
mSpOption=findviewbyd(R.id.sp_选项);
mTvDate=findViewById(R.id.tv\U日期);
MTV功率=findViewById(R.id.tv\U功率);
mTvCost=findViewById(R.id.tv_成本);
选择权。添加(“天”);
选择权。添加(“周”);
选择权。添加(“月份”);
dummycst=getResources().getStringArray(R.array.dummy_cost);
dummyDate=getResources().getStringArray(R.array.dummy_date);
dummyPower=getResources().getStringArray(R.array.dummy\u power);
int lastNum=0;
for(int i=0;i1
add(String.valueOf(numStr));
lastNum=numStr;
}
//空标签
对于(int i=0;i<3;i++){
lastNum++;
如果(lastNum>31)lastNum=1;
add(String.valueOf(lastNum));
}
axisLabelTwo=newArrayList(Arrays.asList(getResources().getStringArray(R.array.label_-hour));
ArrayAdapter dataAdapter=新的ArrayAdapter(此,
android.R.layout.simple\u微调器\u项目,选项);
dataAdapter.setDropDownViewResource(android.R.layout.simple\u微调器\u下拉项);
mSpOption.setAdapter(数据适配器);
mSpOption.setOnItemSelectedListener(新的AdapterView.OnItemSelectedListener(){
@凌驾
已选择公共视图(AdapterView AdapterView、View视图、int i、long l){
barValuesOne.clear();
麦克哈通.阿尼泰(500);
setDataOne();
设置可视范围最大值(7);
BarEntry lastEntry=barValuesOne.get(lastIndex);
Utils.selectedIndex=lastEntry.getX();
显示所选信息(最新索引);
mChartOne.centerViewToAnimated(lastEntry.getX(),lastEntry.getY(),
左,0);
mChartOne.invalidate();
barValuesTwo.clear();
麦克哈特二。阿尼泰(500);
setDataTwo();
mchartwo.invalidate();
}
@凌驾
未选择公共无效(AdapterView AdapterView){
}
});
loadChartOne();
加载图表二();
}
私有void loadChartOne(){
mChartOne.settrakershadow(假);
mChartOne.SetDrawValueUpperBar(真);
mChartOne.getDescription().setEnabled(false);
mChartOne.setPinchZoom(假);
setDrawGridBackground(false);
mChartOne.setDragEnabled(真);
mChartOne.setScaleEnabled(错误);
mChartOne.setPinchZoom(假);
mChartOne.setDoubleTapToZoomEnabled(假);
mChartOne.setDrawBorders(假);
mChartOne.setExtraOffsets(0f,
getResources().getDimensionPixelSize(R.dimen.padding_标签),
0f,
getResources().getDimensionPixelSize(R.dimen.padding_label));
setOnChartValueSelectedListener(新的OnChartValueSelectedListener(){
@结束
        @Override
        public void onChartGestureEnd(MotionEvent me, ChartTouchListener.ChartGesture lastPerformedGesture) {
            MPPointD pointD = MPPointD.getInstance(0,0);
            Transformer transformer = mChartOne.getTransformer(AxisDependency.LEFT);
            transformer.getValuesByTouchPoint(me.getX(), me.getY(), pointD);

            int roundX = round((float) pointD.x);
            int roundY = round((float) pointD.y);
            mChartOne.centerViewToAnimated(roundX, roundY, AxisDependency.LEFT, 200);

            Utils.selectedIndex = roundX;
            showSelectedInfo(roundX);
        }
BarChartActivity.java

    public class BarChartActivity extends AppCompatActivity {

    private BarChart mChartOne;
    private BarChart mChartTwo;
    private Spinner mSpOption;
    private TextView mTvDate;
    private TextView mTvPower;
    private TextView mTvCost;

    private Legend lOne;
    private Legend lTwo;
    private LimitLine llOne;
    private LimitLine llTwo;
    private XAxis xAxisOne;
    private XAxis xAxisTwo;
    private YAxis leftAxisOne;
    private YAxis leftAxisTwo;
    private YAxis rightAxisOne;
    private YAxis rightAxisTwo;

    private ArrayList<BarEntry> barValuesOne = new ArrayList<>();
    private ArrayList<BarEntry> barValuesTwo = new ArrayList<>();
    private List<String> axisLabelOne = new ArrayList<>();
    private List<String> axisLabelTwo = new ArrayList<>();
    private List<Statistic> statisticList = new ArrayList<>();

    private List<String> option = new ArrayList<>();

    private String TAG = "bebe";
    private String[] dummyCost;
    private String[] dummyPower;
    private String[] dummyDate;
    private int lastIndex;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_be_chart);
        setTitle("BarChartActivity");
        //todo : create another layout for different dpi

        mChartOne = findViewById(R.id.chart1);
        mChartTwo = findViewById(R.id.chart2);
        mSpOption = findViewById(R.id.sp_option);
        mTvDate = findViewById(R.id.tv_date);
        mTvPower = findViewById(R.id.tv_power);
        mTvCost = findViewById(R.id.tv_cost);

        option.add("Days");
        option.add("Week");
        option.add("Month");

        dummyCost = getResources().getStringArray(R.array.dummy_cost);
        dummyDate = getResources().getStringArray(R.array.dummy_date);
        dummyPower = getResources().getStringArray(R.array.dummy_power);

        int lastNum = 0;
        for (int i = 0; i < dummyPower.length; i++) {
            Statistic stat = new Statistic();
            stat.cost = dummyCost[i];
            stat.date = dummyDate[i];
            stat.power = dummyPower[i];
            statisticList.add(stat);

            String numberStr = stat.date.substring(8,10);
            int numStr = Integer.parseInt(numberStr); // remove 0, 01 -> 1
            axisLabelOne.add(String.valueOf(numStr));
            lastNum = numStr;
        }

        // empty label
        for (int i = 0; i < 3; i++) {
            lastNum++;
            if (lastNum > 31) lastNum = 1;
            axisLabelOne.add(String.valueOf(lastNum));
        }


        axisLabelTwo = new ArrayList<>(Arrays.asList(getResources().getStringArray(R.array.label_hour)));

        ArrayAdapter<String> dataAdapter = new ArrayAdapter<String>(this,
                android.R.layout.simple_spinner_item, option);
        dataAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        mSpOption.setAdapter(dataAdapter);

        mSpOption.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {
                barValuesOne.clear();
                mChartOne.animateY(500);
                setDataOne();
                mChartOne.setVisibleXRangeMaximum(7);
                BarEntry lastEntry = barValuesOne.get(lastIndex);
                Utils.selectedIndex = lastEntry.getX();
                showSelectedInfo(lastIndex);

                mChartOne.centerViewToAnimated(lastEntry.getX(), lastEntry.getY(),
                        AxisDependency.LEFT, 0);
                mChartOne.invalidate();

                barValuesTwo.clear();
                mChartTwo.animateY(500);
                setDataTwo();
                mChartTwo.invalidate();
            }

            @Override
            public void onNothingSelected(AdapterView<?> adapterView) {

            }
        });

        loadChartOne();
        loadChartTwo();
    }

    private void loadChartOne(){
        mChartOne.setDrawBarShadow(false);
        mChartOne.setDrawValueAboveBar(true);
        mChartOne.getDescription().setEnabled(false);
        mChartOne.setPinchZoom(false);
        mChartOne.setDrawGridBackground(false);
        mChartOne.setDragEnabled(true);
        mChartOne.setScaleEnabled(false);
        mChartOne.setPinchZoom(false);
        mChartOne.setDoubleTapToZoomEnabled(false);
        mChartOne.setDrawBorders(false);
        mChartOne.setExtraOffsets(0f,
                getResources().getDimensionPixelSize(R.dimen.padding_label),
                0f,
                getResources().getDimensionPixelSize(R.dimen.padding_label));
        mChartOne.setOnChartValueSelectedListener(new OnChartValueSelectedListener() {
            @Override
            public void onValueSelected(Entry e, Highlight h) {
                if (e == null)
                    return;

                Log.e(TAG, "onValueSelected: "+e);
                Log.e(TAG, "data: "+ axisLabelOne.get((int) e.getX()));
                mChartOne.centerViewToAnimated(e.getX(), e.getY(),
                        mChartOne.getData().getDataSetByIndex(h.getDataSetIndex())
                                .getAxisDependency(), 200);
                Utils.selectedIndex = e.getX();
                showSelectedInfo((int) e.getX());
            }

            @Override
            public void onNothingSelected() {

            }
        });

        mChartOne.setOnChartGestureListener(new OnChartGestureListener() {
            @Override
            public void onChartGestureStart(MotionEvent me, ChartTouchListener.ChartGesture lastPerformedGesture) {

            }

            @Override
            public void onChartGestureEnd(MotionEvent me, ChartTouchListener.ChartGesture lastPerformedGesture) {
                MPPointD pointD = MPPointD.getInstance(0,0);
                Transformer transformer = mChartOne.getTransformer(AxisDependency.LEFT);
                transformer.getValuesByTouchPoint(me.getX(), me.getY(), pointD);

                int roundX = round((float) pointD.x);
                int roundY = round((float) pointD.y);
                mChartOne.centerViewToAnimated(roundX, roundY, AxisDependency.LEFT, 200);

                Utils.selectedIndex = roundX;
                showSelectedInfo(roundX);
            }

            @Override
            public void onChartLongPressed(MotionEvent me) {

            }

            @Override
            public void onChartDoubleTapped(MotionEvent me) {

            }

            @Override
            public void onChartSingleTapped(MotionEvent me) {

            }

            @Override
            public void onChartFling(MotionEvent me1, MotionEvent me2, float velocityX, float velocityY) {

            }

            @Override
            public void onChartScale(MotionEvent me, float scaleX, float scaleY) {

            }

            @Override
            public void onChartTranslate(MotionEvent me, float dX, float dY) {

            }
        });

        ValueFormatter xAxisFormatter = new IndexAxisValueFormatter(axisLabelOne);

        xAxisOne = mChartOne.getXAxis();
        xAxisOne.setPosition(XAxisPosition.BOTTOM);
        xAxisOne.setTextSize(16f);
        xAxisOne.setGranularity(1f); // only intervals of 1 day
        xAxisOne.setLabelCount(7);
        xAxisOne.setValueFormatter(xAxisFormatter);
        xAxisOne.setDrawGridLines(false);
        xAxisOne.setDrawAxisLine(false);
        xAxisOne.customLabel = true;
        xAxisOne.setYOffset(getResources().getDimensionPixelSize(R.dimen.padding_label));

        ValueFormatter custom = new MyValueFormatter(" W");

        leftAxisOne = mChartOne.getAxisLeft();
        leftAxisOne.setLabelCount(8, false);
        leftAxisOne.setValueFormatter(custom);
        leftAxisOne.setPosition(YAxisLabelPosition.OUTSIDE_CHART);
        leftAxisOne.setSpaceTop(15f);
        leftAxisOne.setAxisMinimum(1f); // this replaces setStartAtZero(true)
        leftAxisOne.setEnabled(false);

        llOne = new LimitLine(16f, "Usage warning (16 W)");
        llOne.setLineColor(Color.RED);
        llOne.setLineWidth(1f);
        llOne.setTextColor(Color.BLACK);
        llOne.setTextSize(12f);
        llOne.enableDashedLine(4, 3, 0);

        rightAxisOne = mChartOne.getAxisRight();
        rightAxisOne.setDrawGridLines(true);
        rightAxisOne.setLabelCount(2, false);
        rightAxisOne.setValueFormatter(custom);
        rightAxisOne.setSpaceTop(15f);
        rightAxisOne.setAxisMinimum(1f); // this replaces setStartAtZero(true)
        rightAxisOne.setCenterAxisLabels(true);
        rightAxisOne.setPosition(YAxisLabelPosition.INSIDE_CHART);
        rightAxisOne.enableGridDashedLine(4, 3, 0);
        rightAxisOne.setGridColor(ContextCompat.getColor(this, R.color.bar_color));
        rightAxisOne.addLimitLine(llOne);
        rightAxisOne.setDrawLimitLinesBehindData(false);
        rightAxisOne.setDrawZeroLine(false);
        rightAxisOne.setDrawAxisLine(false);

        lOne = mChartOne.getLegend();
        lOne.setEnabled(false);
    }

    private void loadChartTwo(){
        mChartTwo.setDrawBarShadow(false);
        mChartTwo.setDrawValueAboveBar(false);
        mChartTwo.getDescription().setEnabled(false);
        mChartTwo.setPinchZoom(false);
        mChartTwo.setDrawGridBackground(false);
        mChartTwo.setDragEnabled(false);
        mChartTwo.setScaleEnabled(false);
        mChartTwo.setPinchZoom(false);
        mChartTwo.setDoubleTapToZoomEnabled(false);
        mChartTwo.setDrawBorders(false);
        mChartTwo.setExtraOffsets(0f,
                getResources().getDimensionPixelSize(R.dimen.padding_label),
                0f,
                getResources().getDimensionPixelSize(R.dimen.padding_label));

        MyMarkerView mv = new MyMarkerView(this, R.layout.custom_marker_view);
        mv.setChartView(mChartTwo); // For bounds control
        mChartTwo.setMarker(mv); // Set the marker to the chart

        ValueFormatter xAxisFormatter = new IndexAxisValueFormatter(axisLabelTwo);

        xAxisTwo = mChartTwo.getXAxis();
        xAxisTwo.setPosition(XAxisPosition.BOTTOM);
        xAxisTwo.setTextSize(10f);
        xAxisTwo.setValueFormatter(xAxisFormatter);
        xAxisTwo.setDrawGridLines(false);
        xAxisTwo.setDrawAxisLine(true);
        xAxisTwo.setLabelCount(5);
        xAxisTwo.customLabel = false;

        leftAxisTwo = mChartTwo.getAxisLeft();
        leftAxisTwo.setAxisMinimum(1f);
        leftAxisTwo.setEnabled(false);

        rightAxisTwo = mChartTwo.getAxisRight();
        rightAxisTwo.setAxisMinimum(1f);
        rightAxisTwo.setEnabled(false);

        lTwo = mChartTwo.getLegend();
        lTwo.setEnabled(false);
    }

    private void setDataOne() {

        // start empty space
        Utils.unselectedIndex[0] = 0f;
        Utils.unselectedIndex[1] = 1f;
        Utils.unselectedIndex[2] = 2f;
        Utils.firstSelectedIndex = 3f;
        barValuesOne.add(new BarEntry(Utils.unselectedIndex[0], 0));
        barValuesOne.add(new BarEntry(Utils.unselectedIndex[1], 0));
        barValuesOne.add(new BarEntry(Utils.unselectedIndex[2], 0));

        float start = Utils.firstSelectedIndex;
        float tmpStart = start;

        for (int i = (int) start; i < dummyPower.length; i++) {
            tmpStart = i;
            lastIndex = i;
            float val = Float.parseFloat(dummyPower[i]);
            barValuesOne.add(new BarEntry(i, val));
            Utils.lastSelectedIndex = i;
        }

        // end empty space
        barValuesOne.add(new BarEntry(++tmpStart, 0));
        Utils.unselectedIndex[3] = tmpStart;
        barValuesOne.add(new BarEntry(++tmpStart, 0));
        Utils.unselectedIndex[4] = tmpStart;
        barValuesOne.add(new BarEntry(++tmpStart, 0));
        Utils.unselectedIndex[5] = tmpStart;

        BarDataSet set1;

        if (mChartOne.getData() != null &&
                mChartOne.getData().getDataSetCount() > 0) {
            set1 = (BarDataSet) mChartOne.getData().getDataSetByIndex(0);
            set1.setValues(barValuesOne);
            mChartOne.getData().notifyDataChanged();
            mChartOne.notifyDataSetChanged();
        } else {
            set1 = new BarDataSet(barValuesOne, "The year 2017");
            set1.setDrawIcons(false);
            set1.setColor(ContextCompat.getColor(this, R.color.bar_color));
            set1.setHighLightColor(ContextCompat.getColor(this, R.color.bar_color));

            ArrayList<IBarDataSet> dataSets = new ArrayList<>();
            dataSets.add(set1);

            BarData data = new BarData(dataSets);
            data.setValueTextSize(8f);
            data.setBarWidth(0.2f);

            mChartOne.setData(data);
        }
    }

    private void setDataTwo() {

        float start = 0f;
        int count = 24;
        int range = 20;

        Calendar cal = Calendar.getInstance();
        int hour = cal.get(Calendar.HOUR_OF_DAY);

        for (int i = (int) start; i < start + count; i++) {
            float val = (float) (Math.random() * (range + 1));
            if (val < 4) val += 6.5;
            if (i < hour) barValuesTwo.add(new BarEntry(i, val));
            else barValuesTwo.add(new BarEntry(i, 0));
        }

        BarDataSet set1;

        if (mChartTwo.getData() != null &&
                mChartTwo.getData().getDataSetCount() > 0) {
            set1 = (BarDataSet) mChartTwo.getData().getDataSetByIndex(0);
            set1.setValues(barValuesTwo);
            set1.setDrawValues(false);
            mChartTwo.getData().notifyDataChanged();
            mChartTwo.notifyDataSetChanged();
        } else {
            set1 = new BarDataSet(barValuesTwo, "The year 2017");
            set1.setDrawIcons(false);
            set1.setDrawValues(false);
            set1.setColor(ContextCompat.getColor(this, R.color.bar_hour_color));
            set1.setHighLightColor(ContextCompat.getColor(this, R.color.bar_hour_color));

            ArrayList<IBarDataSet> dataSets = new ArrayList<>();
            dataSets.add(set1);

            BarData data = new BarData(dataSets);
            data.setValueTextSize(12f);
            data.setBarWidth(0.2f);

            mChartTwo.setData(data);
        }
    }

    private final RectF onValueSelectedRectF = new RectF();

    private void showSelectedInfo(int position){
        boolean unselected = false;
        for (int i = 0; i < Utils.unselectedIndex.length; i++) {
            if (position == Utils.unselectedIndex[i]) {
                unselected = true;
                break;
            }
        }

        if (!unselected && position == Utils.selectedIndex) {
            Statistic stat = statisticList.get(position);
            setTextData(stat);
        } else if (unselected){
            if (position > Utils.lastSelectedIndex ||
                    position < Utils.firstSelectedIndex){
                if ((position <= Utils.firstSelectedIndex)){
                    Statistic stat = statisticList.get((int) Utils.firstSelectedIndex);
                    setTextData(stat);
                } else if ((position >= Utils.lastSelectedIndex)) {
                    Statistic stat = statisticList.get((int) Utils.lastSelectedIndex);
                    setTextData(stat);
                }
            }
        }
    }

    private void setTextData(Statistic stat){
        int cost = Integer.parseInt(stat.cost);
        String thousandCost = NumberFormat.getNumberInstance(Locale.GERMAN).format(cost);

        mTvDate.setText(getDateString(stat.date));
        mTvPower.setText(stat.power + " W");
        mTvCost.setText("(Rp "+thousandCost+")");
    }

    private String getDateString(String rawDate) {
        String date = rawDate.replace("-","").substring(0, 8);
        String year = date.substring(0,4);
        String month = date.substring(4,6);
        String day = date.substring(6,8);
        String monthName = getMonthName(month);
        return String.valueOf(new StringBuilder().append(day).append(" ").append(monthName)
                .append(" ").append(year));
    }

    private String getMonthName(String data) {
        int month = Integer.parseInt(data);
        String[] monthName = {"Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli",
                "Agustus", "September", "Oktober", "November", "Desember"};
        return monthName[month-1];
    }

    public int round(float f) {
        int c = (int) ((f) + 0.5f);
        float n = f + 0.5f;
        return (n - c) % 2 == 0 ? (int) f : c;
    }
}
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <RelativeLayout
                android:layout_below="@id/chart1"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:background="#e1e1e1"
                android:layout_marginTop="-48dp"
                android:layout_centerHorizontal="true">
                <View
                    android:id="@+id/v_selected_label"
                    android:layout_width="36dp"
                    android:layout_height="36dp"
                    android:layout_centerInParent="true"
                    android:background="@drawable/selected_bar_label"/>
                <View
                    android:id="@+id/v_tooltip"
                    android:layout_width="8dp"
                    android:layout_height="8dp"
                    android:layout_centerHorizontal="true"
                    android:layout_alignParentBottom="true"
                    android:background="@drawable/tooltip"/>
            </RelativeLayout>
            <com.github.mikephil.charting.charts.BarChart
                android:id="@+id/chart1"
                android:layout_width="match_parent"
                android:layout_height="240dp"
                android:padding="0dp"
                android:layout_marginTop="16dp"
                android:layout_marginStart="0dp"
                android:layout_marginEnd="0dp"
                android:layout_marginBottom="0dp"/>
            <Spinner
                android:id="@+id/sp_option"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="16dp"
                android:background="@android:color/white"/>
        </RelativeLayout>
        <TextView
            android:id="@+id/tv_date"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="16dp"
            android:textSize="16sp"
            tools:text="24 Januari 2019" />
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="16dp"
            android:layout_gravity="center">
            <TextView
                android:id="@+id/tv_power"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="30sp"
                tools:text="27 W" />
            <TextView
                android:id="@+id/tv_cost"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="18sp"
                android:layout_marginStart="8dp"
                tools:text="(Rp 5000)" />
        </LinearLayout>
        <TextView
            android:id="@+id/tv_last_update"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="16sp"
            android:layout_gravity="center"
            android:layout_marginTop="8dp"
            android:text="@string/dummy_last_update" />
        <com.github.mikephil.charting.charts.BarChart
            android:id="@+id/chart2"
            android:layout_width="match_parent"
            android:layout_height="240dp"
            android:padding="0dp"
            android:layout_marginTop="16dp"
            android:layout_marginStart="0dp"
            android:layout_marginEnd="0dp"
            android:layout_marginBottom="0dp"/>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_marginTop="16dp"
            android:padding="16dp">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="14sp"
                android:text="@string/label"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="16sp"
                android:layout_marginTop="8dp"
                android:textColor="@android:color/black"
                android:text="@string/power_plug"/>
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="5dp"
                android:layout_marginTop="8dp"
                android:src="@drawable/underline_statistic"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="14sp"
                android:layout_marginTop="16dp"
                android:text="@string/total_time"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="16sp"
                android:layout_marginTop="8dp"
                android:textColor="@android:color/black"
                android:text="@string/dummy_total_time"/>
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="5dp"
                android:layout_marginTop="8dp"
                android:src="@drawable/underline_statistic"/>
        </LinearLayout>
    </LinearLayout>
</ScrollView>