I am working on an app with charts. I have used MPAndroidChart in the app, but when I set dynamic labels to the X-axis, labels are not positioning the center of each bar.
I tried many answers from different website and StackOverflow but no success. Maybe the answers were not directly related to my issue.
Below is the java code:
List<BarEntry> entries = new ArrayList<>();
List<Integer> barColors = new ArrayList<>();
final ArrayList<String> xLabel = new ArrayList<>();
String[] labels;
labels = xLabel.toArray(new String[xLabel.size()]);
BarDataSet set = new BarDataSet(entries, "");
set.setColors(barColors);
set.setValueTextSize(15);
BarData data = new BarData(set);
data.setValueFormatter(new PercentFormatter());
chart.setDrawBarShadow(false);
chart.setDrawValueAboveBar(true);
chart.setData(data);
chart.setDrawGridBackground(false);
chart.setFitBars(true);
chart.invalidate();
chart.setTouchEnabled(false);
chart.setDragEnabled(false);
chart.setDrawBorders(false);
chart.getLegend().setEnabled(false); // Hide the legend
chart.getAxisLeft().setDrawAxisLine(false);
chart.getAxisRight().setDrawAxisLine(false);
chart.getXAxis().setDrawGridLines(false);
Description description = new Description();
description.setText("");
chart.setDescription(description);
chart.getRendererXAxis().getPaintAxisLabels().setTextAlign(Paint.Align.LEFT);
YAxis yAxisRight = chart.getAxisRight();
yAxisRight.setEnabled(false);
YAxis yAxisLeft = chart.getAxisLeft();
yAxisLeft.setEnabled(false);
XAxis xAxis = chart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
xAxis.setAxisMinimum(data.getXMin() - .5f);
xAxis.setAxisMaximum(data.getXMax() + .5f);
xAxis.setCenterAxisLabels(false);
xAxis.setLabelCount(xLabel.size());
xAxis.setDrawGridLines(false);
xAxis.setLabelRotationAngle(-45f);
xAxis.setValueFormatter(new LabelFormatter(labels));
YAxis leftAxis = chart.getAxisLeft();
leftAxis.setEnabled(false);
YAxis rightAxis = chart.getAxisRight();
rightAxis.setEnabled(false);
rightAxis.setValueFormatter(new PercentFormatter());
Legend legend = chart.getLegend();
legend.setEnabled(false);
Below is the result I am getting.
I want the labels "WWWWWWWWWWWWWWW" should be in place at the center of each bar.
please try this code :
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.activity_barchart);
tvX = (TextView) findViewById(R.id.tvXMax);
tvY = (TextView) findViewById(R.id.tvYMax);
mSeekBarX = (SeekBar) findViewById(R.id.seekBar1);
mSeekBarY = (SeekBar) findViewById(R.id.seekBar2);
mChart = (BarChart) findViewById(R.id.chart1);
mChart.setOnChartValueSelectedListener(this);
mChart.setDrawBarShadow(false);
mChart.setDrawValueAboveBar(true);
mChart.getDescription().setEnabled(false);
// if more than 60 entries are displayed in the chart, no values will be
// drawn
mChart.setMaxVisibleValueCount(60);
// scaling can now only be done on x- and y-axis separately
mChart.setPinchZoom(false);
mChart.setDrawGridBackground(false);
// mChart.setDrawYLabels(false);
IAxisValueFormatter xAxisFormatter = new DayAxisValueFormatter(mChart);
XAxis xAxis = mChart.getXAxis();
xAxis.setPosition(XAxisPosition.BOTTOM);
xAxis.setTypeface(mTfLight);
xAxis.setDrawGridLines(false);
xAxis.setGranularity(1f); // only intervals of 1 day
xAxis.setLabelCount(7);
xAxis.setValueFormatter(xAxisFormatter);
IAxisValueFormatter custom = new MyAxisValueFormatter();
YAxis leftAxis = mChart.getAxisLeft();
leftAxis.setTypeface(mTfLight);
leftAxis.setLabelCount(8, false);
leftAxis.setValueFormatter(custom);
leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART);
leftAxis.setSpaceTop(15f);
leftAxis.setAxisMinimum(0f); // this replaces setStartAtZero(true)
YAxis rightAxis = mChart.getAxisRight();
rightAxis.setDrawGridLines(false);
rightAxis.setTypeface(mTfLight);
rightAxis.setLabelCount(8, false);
rightAxis.setValueFormatter(custom);
rightAxis.setSpaceTop(15f);
rightAxis.setAxisMinimum(0f); // this replaces setStartAtZero(true)
Legend l = mChart.getLegend();
l.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);
l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);
l.setOrientation(Legend.LegendOrientation.HORIZONTAL);
l.setDrawInside(false);
l.setForm(LegendForm.SQUARE);
l.setFormSize(9f);
l.setTextSize(11f);
l.setXEntrySpace(4f);
// l.setExtra(ColorTemplate.VORDIPLOM_COLORS, new String[] { "abc",
// "def", "ghj", "ikl", "mno" });
// l.setCustom(ColorTemplate.VORDIPLOM_COLORS, new String[] { "abc",
// "def", "ghj", "ikl", "mno" });
XYMarkerView mv = new XYMarkerView(this, xAxisFormatter);
mv.setChartView(mChart); // For bounds control
mChart.setMarker(mv); // Set the marker to the chart
setData(12, 50);
// setting data
mSeekBarY.setProgress(50);
mSeekBarX.setProgress(12);
mSeekBarY.setOnSeekBarChangeListener(this);
mSeekBarX.setOnSeekBarChangeListener(this);
// mChart.setDrawLegend(false);
}
Related
I am displaying a simple bar graph where in I want to display the Y labels above the bar. For this i am setting mChart.setDrawValueAboveBar(true);. It is just not displaying anything. If this value is set to false, labels are displayed in the bar.
Below is the code for default settings:
mChart.setDrawBarShadow(false);
mChart.setDrawValueAboveBar(true);
mChart.setSelected(false);
mChart.getDescription().setEnabled(false);
// scaling can now only be done on x- and y-axis separately
mChart.setPinchZoom(false);
mChart.setDoubleTapToZoomEnabled(false);
mChart.setDrawBarShadow(false);
mChart.setDrawGridBackground(false);
mChart.getAxisLeft().setDrawLabels(true);
mChart.getAxisRight().setDrawLabels(true);
mChart.getXAxis().setDrawLabels(true);
mChart.getLegend().setEnabled(false);
XAxis xAxis = mChart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
xAxis.setGranularity(1f);
xAxis.setAxisLineColor(ContextCompat.getColor(mContext, R.color.red));
xAxis.setTextColor(ContextCompat.getColor(mContext, R.color.red));
YAxis leftAxis = mChart.getAxisLeft();
leftAxis.setValueFormatter(new LargeValueFormatter());
leftAxis.setDrawGridLines(false);
leftAxis.setEnabled(false);
leftAxis.setAxisMinimum(0f);
leftAxis.setSpaceBottom(0);
leftAxis.setSpaceTop(15f);
leftAxis.disableAxisLineDashedLine();
leftAxis.disableGridDashedLine();
YAxis rightAxis = mChart.getAxisRight();
rightAxis.setDrawGridLines(false);
rightAxis.setAxisMinimum(0f);
rightAxis.setSpaceBottom(0);
rightAxis.setSpaceTop(15f);
rightAxis.disableAxisLineDashedLine();
rightAxis.disableGridDashedLine();
rightAxis.setEnabled(false);
Below you can find screen shot as well as my code;
Code is below;
mChart = view.findViewById(R.id.bar_chart);
barWidth = 0.3f;
barSpace = 0.02f;
groupSpace = 0.4f;
mChart.setDescription(null);
mChart.setPinchZoom(false);
mChart.setScaleEnabled(false);
mChart.setDrawBarShadow(false);
mChart.setDrawGridBackground(false);
mChart.getAxisLeft().setDrawGridLines(false);
mChart.getXAxis().setDrawGridLines(false);
mChart.setBackgroundColor(Color.TRANSPARENT);
ArrayList<BarEntry> yValues = new ArrayList<>();
yValues.add(new BarEntry(5, new float[]{10, 20, 30, 50}));
yValues.add(new BarEntry(15, new float[]{12, 13}));
yValues.add(new BarEntry(25, new float[]{15, 15}));
yValues.add(new BarEntry(35, new float[]{17, 17}));
BarDataSet set = new BarDataSet(yValues, "");
set.setColors(new int[]{Color.rgb(67, 67, 72), Color.rgb(124, 181, 236),
Color.rgb(124, 181, 236), Color.rgb(124, 181, 236)});
set.setStackLabels(new String[]{
"Men", "Women", "fgdgfx", "gfdrhd"
});
BarData data = new BarData(set);
data.setBarWidth(1.9f);
mChart.setData(data);
mChart.invalidate();
final ArrayList xVals = new ArrayList();
xVals.add("New");
xVals.add("Accepted");
xVals.add("Completed");
xVals.add("Cancelled");
XAxis xAxis = mChart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
xAxis.setTextColor(Color.RED);
xAxis.setDrawAxisLine(true);
xAxis.setDrawGridLines(false);
xAxis.setCenterAxisLabels(true);
xAxis.setAxisMinimum(0.4f);
xAxis.setGranularity(4f);
xAxis.setValueFormatter(new IndexAxisValueFormatter(xVals));
mChart.getAxisRight().setEnabled(false);
YAxis leftAxis = mChart.getAxisLeft();
leftAxis.setValueFormatter(new LargeValueFormatter());
leftAxis.setDrawGridLines(false);
leftAxis.setSpaceTop(35f);
leftAxis.setAxisMinimum(0f);
leftAxis.setGranularity(1.0f);
leftAxis.setGranularityEnabled(true);
Legend l = mChart.getLegend();
l.setPosition(Legend.LegendPosition.BELOW_CHART_RIGHT);
l.setWordWrapEnabled(true);
The problem was the float value with is got in the getFormattedValue method of the Formatter. The values which you are getting are(0,10,20,30) and the array you provided for the value of x-axis is only of size 4. That's why it was only printing the first x-value and not the rest.
Please change your code as followed.
xAxis.setValueFormatter(new IAxisValueFormatter() {
#Override
public String getFormattedValue(float value, AxisBase axis) {
try {
return xVals.get((int) (value / 10));//dividing the value by 10 to get the multiplied value.
} catch (Exception e){
return "";
}
}
});
I use the MPandroid Chart lib from github, this is the lib link MPANDROID in my app to draw some charts, but the problem is the height of the bar, I had YValue1 = 81, YValue2 = 97, YValue3 = 91, YValue = 86 but the bars are very small !!
link of image
private void setBarChart(BarChart mChart, DashboardMCOP mcop, DashboardMCOM mcom)
{
mChart.setOnChartValueSelectedListener(this);
mChart.setDrawBarShadow(false);
mChart.setDrawValueAboveBar(true);
mChart.getDescription().setEnabled(false);
mChart.setMaxVisibleValueCount(100);
mChart.setPinchZoom(false);
mChart.setDrawGridBackground(false);
IAxisValueFormatter xAxisFormatter = new DayAxisValueFormatter(mChart,context );
XAxis xAxis = mChart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
xAxis.setDrawGridLines(false);
xAxis.setGranularity(1f); // only intervals of 1 day
xAxis.setLabelCount(7);
xAxis.setValueFormatter(xAxisFormatter);
YAxis leftAxis = mChart.getAxisLeft();
leftAxis.setEnabled(false);
YAxis rightAxis = mChart.getAxisRight();
rightAxis.setEnabled(false);
Legend l = mChart.getLegend();
l.setEnabled(false);
XYMarkerView mv = new XYMarkerView(context, xAxisFormatter);
mv.setChartView(mChart); // For bounds control
mChart.setMarker(mv); // Set the marker to the chart
mChart.animateY(1400, Easing.EasingOption.EaseInOutQuad);
setDataBar(mChart, mcop, mcom);
}
my function to set Data in the bar chart
private void setDataBar(BarChart mChart, DashboardMCOP mcop, DashboardMCOM mcom)
{
ArrayList<BarEntry> yVals1 = new ArrayList<BarEntry>();
int id = mChart.getId();
String viewName = getResources().getResourceEntryName(id);
if(viewName.equalsIgnoreCase("barchartMCOM1")) {
if(mcom != null) {
yVals1.add(new BarEntry(0, mcom.getTreat()));
yVals1.add(new BarEntry(1, mcom.getContract()));
}
}
BarDataSet set1 = null;
set1 = new BarDataSet(yVals1, "");
set1.setColors(ColorTemplate.rgb("#FF0000"));
ArrayList<IBarDataSet> dataSets = new ArrayList<IBarDataSet>();
dataSets.add(set1);
BarData data = new BarData(dataSets);
data.setValueTextSize(10f);
data.setBarWidth(0.9f);
data.setValueFormatter(new MyAxisValueFormatter());
mChart.setFitBars(true);
mChart.setData(data);
mChart.invalidate();
}
I update the lib from github, then I use the sample BarChartFragment to reseolve the issue, this is my code for everyone who face the same problem in the futur :
private void setBarChart(BarChart mChart, DashboardMCOP mcop, DashboardMCOM mcom)
{
mChart.getDescription().setEnabled(false);
MyMarkerView mv = new MyMarkerView(getActivity(), R.layout.custom_marker_view);
mv.setChartView(mChart); // For bounds control
mChart.setMarker(mv);
mChart.setMaxVisibleValueCount(100);
mChart.setDrawGridBackground(false);
mChart.setDrawBarShadow(false);
IAxisValueFormatter xAxisFormatter = new DayAxisValueFormatter(mChart,context );
XAxis xAxis = mChart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
xAxis.setDrawGridLines(false);
xAxis.setGranularity(1f); // only intervals of 1 day
xAxis.setLabelCount(7);
xAxis.setValueFormatter(xAxisFormatter);
Legend l = mChart.getLegend();
l.setEnabled(false);
YAxis leftAxis = mChart.getAxisLeft();
leftAxis.setAxisMinimum(0f); // this replaces setStartAtZero(true)
leftAxis.setEnabled(true);
leftAxis.setAxisMaximum(100);
mChart.getAxisRight().setEnabled(false);
mChart.animateY(1400, Easing.EasingOption.EaseInOutQuad);
setDataBar(mChart, mcop, mcom);
}
for SetDataBar is not changead !
I want to create a bar chart with YAxis contains floats values and xAxis contains String values,
My problem is that i want to change displayed data in YAxis and make it String, but the value still float
this is my chart
mChart = (BarChart) findViewById(R.id.chart1);
mChart.setDescription("");
// if more than 60 entries are displayed in the chart, no values will be
// scaling can now only be done on x- and y-axis separately
mChart.setPinchZoom(false);
mChart.setDrawBarShadow(false);
mChart.setDrawGridBackground(false);
XAxis xAxis = mChart.getXAxis();
xAxis.setPosition(XAxisPosition.BOTTOM);
xAxis.setSpaceBetweenLabels(0);
xAxis.setTextSize(10);
xAxis.setDrawGridLines(false);
mChart.getAxisRight().setDrawGridLines(false);
mChart.getAxisLeft().setDrawGridLines(false);
mChart.getAxisLeft().setDrawLabels(true);
mChart.getXAxis().setXOffset(10);
YAxis rightAxis = mChart.getAxisRight();
rightAxis.setDrawAxisLine(false);
rightAxis.setTextColor(Color.WHITE);
rightAxis.setDrawGridLines(false);
// add a nice and smooth animation
mChart.animateY(2500);
mChart.getLegend().setEnabled(true);
and this is how i call the bar data set
xVals.add(" ");
ArrayList<BarEntry> yVals1 = new ArrayList<BarEntry>();
for (int i = 0; i < yvalues.size(); i++) {
BarEntry b=new BarEntry((int)Float.parseFloat(yvalues.get(i)), i);
//here is the BarEntry values but i cant change the displayed value its still
//showing float
yVals1.add(b);
}
BarDataSet set1 = new BarDataSet(yVals1, "duration min");
set1.setColor(Color.GREEN);
set1.setDrawValues(false);
set1.setLabel("duration min");
ArrayList<BarDataSet> dataSets = new ArrayList<BarDataSet>();
dataSets.add(set1);
BarData data = new BarData(xVals, dataSets);
mChart.setData(data);
mChart.invalidate();
If you do not want to display the floating point value, try fetching the rounded value.
BarEntry b=new BarEntry(Math.round(yvalues.get(i)), i);
I need to remove right legends from BarChart.
This is my code.
mChart = (BarChart) rootView.findViewById(R.id.chart1);
mChart.setOnChartValueSelectedListener(this);
mChart.setDrawBarShadow(false);
mChart.setDrawValueAboveBar(true);
mChart.setDescription("");
mChart.setMaxVisibleValueCount(60);
mChart.setPinchZoom(false);
mChart.setDrawGridBackground(false);
mTf = Typeface.createFromAsset(getActivity().getAssets(), "OpenSans-Regular.ttf");
XAxis xAxis = mChart.getXAxis();
xAxis.setPosition(XAxisPosition.BOTTOM);
xAxis.setTypeface(mTf);
xAxis.setDrawGridLines(false);
xAxis.setSpaceBetweenLabels(2);
ValueFormatter custom = new MyValueFormatter();
YAxis leftAxis = mChart.getAxisLeft();
leftAxis.setTypeface(mTf);
leftAxis.setLabelCount(8);
leftAxis.setValueFormatter(custom);
leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART);
leftAxis.setSpaceTop(15f);
Legend l = mChart.getLegend();
l.setPosition(LegendPosition.BELOW_CHART_LEFT);
l.setForm(LegendForm.SQUARE);
l.setFormSize(9f);
l.setTextSize(11f);
l.setXEntrySpace(4f);
mChart.animateXY(3000, 3000);
Thanks!
Add this line
rightAxis.setDrawLabels(false);
To hide only the labels.
For hiding the whole right axis, call:
rightAxis.setEnabled(false);
A simple one liner:
chart.getAxisRight().setEnabled(false);
For those using Kotlin lang:
chart.axisRight.isEnabled = false
Hope it helps!