I'm trying to show a Horizontal Bar Graph in my Android app. I'm using MPChart library to do so.
However, I can't see graph being displayed. There is just the X axis and Y axis drawn but no actual graph.
Here's how I'm displaying it:
private void renderDataMPChart(ArrayList<String> nameList, ArrayList<Integer> countList){
ArrayList<BarEntry> values = new ArrayList<>();
for(int i = 0; i<nameList.size(); i++){
values.add(new BarEntry(countList.get(i), (float) i++));
}
BarDataSet barDataSet = new BarDataSet(values, type);
barDataSet.setBarBorderWidth(0.9f);
barDataSet.setColors(ColorTemplate.COLORFUL_COLORS);
BarData barData = new BarData(barDataSet);
XAxis xAxis = chart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
IndexAxisValueFormatter formatter = new IndexAxisValueFormatter(nameList);
xAxis.setGranularity(1f);
xAxis.setValueFormatter(formatter);
chart.setData(barData);
chart.setFitBars(true);
chart.animateXY(5000, 5000);
chart.invalidate();
}
The nameList is the X Axis values and the countList contains the value to display against those name. Eg: Apple-5, Banana-10
Related
I'm using BarCharts for a project in Android Studio
I created a Barchart with 2 vertical bars for each group. I also changed the x axis by adding a list of names (Strings), but it doesn't look well. I want the x axis to always be between the 2 vertical bars from 1 group (because those 2 bars are correspondent for 1 name from the x axis). Is this possible? I need the x axis to always be between the blue bar and the yellow bar. To have 1 x axis label for 1 bar group.
Here is how my chart looks right now:
My chart at the moment
Here is my code:
ArrayList<BarEntry> entries = new ArrayList<>();
ArrayList<BarEntry> firstEntries = new ArrayList<>();
for(int i=0;i<scorelist.size();i++)
{
BarEntry barEntry = new BarEntry(i, scorelist.get(i));
entries.add(barEntry);
}
for(int i=0;i<first3Scorelist.size();i++)
{
BarEntry barEntry = new BarEntry(i, first3Scorelist.get(i));
firstEntries.add(barEntry);
}
BarDataSet barDataSet2 = new BarDataSet(entries, "Last Games Score");
barDataSet2.setColors(Color.YELLOW);
BarDataSet barDataSet1 = new BarDataSet(firstEntries, "First Games Score");
barDataSet1.setColors(Color.CYAN);
BarData barData = new BarData(barDataSet1,barDataSet2);
barChart.setData(barData);
barChart.getXAxis().setValueFormatter(new IndexAxisValueFormatter(nameList));
barChart.getXAxis().setTextColor(Color.MAGENTA);
barChart.getXAxis().setTextSize(10);
barChart.setVisibleXRangeMaximum(7);
barData.setBarWidth(0.3f);
float barSpace = 0.01f;
float groupSpace = 0.3f;
barChart.animateY(3000);
barChart.animate();
barChart.groupBars((float) -0.2, groupSpace, barSpace);
barChart.getDescription().setEnabled(false);
barChart.invalidate();
}
Thank you so much!
I'm using MPAndroidChart-v2.1.6 and I'm facing the following problem.
When I have a single data entry, it starts displaying the value from 0 index at X axis. This is how it looks like.
I want it to aligned in center, when i have only single data entry, like this..
I have tried setMinimum() and setMaximum() property for that particular condition but nothing positive happened to me.when I have more than one entry, it works well.
Here is my code,
ArrayList<LineDataSet> lines = new ArrayList<>();
LineDataSet linedataset1 = new LineDataSet(group1, "Text1");
linedataset1.setDrawFilled(false);
linedataset1.setValueFormatter(new MyDataSetFormatter());
linedataset1.setFillAlpha(110);
linedataset1.setLineWidth(1f);
linedataset1.setColor(Color.rgb(67, 91, 153));
linedataset1.setCircleColor(Color.rgb(67, 91, 153));
LineDataSet linedataset2 = new LineDataSet(group2, "Text2");
linedataset2.setDrawFilled(false);
linedataset2.setValueFormatter(new MyDataSetFormatter());
linedataset2.setFillAlpha(110);
linedataset2.setLineWidth(1f);
linedataset2.setColor(Color.rgb(254, 252, 59));
linedataset2.setCircleColor(Color.rgb(254, 252, 59));
LineDataSet linedataset3 = new LineDataSet(group3, "Text3");
linedataset3.setDrawFilled(false);
linedataset3.setValueFormatter(new MyDataSetFormatter());
linedataset3.setFillAlpha(110);
linedataset3.setLineWidth(1f);
linedataset3.setColor(Color.rgb(68, 185, 102));
linedataset3.setCircleColor(Color.rgb(68, 185, 102));
LineDataSet linedataset4 = new LineDataSet(group4, "text4");
linedataset4.setDrawFilled(false);
linedataset4.setValueFormatter(new MyDataSetFormatter());
linedataset4.setFillAlpha(110);
linedataset4.setLineWidth(1f);
linedataset4.setColor(Color.rgb(145, 92, 96));
linedataset4.setCircleColor(Color.rgb(145, 92, 96));
lines.add(linedataset1);
lines.add(linedataset2);
lines.add(linedataset3);
lines.add(linedataset4);
leftYAxis = lineChart.getAxisLeft();
rightYAxis = lineChart.getAxisRight();
rightYAxis.setDrawLabels(false);
rightYAxis.setAxisMaxValue(105);
leftYAxis.setAxisMaxValue(105);
lineChart.getXAxis().setPosition(XAxis.XAxisPosition.BOTTOM);
lineChart.getXAxis().setLabelRotationAngle(-70);
lineChart.getXAxis().setDrawGridLines(false);
lineChart.getAxisLeft().setDrawGridLines(false);
lineChart.getAxisRight().setDrawGridLines(false);
lineChart.getAxisRight().setEnabled(false);
lineChart.setBackgroundColor(Color.WHITE);
lineChart.setDrawGridBackground(false);
lineChart.setData(new LineData(newLabels, lines));
lineChart.setPinchZoom(false);
lineChart.animateY(1000);
lineChart.setDescription(null);
XAxis xAxis = lineChart.getXAxis();
xAxis.setAvoidFirstLastClipping(true);
//lineChart.setBackgroundColor(Color.rgb(255, 255, 255));
lineChart.setTouchEnabled(false);
lineChart.invalidate();
Thanks in advance,
Declare line chart entries separately outside the class
private ArrayList<Entry> dataValuesDaily(){
ArrayList<Entry> dataVals = new ArrayList<>();
dataVals.add(new Entry(1,10));
dataVals.add(new Entry(11,2));
dataVals.add(new Entry(21,16));
dataVals.add(new Entry(30,4));
return dataVals;
}
And then in the class
//TODO:: LINE GRAPH
LineDataSet lineDataSet1 = new LineDataSet(dataValuesDaily(), "Data Set 1");
lineDataSet1.setMode(LineDataSet.Mode.CUBIC_BEZIER);
ArrayList<ILineDataSet> dataSets = new ArrayList<>();
dataSets.add(lineDataSet1);
//customization
mLineGraph.setTouchEnabled(true);
mLineGraph.setDragEnabled(true);
mLineGraph.setScaleEnabled(false);
mLineGraph.setPinchZoom(false);
mLineGraph.setDrawGridBackground(false);
mLineGraph.setExtraLeftOffset(15);
mLineGraph.setExtraRightOffset(15);
//to hide background lines
mLineGraph.getXAxis().setDrawGridLines(false);
mLineGraph.getAxisLeft().setDrawGridLines(false);
mLineGraph.getAxisRight().setDrawGridLines(false);
//to hide right Y and top X border
YAxis rightYAxis = mLineGraph.getAxisRight();
rightYAxis.setEnabled(false);
XAxis topXAxis = mLineGraph.getXAxis();
topXAxis.setEnabled(false);
XAxis xAxis = mLineGraph.getXAxis();
xAxis.setEnabled(true);
xAxis.setDrawGridLines(false);
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
lineDataSet1.setLineWidth(4f);
lineDataSet1.setCircleRadius(3f);
lineDataSet1.setDrawValues(false);
lineDataSet1.setCircleHoleColor(getResources().getColor(R.color.pie_color_4));
lineDataSet1.setCircleColor(getResources().getColor(R.color.pie_color_4));
LineData data = new LineData(dataSets);
mLineGraph.setData(data);
mLineGraph.animateX(2000);
mLineGraph.invalidate();
mLineGraph.getLegend().setEnabled(false);
mLineGraph.getDescription().setEnabled(false);
To set the X axis limits to specific values you can call setAxisMinimum and setAxisMaximum. For example:
XAxis xAxis = lineChart.getXAxis();
xAxis.setAxisMinimum(10);
xAxis.setAxisMaximum(30);
If you want to do this automatically using your LineDataSet you can query the min and max values of the X data
float xMin = dataSet.getXMin() - 5;
float xMax = dataSet.getXMax() + 5;
xAxis.setAxisMinimum(xMin);
xAxis.setAxisMaximum(xMax);
which will center the data even when there is only one point.
I'm using latest version of MPAndroidChart. I'm trying to generate a grouped bar chart, following the example on this link, but without success. The problem is the xAxis. Altought I set fromX = 0 , bars don't begin fit to left axis. It has an space between the left vertical line and the beginig of the first bar.
Here is my code:
BarChart barChart = (BarChart) view.findViewById(R.id.chartDesgFam);
ArrayList<BarEntry> entries = new ArrayList<>();
entries.add(new BarEntry(0,4f));
entries.add(new BarEntry(1,8f));
entries.add(new BarEntry(2,6f));
entries.add(new BarEntry(3,12f));
entries.add(new BarEntry(4,18f));
entries.add(new BarEntry(5,9f));
ArrayList<BarEntry> entries2 = new ArrayList<>();
entries2.add(new BarEntry(0,5f));
entries2.add(new BarEntry(1,6f));
entries2.add(new BarEntry(2,12f));
entries2.add(new BarEntry(3,5f));
entries2.add(new BarEntry(4,14f));
entries2.add(new BarEntry(5,3f));
BarDataSet dataset = new BarDataSet(entries, "Serie 1");
dataset.setColor(Color.rgb(0, 0, 200));
BarDataSet dataset2 = new BarDataSet(entries2, "Serie 2");
dataset2.setColor(Color.rgb(200, 0, 0));
ArrayList<String> labels = new ArrayList<String>();
labels.add("January");
labels.add("February");
labels.add("March");
labels.add("April");
labels.add("May");
labels.add("June");
XAxis xAxis = barChart.getXAxis();
xAxis.setSpaceMin(0f);
xAxis.setDrawGridLines(false);
xAxis.setDrawLabels(true);
xAxis.setCenterAxisLabels(true);
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
xAxis.setLabelCount(labels.size());
xAxis.setValueFormatter(new IAxisValueFormatter() {
#Override
public String getFormattedValue(float value, AxisBase axis) {
if (value>=0) {
if (value < labels.size() ) return labels.get((int) value);
else return "";
}
return "";
}
});
ArrayList<IBarDataSet> dataSets = new ArrayList<>();
dataSets.add(dataset);
dataSets.add(dataset2);
BarData data = new BarData(dataSets);
float groupSpace = 0.06f;
float barSpace = 0.02f; // x2 dataset
float barWidth = 0.45f; // x2 dataset
data.setBarWidth(barWidth);
barChart.setData(data);
barChart.groupBars(0, groupSpace, barSpace);
barChart.setFitBars(true);
barChart.invalidate();
In order to adjust the first bar to the left side, I need to put -0.2f in fromX parameter. I think It isn't for that, but I don't know why It doesn't begin from the left side. This is the result:
Please follow code below to get it fixed:
chart.getXAxis().setAxisMinimum(0);
chart.getXAxis().setAxisMaximum(0 + chart.getBarData().getGroupWidth(groupSpace, barSpace) * groupCount);
where groupCount is total number of entries you are having in your dataset. You can get that as:
data.getDataSetCount();
How to remove Legend from BarChat.
I have some code.
float[] yData = { (float)Math.abs(item._Lent),(float) Math.abs( item._Barrow )};
String[] xData = { "salary", "Spends" };
ArrayList<BarEntry> entries = new ArrayList<>();
for (int i = 0; i < yData.length; i++)
entries.add(new BarEntry(yData[i], i));
BarDataSet dataset = new BarDataSet(entries, "");
ArrayList<String> labels = new ArrayList<String>();
for (int i = 0; i < xData.length; i++)
labels.add(xData[i]);
BarData data = new BarData(labels, dataset);
mChart.setData(data); // set the data and list of lables into chart
BarChart barchart = mChart;
Legend legend = barchart.getLegend();
legend.setEnabled(false);
YAxis topAxis = barchart.getAxisLeft();
topAxis.setDrawLabels(false);
YAxis bottomAxis = barchart.getAxisRight();
bottomAxis.setDrawLabels(false);
XAxis rightAxis = barchart.getXAxis();
rightAxis.setDrawLabels(false);
bottomAxis.setDrawLabels(false);
`
This code not working properly. I gives me following out put.
output
Hide the description with setDescription("") :
barchart.setDescription("");
You need to set legend visible to false, like this: barchart.setLegendVisible(false); - so your code will look something like this:
//rest of your code
....
BarData data = new BarData(labels, dataset);
mChart.setData(data); // set the data and list of lables into chart
BarChart barchart = mChart;
barchart.setLegendVisible(false);
...
//more of your code...
Give it a try and let me know if it helps. You can also look at the selected answer to this closely related question here.
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);