Mulgard Mulgard - 2 months ago 14
Android Question

MPAndroidChart BarChart xValues Issue

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

Answer

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.