MPAndroidChart BarChart xValues Issue

4
votes

I noticed an issue with the BarChart of MPAndroidChart and need a fix. First my code:

this.barChart = (BarChart) view.findViewById(R.id.bar_fragment_bar_chart);
this.barChart.setDrawYValues(true);
this.barChart.setDrawXLabels(false);
this.barChart.setDrawValueAboveBar(true);
this.barChart.setDrawBorder(false);
this.barChart.setDrawGridBackground(false);
this.barChart.setDrawHorizontalGrid(true);
this.barChart.setDrawVerticalGrid(false);
this.barChart.setDrawBarShadow(false);
this.barChart.setDescription("");
this.barChart.setNoDataTextDescription("");
this.barChart.set3DEnabled(false);

My xValues are simple dates:

ArrayList<String> xValues = new ArrayList<String>();

for(int i = 0; i < measureDataListEntry.size(); i++) {
    String StringValue = measureDataListEntry.get(i).getTime();
    Long value = Long.parseLong(StringValue) * 1000;
    DateFormat dateFormat = new SimpleDateFormat("dd.MM.yyyy", Locale.GERMAN);
    String date = dateFormat.format(new Date(value));

    xValues.add(date);
}

Now i have multiple datasets:

ArrayList<BarEntry> yValuesMonday = new ArrayList<BarEntry>();
ArrayList<BarEntry> yValuesTuesday = new ArrayList<BarEntry>();
ArrayList<BarEntry> yValuesWednesday = new ArrayList<BarEntry>();
ArrayList<BarEntry> yValuesThursday = new ArrayList<BarEntry>();
ArrayList<BarEntry> yValuesFriday = new ArrayList<BarEntry>();
ArrayList<BarEntry> yValuesSaturday = new ArrayList<BarEntry>();
ArrayList<BarEntry> yValuesSunday = new ArrayList<BarEntry>();

for(int i = 0; i < measureDataListEntry.size(); i++) {
    String stringValue = measureDataListEntry.get(i).getValue();
    int dayOfWeek = Helper.getDayOfWeek(measureDataListEntry.get(i).getTime());
    float value = Float.parseFloat(stringValue);

    switch(dayOfWeek) {
    case Calendar.MONDAY:
        yValuesMonday.add(new BarEntry(value, i));
        break;
    case Calendar.TUESDAY:
        yValuesTuesday.add(new BarEntry(value, i));
        break;
    case Calendar.WEDNESDAY:
        yValuesWednesday.add(new BarEntry(value, i));
        break;
    case Calendar.THURSDAY:
        yValuesThursday.add(new BarEntry(value, i));
        break;
    case Calendar.FRIDAY:
        yValuesFriday.add(new BarEntry(value, i));
        break;
    case Calendar.SATURDAY:
        yValuesSaturday.add(new BarEntry(value, i));
        break;
    case Calendar.SUNDAY:
        yValuesSunday.add(new BarEntry(value, i));
        break;
    }
}

BarDataSet barDataSetMonday = new BarDataSet(yValuesMonday, this.getResources().getString(R.string.text_monday));

barDataSetMonday.setColor(this.getResources().getColor(R.color.diagramGreenColor));

BarDataSet barDataSetTuesday = new BarDataSet(yValuesTuesday, this.getResources().getString(R.string.text_tuesday));

barDataSetTuesday.setColor(this.getResources().getColor(R.color.diagramOrangeColor));

BarDataSet barDataSetWednesday = new BarDataSet(yValuesWednesday, this.getResources().getString(R.string.text_wednesday));

barDataSetWednesday.setColor(this.getResources().getColor(R.color.diagramPinkColor));

BarDataSet barDataSetThursday = new BarDataSet(yValuesThursday, this.getResources().getString(R.string.text_thursday));

barDataSetThursday.setColor(this.getResources().getColor(R.color.diagramBlackColor));

BarDataSet barDataSetFriday = new BarDataSet(yValuesFriday, this.getResources().getString(R.string.text_friday));

barDataSetFriday.setColor(this.getResources().getColor(R.color.diagramBlueColor));

BarDataSet barDataSetSaturday = new BarDataSet(yValuesSaturday, this.getResources().getString(R.string.text_saturday));

barDataSetSaturday.setColor(this.getResources().getColor(R.color.diagramRedColor));

BarDataSet barDataSetSunday = new BarDataSet(yValuesSunday, this.getResources().getString(R.string.text_sunday));

barDataSetSunday.setColor(this.getResources().getColor(R.color.diagramYellowColor));

ArrayList<BarDataSet> dataSets = new ArrayList<BarDataSet>();

dataSets.add(barDataSetMonday);
dataSets.add(barDataSetTuesday);
dataSets.add(barDataSetWednesday);
dataSets.add(barDataSetThursday);
dataSets.add(barDataSetFriday);
dataSets.add(barDataSetSaturday);
dataSets.add(barDataSetSunday);

BarData data = new BarData(xValues, dataSets);

this.barChart.setData(data);
this.barChart.animateY(1000);

My Problem now is that the xLabels and the xValues arent matching at all:

enter image description here

The bars are placed far far behind the xLabels and there is extremely much space between the last entry and the entry before the last entry.

I also tested how it looks when I put all data into one data-set. the xLabels also aren't matching the xValues:

enter image description here

How can I fix that issue?

EDIT

enter image description here

The date you see here in the xLabels belongs to the bar. So why is the position of the xLabel so far away from the bar?

EDIT 2:

With LineChart:

protected void initData() {
    List<MeasureDataListEntry> measureDataListEntry = null;

    if(this.favourite) {
        measureDataListEntry = this.sessionMeasureDataListFavourite.getMeasureDataList().getMeasureDataListEntries();
    } else {
        measureDataListEntry = this.sessionMeasureDataList.getMeasureDataList().getMeasureDataListEntries();
    }

    ArrayList<String> xValues = new ArrayList<String>();
    ArrayList<Entry> yValuesMonday = new ArrayList<Entry>();
    ArrayList<Entry> yValuesTuesday = new ArrayList<Entry>();
    ArrayList<Entry> yValuesWednesday = new ArrayList<Entry>();
    ArrayList<Entry> yValuesThursday = new ArrayList<Entry>();
    ArrayList<Entry> yValuesFriday = new ArrayList<Entry>();
    ArrayList<Entry> yValuesSaturday = new ArrayList<Entry>();
    ArrayList<Entry> yValuesSunday = new ArrayList<Entry>();

    for(int i = 0; i < measureDataListEntry.size(); i++) {
        String StringValue = measureDataListEntry.get(i).getTime();
        Long value = Long.parseLong(StringValue) * 1000;
        DateFormat dateFormat = new SimpleDateFormat("dd.MM.yyyy", Locale.GERMAN);
        String date = dateFormat.format(new Date(value));

        xValues.add(date);
    }

    for(int i = 0; i < measureDataListEntry.size(); i++) {
        String stringValue = measureDataListEntry.get(i).getValue();
        int dayOfWeek = Helper.getDayOfWeek(measureDataListEntry.get(i).getTime());
        float value = Float.parseFloat(stringValue);

        switch(dayOfWeek) {
        case Calendar.MONDAY:
            yValuesMonday.add(new Entry(value, i));
            break;
        case Calendar.TUESDAY:
            yValuesTuesday.add(new Entry(value, i));
            break;
        case Calendar.WEDNESDAY:
            yValuesWednesday.add(new Entry(value, i));
            break;
        case Calendar.THURSDAY:
            yValuesThursday.add(new Entry(value, i));
            break;
        case Calendar.FRIDAY:
            yValuesFriday.add(new Entry(value, i));
            break;
        case Calendar.SATURDAY:
            yValuesSaturday.add(new Entry(value, i));
            break;
        case Calendar.SUNDAY:
            yValuesSunday.add(new Entry(value, i));
            break;
        }
    }

    LineDataSet lineDataSetMonday = new LineDataSet(yValuesMonday, this.getResources().getString(R.string.text_monday));

    lineDataSetMonday.setColor(this.getResources().getColor(R.color.diagramGreenColor));
    lineDataSetMonday.setCircleColor(this.getResources().getColor(R.color.diagramGreenColor));
    lineDataSetMonday.setLineWidth(1f);
    lineDataSetMonday.setCircleSize(4f);
    lineDataSetMonday.setFillAlpha(65);
    lineDataSetMonday.setFillColor(this.getResources().getColor(R.color.diagramGreenColor));

    LineDataSet lineDataSetTuesday = new LineDataSet(yValuesTuesday, this.getResources().getString(R.string.text_tuesday));

    lineDataSetTuesday.setColor(this.getResources().getColor(R.color.diagramOrangeColor));
    lineDataSetTuesday.setCircleColor(this.getResources().getColor(R.color.diagramOrangeColor));
    lineDataSetTuesday.setLineWidth(1f);
    lineDataSetTuesday.setCircleSize(4f);
    lineDataSetTuesday.setFillAlpha(65);
    lineDataSetTuesday.setFillColor(this.getResources().getColor(R.color.diagramOrangeColor));

    LineDataSet lineDataSetWednesday = new LineDataSet(yValuesWednesday, this.getResources().getString(R.string.text_wednesday));

    lineDataSetWednesday.setColor(this.getResources().getColor(R.color.diagramPinkColor));
    lineDataSetWednesday.setCircleColor(this.getResources().getColor(R.color.diagramPinkColor));
    lineDataSetWednesday.setLineWidth(1f);
    lineDataSetWednesday.setCircleSize(4f);
    lineDataSetWednesday.setFillAlpha(65);
    lineDataSetWednesday.setFillColor(this.getResources().getColor(R.color.diagramPinkColor));

    LineDataSet lineDataSetThursday = new LineDataSet(yValuesThursday, this.getResources().getString(R.string.text_thursday));

    lineDataSetThursday.setColor(this.getResources().getColor(R.color.diagramBlackColor));
    lineDataSetThursday.setCircleColor(this.getResources().getColor(R.color.diagramBlackColor));
    lineDataSetThursday.setLineWidth(1f);
    lineDataSetThursday.setCircleSize(4f);
    lineDataSetThursday.setFillAlpha(65);
    lineDataSetThursday.setFillColor(this.getResources().getColor(R.color.diagramBlackColor));

    LineDataSet lineDataSetFriday = new LineDataSet(yValuesFriday, this.getResources().getString(R.string.text_friday));

    lineDataSetFriday.setColor(this.getResources().getColor(R.color.diagramBlueColor));
    lineDataSetFriday.setCircleColor(this.getResources().getColor(R.color.diagramBlueColor));
    lineDataSetFriday.setLineWidth(1f);
    lineDataSetFriday.setCircleSize(4f);
    lineDataSetFriday.setFillAlpha(65);
    lineDataSetFriday.setFillColor(this.getResources().getColor(R.color.diagramBlueColor));

    LineDataSet lineDataSetSaturday = new LineDataSet(yValuesSaturday, this.getResources().getString(R.string.text_saturday));

    lineDataSetSaturday.setColor(this.getResources().getColor(R.color.diagramRedColor));
    lineDataSetSaturday.setCircleColor(this.getResources().getColor(R.color.diagramRedColor));
    lineDataSetSaturday.setLineWidth(1f);
    lineDataSetSaturday.setCircleSize(4f);
    lineDataSetSaturday.setFillAlpha(65);
    lineDataSetSaturday.setFillColor(this.getResources().getColor(R.color.diagramRedColor));

    LineDataSet lineDataSetSunday = new LineDataSet(yValuesSunday, this.getResources().getString(R.string.text_sunday));

    lineDataSetSunday.setColor(this.getResources().getColor(R.color.diagramYellowColor));
    lineDataSetSunday.setCircleColor(this.getResources().getColor(R.color.diagramYellowColor));
    lineDataSetSunday.setLineWidth(1f);
    lineDataSetSunday.setCircleSize(4f);
    lineDataSetSunday.setFillAlpha(65);
    lineDataSetSunday.setFillColor(this.getResources().getColor(R.color.diagramYellowColor));

    ArrayList<LineDataSet> dataSets = new ArrayList<LineDataSet>();

    dataSets.add(lineDataSetMonday);
    dataSets.add(lineDataSetTuesday);
    dataSets.add(lineDataSetWednesday);
    dataSets.add(lineDataSetThursday);
    dataSets.add(lineDataSetFriday);
    dataSets.add(lineDataSetSaturday);
    dataSets.add(lineDataSetSunday);

    LineData data = new LineData(xValues, dataSets);

    this.lineChart.setData(data);
    this.lineChart.animateX(1000);
}

Everything is working fine:

enter image description here

1
androidmpandroidchart

1 Answers

1
votes

I'm not exactly sure what you want. But to center the x-labels above the bars, call:

chart.getXLabels().setCenterXLabelText(true);

As for the groups inside the barchart, maybe you should check out the example project and see what is done here:

https://github.com/PhilJay/MPAndroidChart/blob/master/MPChartExample/src/com/xxmassdeveloper/mpchartexample/BarChartActivityMultiDataset.java

Update:

If you simply want to have a separate color for each day, put all entries in one DataSet, and add 7 colors (one for each day) to the dataset. The x-values array in that case needs to be as long as the array of entries you provided, containing the different dates.