I'm trying to have a grouped bar chart using MPAndroidChart. The last bar at 5 in the screenshot below gets cut off.
What could I have done wrong?
I am using v3.0.1. I have read this official doc at https://github.com/PhilJay/MPAndroidChart/wiki/Setting-Data#grouped-barchart.
private void createBarChart(BarChart barChart) {
barChart.getDescription().setEnabled(false);
barChart.getAxisRight().setEnabled(false);
barChart.getAxisLeft().setEnabled(true);
barChart.setDrawGridBackground(true);
barChart.setDrawValueAboveBar(false);
barChart.setDrawBarShadow(false);
barChart.setEnabled(true);
barChart.setTouchEnabled(false);
barChart.setPinchZoom(false);
barChart.setDoubleTapToZoomEnabled(false);
barChart.getLegend().setEnabled(false);
XAxis xAxis = barChart.getXAxis();
xAxis.setDrawLabels(true);
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
xAxis.setDrawGridLines(true);
xAxis.setCenterAxisLabels(true);
xAxis.setAxisMinimum(0F);
xAxis.setGranularity(1F);
YAxis leftAxis = barChart.getAxisLeft();
leftAxis.setAxisMinimum(0F);
leftAxis.setAxisMaximum(50F); // 100F(100%) max
barChart.setData(createBarChartData());
barChart.groupBars(0F, 0.06F, 0.02F);
barChart.invalidate();
}
private BarData createBarChartData() {
ArrayList<BarEntry> valuesA = new ArrayList<>();
valuesA.add(new BarEntry(0, 20));
valuesA.add(new BarEntry(1, 40));
valuesA.add(new BarEntry(2, 20));
valuesA.add(new BarEntry(3, 10));
valuesA.add(new BarEntry(4, 5));
valuesA.add(new BarEntry(5, 5));
BarDataSet valuesADataSet = new BarDataSet(valuesA, "A");
valuesADataSet.setColor(ColorTemplate.COLORFUL_COLORS[3]);
ArrayList<BarEntry> valuesB = new ArrayList<>();
valuesB.add(new BarEntry(0, 35));
valuesB.add(new BarEntry(1, 20));
valuesB.add(new BarEntry(2, 15));
valuesB.add(new BarEntry(3, 10));
valuesB.add(new BarEntry(4, 10));
valuesB.add(new BarEntry(5, 10));
BarDataSet valuesBDataSet = new BarDataSet(valuesB, "B");
valuesBDataSet.setColor(ColorTemplate.COLORFUL_COLORS[4]);
BarData barData = new BarData(valuesADataSet, valuesBDataSet);
barData.setDrawValues(false);
barData.setBarWidth(0.45F);
return barData;
}
I was able to accomplish it by calling xAxis.setAxisMaximum(6F);
Related
I want to create below image like combine graph, I have refered https://github.com/PhilJay/MPAndroidChart for it.
The code which they mention for it is not able to generate this graph?
Can somebody please help me with it?
Follow below example:
CombinedData data = new CombinedData();
data.setData(barData());
data.setData(lineData());
combinedChart.setData(data);
combinedChart.getDescription().setText("");
Legend legend = combinedChart.getLegend();
legend.setStackSpace(5);
// xAxis customization
XAxis xAxis = combinedChart.getXAxis();
xAxis.setGranularity(1f);
xAxis.setGranularityEnabled(true);
xAxis.setCenterAxisLabels(false);
xAxis.setDrawGridLines(false);
xAxis.setAxisMaximum(barData().getXMax() + 1);
xAxis.setAxisMinimum(barData().getXMin() - 1);
xAxis.setPosition(XAxis.XAxisPosition.BOTH_SIDED);
xAxis.setValueFormatter(new IndexAxisValueFormatter(getXAxisValues()));
YAxis leftAxis = combinedChart.getAxisLeft();
YAxis rightAxis = combinedChart.getAxisRight();
combinedChart.animateY(1000);
legend.setTextColor(Color.BLACK);
xAxis.setTextColor(Color.BLACK);
leftAxis.setTextColor(Color.BLACK);
rightAxis.setTextColor(Color.BLACK);
combinedChart.getDescription().setText("Last 6 Months Data");
combinedChart.getDescription().setTextSize(12);
combinedChart.setDrawMarkers(true);
combinedChart.setMarker(markerView(context));
combinedChart.getAxisLeft().addLimitLine(lowerLimitLine(2,"Lower Limit",2,12,getColor("defaultOrange"),getColor("defaultOrange")));
combinedChart.getAxisLeft().addLimitLine(upperLimitLine(5,"Upper Limit",2,12,getColor("defaultGreen"),getColor("defaultGreen")));
combinedChart.getXAxis().setGranularityEnabled(true);
combinedChart.getXAxis().setGranularity(1.0f);
combinedChart.getXAxis().setLabelCount(data.getEntryCount());
private BarData barData()
{
ArrayList<BarEntry> group1 = new ArrayList<BarEntry>();
group1.add(new BarEntry(0, 1));
group1.add(new BarEntry(1, 2));
group1.add(new BarEntry(2, 3));
group1.add(new BarEntry(3, 4));
group1.add(new BarEntry(4, 3));
group1.add(new BarEntry(5, 6));
BarDataSet barDataSet = new BarDataSet(group1, "Bars");
barDataSet.setAxisDependency(YAxis.AxisDependency.RIGHT);
barDataSet.setColors(ColorTemplate.COLORFUL_COLORS);
barDataSet.setValueTextSize(10);
BarData barData = new BarData(barDataSet);
barData.setBarWidth(0.9f);
barDataSet.setValueTextColor(Color.BLACK);
return barData;
}
private LineData lineData()
{
ArrayList<Entry> line = new ArrayList<Entry> ();
line.add(new Entry(0, 4));
line.add(new Entry(1, 5));
line.add(new Entry(2, 2));
line.add(new Entry(3, 3));
line.add(new Entry(4, 1));
line.add(new Entry(5, 2));
LineDataSet lineDataSet = new LineDataSet(line, "Line");
lineDataSet.setAxisDependency(YAxis.AxisDependency.LEFT);
lineDataSet.setLineWidth(2);
lineDataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);
lineDataSet.setHighlightEnabled(true); // allow highlighting for DataSet
// set this to false to disable the drawing of highlight indicator (lines)
lineDataSet.setDrawHighlightIndicators(true);
lineDataSet.setHighLightColor(Color.RED);
lineDataSet.setValueTextSize(10);
lineDataSet.setCircleRadius(6);
lineDataSet.setCircleHoleRadius(3);
LineData lineData = new LineData(lineDataSet);
lineDataSet.setColors(Color.DKGRAY);
lineDataSet.setValueTextColor(Color.BLACK);
lineDataSet.setCircleColorHole(Color.DKGRAY);
lineDataSet.setCircleColor(Color.CYAN);
return lineData;
}
where combinedChart is your chart view.
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 am making a barchart as shown in the code below. However the x labels "12:00", "12:10", ... are not showing up on the graph. Only the first one shows ("12:00").
I am facing another issue. I have two charts on the same page and I can't scroll down the page to see the bottom chart which is only partially shown.
BarChart bchart = view.findViewById(R.id.barChart);
ArrayList<BarEntry> yVals1 = new ArrayList<BarEntry>();
yVals1.add(new BarEntry(0, 75));
yVals1.add(new BarEntry(10, 74));
yVals1.add(new BarEntry(20, 15));
yVals1.add(new BarEntry(30, 28));
yVals1.add(new BarEntry(40, 59));
yVals1.add(new BarEntry(50, 78));
yVals1.add(new BarEntry(60, 68));
yVals1.add(new BarEntry(70, 81));
yVals1.add(new BarEntry(80, 98));
yVals1.add(new BarEntry(90, 42));
yVals1.add(new BarEntry(100, 100));
BarDataSet set1;
//setting color
set1 = new BarDataSet(yVals1, "Satisfaction %");
set1.setColors(ColorTemplate.MATERIAL_COLORS);
ArrayList<IBarDataSet> dataSets = new ArrayList<IBarDataSet>();
dataSets.add(set1);
String [] values = {"12:00", "12:10", "12:20", "12:30", "12:40", "12:50", "13:00"};
bchart.getXAxis().setValueFormatter(new IndexAxisValueFormatter(values));
//Removing description
Description description = new Description();
description.setText("");
bchart.setDescription(description);
//Removing right y axis labels
YAxis rightYAxis = bchart.getAxisRight();
rightYAxis.setEnabled(false);
//Removing grid background
bchart.setDrawGridBackground(false);
BarData data = new BarData(dataSets);
data.setValueTextSize(10f);
data.setBarWidth(5f);
bchart.setTouchEnabled(false);
bchart.getAxisRight().setDrawLabels(false);
bchart.getXAxis().setDrawLabels(true);
bchart.getLegend().setEnabled(false);
bchart.setData(data);
For 1st problem follow following code:
ArrayList<String> labels = new ArrayList<String> ();
labels.add( "12:00");
labels.add( "12:10");
labels.add( "12:20");
labels.add( "12:30");
labels.add( "12:40");
labels.add( "12:50");
XAxis xAxis = chart.getXAxis();
xAxis.setValueFormatter(new IndexAxisValueFormatter(labels));
For 2nd problem you need to implement scrollview in your view.xml as parent view of your layout where your are creating your chartviews.
A problem occured while building a chart. Studio doesn't accept data in this
form. Actually problem is only with month's names. Without them code works fine.
MPAndroidChart version 3. In official examples i understood nothing). Studio says:Error:(46, 24) error: constructor BarData in class BarData cannot be applied to given types; required: IBarDataSet[] found: ArrayList,BarDataSet reason: varargs mismatch; ArrayList cannot be converted to IBarDataSet. Please tell me how to add strings with months. Thank you.
barChart= (BarChart) findViewById(R.id.bargraph);
List<BarEntry> calls = new ArrayList<>();
calls.add(new BarEntry(0, 9f));
calls.add(new BarEntry(1, 3f));
calls.add(new BarEntry(2, 5f));
calls.add(new BarEntry(3, 2f));
calls.add(new BarEntry(4, 6f));
calls.add(new BarEntry(5, 12f));
BarDataSet barDataSet = new BarDataSet(calls,"num");
ArrayList<String> months = new ArrayList<>();
months.add("Jan");
months.add("Feb");
months.add("Mar");
months.add("Apr");
months.add("May");
months.add("June");
BarData data;
data = new BarData(months,barDataSet);
data.setBarWidth(0.9f);
barChart.setData(data);
barChart.setFitBars(true);
barChart.invalidate();
Buddy use version 3.0.4 and follow example below:
ArrayList<BarEntry>() barEntries = new ArrayList<BarEntry>();
barEntries.add(new BarEntry(0, 1));
barEntries.add(new BarEntry(1, 2));
barEntries.add(new BarEntry(2, 4));
barEntries.add(new BarEntry(3, 6));
barEntries.add(new BarEntry(4, 5));
barEntries.add(new BarEntry(5, 7));
barDataSet = new BarDataSet(barEntries, "Contracts");
barDataSet.setAxisDependency(YAxis.AxisDependency.LEFT);
// barDataSet.setColors(ColorTemplate.COLORFUL_COLORS);
barDataSet.setColor(getColor("defaultYellow"));
barDataSet.setHighlightEnabled(true);
barDataSet.setHighLightColor(Color.RED);
barDataSet.setValueTextSize(defaultValueTextSize);
barDataSet.setValueTextColor(getColor("primaryDark"));
BarData barData = new BarData(barDataSet);
barChart.getDescription().setText("No. of Contracts signed in 6 months");
barChart.getDescription().setTextSize(12);
barChart.setDrawMarkers(true);
barChart.setMarker(markerView(context));
barChart.getAxisLeft().addLimitLine(lowerLimitLine(2,"Minimum",2,12,getColor("defaultOrange"),getColor("defaultOrange")));
barChart.getAxisLeft().addLimitLine(upperLimitLine(5,"Target",2,12,getColor("defaultGreen"),getColor("defaultGreen")));
barChart.getAxisLeft().setAxisMinimum(0);
barChart.getXAxis().setPosition(XAxis.XAxisPosition.BOTH_SIDED);
ArrayList<String> labels = new ArrayList<String> ();
labels.add( "JAN");
labels.add( "FEB");
labels.add( "MAR");
labels.add( "APR");
labels.add( "MAY");
labels.add( "JUN");
barChart.getXAxis().setValueFormatter(new IndexAxisValueFormatter(labels));
barChart.animateY(1000);
barChart.getXAxis().setGranularityEnabled(true);
barChart.getXAxis().setGranularity(1.0f);
barChart.getXAxis().setLabelCount(barDataSet.getEntryCount());
barChart.setData(barData);
one days ago ,i have same question
ArrayList<String> months = new ArrayList<>();
months.add("Jan");
months.add("Feb");
months.add("Mar");
months.add("Apr");
months.add("May");
months.add("June");
change by:
final HashMap<Integer,String>nuMap = new HashMap<>();
nuMap.put(0,"Jan");
nuMap.put(1,"Feb");
nuMap.put(2,"Mar");
nuMap.put(3,"Apr");
nuMap.put(4,"May");
nuMap.put(5,"June");
and now setValueFormatter
XAxis xAxis = yourchart.getXAxis();
xAxis.setValueFormatter(new IAxisValueFormatter() {
#Override
public String getFormattedValue(float value, AxisBase axis) {
return nuMap.get((int)value);
}
});
new it's OK
you can plot the XAxis Label's word!
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 !