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 xValues = new ArrayList();
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 yValuesMonday = new ArrayList();
ArrayList yValuesTuesday = new ArrayList();
ArrayList yValuesWednesday = new ArrayList();
ArrayList yValuesThursday = new ArrayList();
ArrayList yValuesFriday = new ArrayList();
ArrayList yValuesSaturday = new ArrayList();
ArrayList yValuesSunday = new ArrayList();
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 dataSets = new ArrayList();
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:
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:
How can I fix that issue?
EDIT
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 = null;
if(this.favourite) {
measureDataListEntry = this.sessionMeasureDataListFavourite.getMeasureDataList().getMeasureDataListEntries();
} else {
measureDataListEntry = this.sessionMeasureDataList.getMeasureDataList().getMeasureDataListEntries();
}
ArrayList xValues = new ArrayList();
ArrayList yValuesMonday = new ArrayList();
ArrayList yValuesTuesday = new ArrayList();
ArrayList yValuesWednesday = new ArrayList();
ArrayList yValuesThursday = new ArrayList();
ArrayList yValuesFriday = new ArrayList();
ArrayList yValuesSaturday = new ArrayList();
ArrayList yValuesSunday = new ArrayList();
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 dataSets = new ArrayList();
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: