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();
Related
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
So I am looking for a solution still on how to get any text on the left side of the bar chart.
The libary I am using is the MpAndroidChart.
XML:
<com.github.mikephil.charting.charts.HorizontalBarChart
android:id="#+id/barchart"
android:layout_width="match_parent"
android:layout_height="match_parent"></com.github.mikephil.charting.charts.HorizontalBarChart>
Java:
BarDataSet barDataSet = new BarDataSet(data(),null);
barDataSet.setColor(getResources().getColor(bars));
BarData barData = new BarData( barDataSet);
YAxis yAxisRight = barChart.getAxisRight();
yAxisRight.setEnabled(false);
barChart.getLegend().setEnabled(false);
barChart.animateY(1000);
barChart.invalidate();
barChart.getDescription().setEnabled(false);
XAxis xAxis = barChart.getXAxis();
xAxis.setEnabled(false);
barChart.setData(barData);
private ArrayList<BarEntry> data(){
ArrayList<BarEntry> entries = new ArrayList<>();
entries.add(new BarEntry(7,7));
entries.add(new BarEntry(6,6));
entries.add(new BarEntry(5,5));
entries.add(new BarEntry(4,4));
entries.add(new BarEntry(3,3));
entries.add(new BarEntry(2,2));
entries.add(new BarEntry(1,1));
return entries;
}
Right now it looks like this:
but I want on the left of every bar a label or text.
thanks ;)
For anyone wondering the answer is actually pretty simple:
XAxis xAxis = barChart.getXAxis();
//xAxis.setEnabled(false);
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
final String[] week = {"S","S","F","T","W","T","M"};
IndexAxisValueFormatter formatter = new IndexAxisValueFormatter(week);
xAxis.setGranularity(1f);
xAxis.setValueFormatter(formatter);
In the following image I've plotted a day's worth of prices and the trading volume per hour.
To achieve this I'm using a CombinedChart type. You can immediately see that the volume data distracts the user from the price data because both charts fill the screen.
QUESTION:
Is there a way to reserve 25% of the bottom of the chart for volume and 75% of the top of the chart for prices ?
Code is as follows:
private void setupChart(){
chart.setAutoScaleMinMaxEnabled(true);
chart.setBackgroundColor(Color.WHITE);
chart.getDescription().setEnabled(false);
chart.setPinchZoom(false);
chart.setDrawGridBackground(false);
chart.getLegend().setEnabled(true);
chart.setDrawOrder(new CombinedChart.DrawOrder[]{ CombinedChart.DrawOrder.BAR, CombinedChart.DrawOrder.CANDLE });// draw bars behind candles
// right side is for the volume
YAxis rightAxis = chart.getAxisRight();
rightAxis.setDrawGridLines(false);
rightAxis.setAxisMinimum(0f);
}
#Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
chart.resetTracking();
ArrayList<HistoricPrice> historicPrices = presenter.getHistoricalDataGranular(DEFAULT_GRANULARITY_MINS);
ArrayList<CandleEntry> valuesCandles = new ArrayList<>();
ArrayList<BarEntry> valuesBars = new ArrayList<>();
for (int i = progress; (i < progress+MAX_CANDLES_COUNT) && (i < historicPrices.size()); i++) {
HistoricPrice historicPrice = historicPrices.get(i);
CandleEntry candleEntry = new CandleEntry(i, historicPrice.high.floatValue(), historicPrice.low.floatValue(), historicPrice.open.floatValue(), historicPrice.close.floatValue());
valuesCandles.add(candleEntry);
BarEntry barEntry = new BarEntry(i, Float.valueOf(historicPrice.volume.toPlainString()));
valuesBars.add(barEntry);
}
CandleDataSet set1 = new CandleDataSet(valuesCandles, "Prices");
set1.setDrawIcons(false);
set1.setAxisDependency(YAxis.AxisDependency.LEFT);
set1.setShadowColor(Color.DKGRAY);
set1.setShadowWidth(0.7f);
set1.setDecreasingColor(Color.RED);
set1.setDecreasingPaintStyle(Paint.Style.FILL);
set1.setIncreasingColor(Color.rgb(122, 242, 84));
set1.setIncreasingPaintStyle(Paint.Style.FILL);
set1.setNeutralColor(Color.BLUE);
set1.setDrawValues(true);
set1.setShowCandleBar(true);
CandleData candleData = new CandleData(set1);
BarDataSet set2 = new BarDataSet(valuesBars, "Volume");
set2.setColor(ContextCompat.getColor(this, R.color.blue_grey));
set2.setDrawValues(true);
set2.setAxisDependency(YAxis.AxisDependency.RIGHT);
BarData barData = new BarData(set2);
CombinedData data = new CombinedData();
data.setData(candleData);
data.setData(barData);
chart.setData(data);
chart.invalidate();
}
you can set the wether the data set is dependant on leftAxis or rightAxis. So you set set1 dependant on leftAxis and set2 on RightAxis. After doing thing this call set1.getAxisLeft().setAxisMinimum(minValue) from where the graph will start.
have a look at the below snippet
CandleDataSet set1 = new CandleDataSet(valuesCandles, "Prices");
set1.setAxisDependency(YAxis.AxisDependency.LEFT);
set1.getAxisLeft().setAxisMinimum(minValue)
BarDataSet set2 = new BarDataSet(valuesBars, "Volume");
set2.setAxisDependency(YAxis.AxisDependency.RIGHT);
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.
I've been reading through the documentation for MPAndroidChart (using v3.0.1) and I can't seem to find a way to remove the labels on the bars
I would like to hide the values that are shown on top of each bar, OR change the values of them to something I can set manually. Either option would work well for my implementation.
I'm not sure if it is even possible to do either. I'm very new to android development any help would be great.
my code is:
public class MainActivity extends AppCompatActivity {
protected BarChart chart;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
chart = (BarChart) findViewById(R.id.chart1);
Description desc ;
Legend L;
L = chart.getLegend();
desc = chart.getDescription();
desc.setText(""); // this is the weirdest way to clear something!!
L.setEnabled(false);
YAxis leftAxis = chart.getAxisLeft();
YAxis rightAxis = chart.getAxisRight();
XAxis xAxis = chart.getXAxis();
xAxis.setPosition(XAxisPosition.BOTTOM);
xAxis.setTextSize(10f);
xAxis.setDrawAxisLine(true);
xAxis.setDrawGridLines(false);
leftAxis.setTextSize(10f);
leftAxis.setDrawLabels(false);
leftAxis.setDrawAxisLine(true);
leftAxis.setDrawGridLines(false);
rightAxis.setDrawAxisLine(false);
rightAxis.setDrawGridLines(false);
rightAxis.setDrawLabels(false);
BarData data = new BarData( setData());
data.setBarWidth(0.9f); // set custom bar width
chart.setData(data);
chart.setFitBars(true); // make the x-axis fit exactly all bars
chart.invalidate(); // refresh
chart.setScaleEnabled(false);
chart.setDoubleTapToZoomEnabled(false);
chart.setBackgroundColor(Color.rgb(255, 255, 255));
chart.animateXY(2000, 2000);
chart.setDrawBorders(false);
chart.setDescription(desc);
chart.setDrawValueAboveBar(true);
}
private BarDataSet setData() {
ArrayList<BarEntry> entries = new ArrayList<>();
entries.add(new BarEntry(0f, 30f));
entries.add(new BarEntry(1f, 80f));
entries.add(new BarEntry(2f, 60f));
entries.add(new BarEntry(3f, 50f));
entries.add(new BarEntry(4f, 70f));
entries.add(new BarEntry(5f, 60f));
BarDataSet set = new BarDataSet(entries, "");
set.setColor(Color.rgb(155, 155, 155));
set.setValueTextColor(Color.rgb(155,155,155));
return set;
}
}
Has anyone had any experience with this?
Github link for the library is here: https://github.com/PhilJay/MPAndroidChart
Simply create a new class and let it implement the IValueFormatter and return whatever you want to be displayed from the getFormattedValue(...) method like below.
public class MyValueFormatter implements IValueFormatter
{
#Override
public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler)
{
return "";
}
}
BarDataSet set = new BarDataSet(entries, "");
set.setValueFormatter(new MyValueFormatter());
set.setColor(Color.rgb(155, 155, 155));
set.setValueTextColor(Color.rgb(155, 155, 155));
You can find out more here.
For others coming through here looking for solutions, try setDrawValues on the data set instead.
BarDataSet dataSet = new BarDataSet(entries, "");
dataSet.setDrawValues(false);