Chart Image
i am using line chart in android its working fine with using MPChart library. i am getting only one issue is that margin of x axis labels. i want to add some margin from left in x Axis labels (Show in attached image by arrow). I tried many things but not getting any solution.
xAxis.setSpaceMax(20);
xAxis.setSpaceMin(20);
i also try this space min and max but not getting any effect using this. How can i achieve this?
my compelete code
ChartActivity extends Activity {
private LineChart lineChart;
#Override
protected void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_realm_wiki);
lineChart = (LineChart) findViewById(R.id.lineChart);
setup(lineChart);
// creating list of entry
ArrayList<Entry> entries = new ArrayList<>();
entries.add(new Entry(2015, 50));
entries.add(new Entry(2016, 70));
entries.add(new Entry(2017, 75));
entries.add(new Entry(2018, 80));
entries.add(new Entry(2019, 90));
ArrayList<LineDataSet> lines = new ArrayList<LineDataSet>();
LineDataSet lDataSet1 = new LineDataSet(entries, "DataSet1");
lDataSet1.setColor(Color.BLACK);
lDataSet1.setCircleColor(Color.BLACK);
lines.add(lDataSet1);
lineChart.getXAxis().setXOffset(1000);
lineChart.setData(new LineData(lDataSet1));
}
protected void setup(Chart<?> chart) {
Typeface mTf = Typeface.createFromAsset(getAssets(), "OpenSans-Regular.ttf");
// no description text
chart.getDescription().setEnabled(false);
// enable touch gestures
chart.setTouchEnabled(true);
LineChart lineChart = (LineChart) chart;
lineChart.setPinchZoom(false);
lineChart.setOnTouchListener(null);
if (chart instanceof BarLineChartBase) {
BarLineChartBase mChart = (BarLineChartBase) chart;
mChart.setDrawGridBackground(false);
// enable scaling and dragging
mChart.setDragEnabled(true);
mChart.setScaleEnabled(true);
// if disabled, scaling can be done on x- and y-axis separately
mChart.setPinchZoom(false);
mChart.setDoubleTapToZoomEnabled(false);
YAxis leftAxis = mChart.getAxisLeft();
leftAxis.removeAllLimitLines(); // reset all limit lines to avoid overlapping lines
leftAxis.setTypeface(mTf);
leftAxis.setTextSize(8f);
leftAxis.setTextColor(Color.DKGRAY);
leftAxis.setValueFormatter(new PercentFormatter());
leftAxis.setLabelCount(8);
leftAxis.setAxisMinValue(50);
leftAxis.setAxisMaxValue(120);
leftAxis.setGranularity(1f);
leftAxis.setSpaceBottom(5);
leftAxis.setSpaceTop(5);
leftAxis.setDrawGridLines(false);
XAxis xAxis = mChart.getXAxis();
xAxis.setTypeface(mTf);
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
xAxis.setTextSize(8f);
xAxis.setTextColor(Color.DKGRAY);
xAxis.setDrawGridLines(false);
xAxis.setLabelCount(4, true);
xAxis.setAxisMinValue(2015);
xAxis.setAxisMaxValue(2018);
mChart.getAxisRight().setEnabled(false);
}
}
protected void styleData(ChartData data) {
data.setValueTextSize(8f);
data.setValueTextColor(Color.DKGRAY);
data.setValueFormatter(new PercentFormatter());
}
Related
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'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);
In my android application i have a horizontal bar chart using MPAndroidChart.My problem is there are 12 number of bars in my bar chart each represents month from April to March,but i can see only alternate months label in x-axis.If there are small number of bars then i can see all the labels in x-axis.I didn't set any label count for x-axis using
xAxix.setLabelCount()
method.Then why i can't see all the labels? If I zoomed then i can see labels for each bar.I am using MPAndroidChart v3.0.1.Attached is the screenshot of the above.See here I can see only 'Apr,Jun,Aug,Oct,Dec,Feb' and all the other months are not displayed.How can I see all the other months also.
Below is my code.
yVals1 = new ArrayList<BarEntry>();
xVals = new ArrayList<String>();
for (int i = 0; i < listChart.size(); i++){
BarEntry newBEntry = new BarEntry(i,listChart.get(i).getAmount());
xVals.add(listChart.get(i).getAltName());
yVals1.add(newBEntry);
}
BarDataSet set1;
set1 = new BarDataSet(yVals1, "");
set1.setColors(new int[] {Color.BLUE,Color.GREEN});
ArrayList<IBarDataSet> dataSets = new ArrayList<IBarDataSet>();
dataSets.add(set1);
BarData data = new BarData(dataSets);
data.setValueTextSize(10f);
barChartIncExp.setData(data);
barChartIncExp.setDrawBarShadow(false);
barChartIncExp.setDrawValueAboveBar(true);
barChartIncExp.getDescription().setEnabled(false);
barChartIncExp.setMaxVisibleValueCount(60);
// scaling can now only be done on x- and y-axis separately
barChartIncExp.setPinchZoom(true);
barChartIncExp.setDrawGridBackground(false);
barChartIncExp.setHighlightFullBarEnabled(false);
barChartIncExp.setHighlightPerDragEnabled(false);
XAxis xAxis = barChartIncExp.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
xAxis.setDrawGridLines(false);
xAxis.setGranularity(1f);
xAxis.setValueFormatter(new IAxisValueFormatter() {
#Override
public String getFormattedValue(float value, AxisBase axis) {
if(Math.round(value) >= xVals.size()) {
return null;
} else {
return xVals.get(Math.round(value));
}
}
});
YAxis leftAxis = barChartIncExp.getAxisLeft();
leftAxis.setDrawGridLines(false);
leftAxis.setLabelCount(8, false);
leftAxis.setSpaceTop(15f);
leftAxis.setDrawLabels(false);
YAxis rightAxis = barChartIncExp.getAxisRight();
rightAxis.setLabelCount(8, false);
rightAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);
Legend l = barChartIncExp.getLegend();
l.setEnabled(false);
barChartIncExp.setOnChartValueSelectedListener(new OnChartValueSelectedListener() {
#Override
public void onValueSelected(Entry entry, Highlight highlight) {
}
#Override
public void onNothingSelected() {
}
});
You can change the number of labels you want to show in the y-axis.
XAxis xAxis=lineChart.getXAxis();
xAxis.setLabelCount(4,true); //4 is the number of values to be shown.
Try This
// where 12 is the number of bars in your chart.
xAxis.setLabelCount(12)
XAxis xAxis = mChart.getXAxis();
xAxis.setLabelCount(label.size()+1, true);
Set the label count to the size of the label + 1 in the xAxis.setLabelCount function.
It worked for me!
XAxis xAxis=lineChart.getXAxis();
xAxis.setLabelCount(4,true);
xAxis.setGranularity(1f);
Similar to MPAndroidChart - First and last bars not rendering correctly, the first and last bubble in my chart isn't rendered fully, and is sliced in half as seen in the image.
The following is the current implementation for the BubbleChart.
private void initializeBubbleChart() {
mChart = (BubbleChart) findViewById(R.id.bubblechart);
mChart .setDescription("");
mChart .setOnChartValueSelectedListener(this);
mChart .setDrawGridBackground(false);
mChart .setTouchEnabled(true);
mChart .setDragEnabled(true);
mChart .setScaleEnabled(true);
AxisValueFormatter xAxisFormatter = new DayAxisValueFormatter(mChart);
XAxis xAxis = mChart .getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
xAxis.setTypeface(typeFace);
xAxis.setDrawGridLines(false);
xAxis.setGranularity(1f); // only intervals of 1 day
xAxis.setValueFormatter(xAxisFormatter);
AxisValueFormatter yAxis = new YAxisValueFormatter("duration");
YAxis leftAxis = mChart .getAxisLeft();
leftAxis.setTypeface(typeFace);
leftAxis.setSpaceTop(30f);
leftAxis.setSpaceBottom(30f);
leftAxis.setDrawGridLines(false);
leftAxis.setValueFormatter(yAxis);
leftAxis.setDrawZeroLine(false);
YAxis rightAxis = mChart .getAxisRight();
rightAxis.setTypeface(typeFace);
rightAxis.setSpaceTop(30f);
rightAxis.setSpaceBottom(30f);
rightAxis.setDrawGridLines(false);
rightAxis.setValueFormatter(yAxis);
rightAxis.setDrawZeroLine(false);
populateData();
}
#Philipp Jahoda
Use setAxisMinValue() and setAxisMaxValue() to customize the axis range:
xAxis.setAxisMinValue(valueBelowActualMinimum);
xAxis.setAxisMaxValue(valueAboveActualMaximum);
and modify the DayAxisValueFormatter to show or suppress labels for the edge values.
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);