Develop Reference

MPAndroidChart Combined Chart (Bar & Scatter) with Marker Working only on Scatter Graph points

I m using MPAndroidChart Combined Chart to display a Bar & Scatter chart. On click on points of Scatter Graph i m showing a custom marker which is as below :
public class YourMarkerView extends MarkerView {
private TextView tvContent;
private RelativeLayout mainbackground;
/**
* Constructor. Sets up the MarkerView with a custom layout resource.
*
* #param context
* #param layoutResource the layout resource to use for the MarkerView
*/
public YourMarkerView(Context context, int layoutResource) {
super(context, layoutResource);
tvContent = (TextView) findViewById(R.id.tvContent);
mainbackground = (RelativeLayout) findViewById(R.id.mainbackground);
}
// callbacks everytime the MarkerView is redrawn, can be used to update the
// content (user-interface)
#Override
public void refreshContent(Entry e, Highlight highlight) {
if(e!=null && e.getData()!=null){
Log.d("Yoyo",e.getData().toString());
mainbackground.setBackgroundColor(Color.parseColor(e.getData().toString().split(";")[1]));
tvContent.setText("" + e.getData().toString().split(";")[0]);
// this will perform necessary layouting
super.refreshContent(e, highlight);
}
}
private MPPointF mOffset;
#Override
public MPPointF getOffset() {
if(mOffset == null) {
// center the marker horizontally and vertically
mOffset = new MPPointF(-(getWidth() / 2), -getHeight());
}
return mOffset;
}
}
Below is code for Chart:
chart.getDescription().setEnabled(false);
chart.setBackgroundColor(Color.parseColor("#f9f9f9"));
chart.setDrawGridBackground(false);
chart.setDrawBarShadow(false);
chart.setHighlightFullBarEnabled(false);
// draw bars behind lines
chart.setDrawOrder(new CombinedChart.DrawOrder[]{
CombinedChart.DrawOrder.BAR, CombinedChart.DrawOrder.SCATTER
});
chart.getAxisRight().setEnabled(false);
chart.getAxisLeft().setEnabled(false);
chart.getXAxis().setEnabled(false);
Legend legend = chart.getLegend();
legend.setEnabled(false);
YourMarkerView mv = new YourMarkerView(myActivity, R.layout.custom_marker_view);
// Set the marker to the chart
mv.setChartView(chart);
chart.setMarker(mv);
chart.setDragEnabled(false);
chart.setScaleEnabled(false);
// force pinch zoom along both axis
chart.setPinchZoom(false);
// enable touch gestures
chart.setTouchEnabled(true);
CombinedData data = new CombinedData();
data.setData(generateBarData());
data.setData(generateScatterData());
chart.setData(data);
chart.invalidate();
private BarData generateBarData() {
ArrayList<BarEntry> entries1 = new ArrayList<>();
ArrayList<BarEntry> entries2 = new ArrayList<>();
for (int index = 0; index < count; index++) {
entries1.add(new BarEntry(0, getRandom(25, 25)));
// stacked
entries2.add(new BarEntry(0, new float[]{getRandom(13, 12), getRandom(13, 12)}));
}
BarDataSet set1 = new BarDataSet(entries1, "Bar 1");
set1.setColor(Color.rgb(60, 220, 78));
set1.setValueTextColor(Color.rgb(60, 220, 78));
set1.setValueTextSize(10f);
set1.setAxisDependency(YAxis.AxisDependency.LEFT);
BarDataSet set2 = new BarDataSet(entries2, "");
set2.setStackLabels(new String[]{"Stack 1", "Stack 2"});
set2.setColors(Color.rgb(61, 165, 255), Color.rgb(23, 197, 255));
set2.setValueTextColor(Color.rgb(61, 165, 255));
set2.setValueTextSize(10f);
set2.setAxisDependency(YAxis.AxisDependency.LEFT);
float groupSpace = 0.06f;
float barSpace = 0.02f; // x2 dataset
float barWidth = 0.45f; // x2 dataset
// (0.45 + 0.02) * 2 + 0.06 = 1.00 -> interval per "group"
BarData d = new BarData(set1, set2);
d.setBarWidth(barWidth);
// make this BarData object grouped
d.groupBars(0, groupSpace, barSpace); // start at x = 0
return d;
}
private ScatterData generateScatterData() {
ScatterData d = new ScatterData();
ArrayList<Integer> colors = new ArrayList<Integer>();
for (String color : details.getSequenceColors()) {
colors.add(Color.parseColor(color));
}
ArrayList<Entry> entries = new ArrayList<>();
for (float index = 0; index < count; index += 0.5f)
entries.add(new Entry(index + 0.25f, getRandom(10, 55),"title;"+colors.get(index)));
ScatterDataSet set = new ScatterDataSet(entries, "Scatter DataSet");
set.setDrawHorizontalHighlightIndicator(false);
set.setDrawVerticalHighlightIndicator(false);
set.setColors(colors);
set.setScatterShape(ScatterChart.ScatterShape.CIRCLE);
set.setScatterShapeSize(20f);
set.setDrawValues(false);
set.setValueTextSize(10f);
d.addDataSet(set);
return d;
}
details.getSequenceColors is simple pojo contains the list of colors. For each point on Scatter Graph i am setting different colors. I am setting ScatterShape.CIRCLE color and Marker Background color same on Scatter Graph. As per Draw order I am drawing the bar graph first then the scatter one. Issue here i am facing is When i click on area where no scatter points exist the marker background color and nearest scatter point color is different and it highlights Bar graph datapoint as well. Its doesnt show the exact marker on Scatter points not sure why. How can i make sure that the scatter Circle color and marker Background color will be always in sync for each data points?

Solved by Using Custom ScatterDataSet Class:
public class MyScatterDataSet extends ScatterDataSet {
static int currentIndex = 0;
public MyScatterDataSet(List<Entry> yVals, String label) {
super(yVals, label);
}
#Override
public int getColor(int index) {
int ret =super.getColor(currentIndex);
currentIndex+=1;
return ret;
}
}

MPAndroidChart-BarChart,the following is detailed description

mpandroidchart for my project,I want to the result just like the below image.I meet some question have long time. The first I want show the data is 11.23% ,but the project show 11.2% for me ,I can't find any way to change it ,please help me .The second I want to the legend is like the below image,but the legent of mpandroidchart-barchar no have description, how can I do? The third question is that I want to change y axis like the below image, I don't know if it realize?
![I want image]: http://i.stack.imgur.com/tuXhb.png
![My image now]: http://i.stack.imgur.com/NG9FB.png
public class BarChartActivity extends Activity {
private BarChart barChart;
private BarData data;
private BarDataSet dataSet;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_bar_chart);
barChart = (BarChart) findViewById(R.id.barchart);
barChart.getAxisRight().setEnabled(false); // 隐藏右边的y轴
barChart.getXAxis().setPosition(XAxisPosition.BOTTOM);
barChart.setGridBackgroundColor(Color.WHITE); // 设置背景色
barChart.getXAxis().setDrawGridLines(false); // 隐藏网格竖线
YAxis yAxis = barChart.getAxisLeft(); // 得到y轴坐标
yAxis.setStartAtZero(false); // y轴是否从0开始
yAxis.mAxisMinimum = -20f;
yAxis.setLabelCount(10); // x轴横线的条数
yAxis.setAxisMinValue(-100f); // 设置最小值
yAxis.setAxisMaxValue(99f);
// yAxis.setSpaceTop(100);
// yAxis.setSpaceBottom(-100);
// barChart.setVisibleYRange(50f,null);
// barChart.getXAxis().enableGridDashedLine(400, 50, 0);
// barChart.getAxisLeft().resetAxisMaxValue(); //自动调整y轴的最大值
// legend.setLabels(new String[]{"你好","我好","大家好"});
barChart.getLegendRenderer();
barChart.getXAxis().setAxisLineColor(Color.BLUE); // 设置x轴线的颜色
barChart.getAxisLeft().setAxisLineColor(Color.GREEN); // 设置y轴线的颜色
barChart.getAxisLeft().setGridColor(Color.RED); // x轴线的颜色
barChart.getAxisLeft().setGridLineWidth(1f); // x轴网格线的宽度
barChart.getAxisLeft().setSpaceTop(150f);
barChart.getAxisLeft().setTextColor(Color.RED);// y坐标轴的上的刻度文字的颜色
// List<String> list = new ArrayList<String>();
// list.add("你好");
// list.add("你好1");
// list.add("你好2");
// barChart.getLegend().setLabels(list);
Legend legend = barChart.getLegend();
legend.setXEntrySpace(5f);
legend.setYEntrySpace(20f);
barChart.getXAxis().setSpaceBetweenLabels(5);
barChart.getXAxis().setYOffset(2f);
barChart.getAxisLeft().setValueFormatter(new PercentFormatter());
ArrayList<BarEntry> entries = new ArrayList<BarEntry>();// 显示的条目
ArrayList<String> xVals = new ArrayList<String>(); // 横坐标标签
float[] yValues = getYValues(90.23f, -2.84f, 9.21f);
for (int i = 0; i < 3; i++) {
entries.add(new BarEntry(yValues[i], i));
xVals.add(""); // 可以从这里取消x轴的坐标
}
int[] colors = new int[] { Color.rgb(90, 147, 229),
Color.rgb(247, 183, 48), Color.rgb(245, 70, 70) };
dataSet = new BarDataSet(entries, ""); // 原来是公司你利润报表
dataSet.setColors(colors);
dataSet.setBarSpacePercent(70f); // 设置柱子的宽度
dataSet.setValueFormatter(new PercentFormatter()); // 设置柱子上的数字百分数显示
dataSet.setValueTextColor(Color.BLUE); // 柱子上数字的颜色
data = new BarData(xVals, dataSet);
barChart.setData(data);
barChart.animateY(3000);
barChart.setDescription("");// 公司前半年财务报表(单位：万元)
barChart.getLegend().setPosition(LegendPosition.BELOW_CHART_CENTER); // 设置图例在正下方
barChart.getLegend().setStackSpace(50f); // 设置图例之间的距离
dataSet.setValueTextSize(28); // 设置柱子上数字的大小
}
public float[] getYValues(float x, float y, float z) {
return new float[] { x, y, z };
}
}

For number format you set ValueFormatter.
You can set Legend property like Style color, font etc using Legend.
To change Y axis negative use setStartAtZero(false);

Android : MPAndroidChart how to remove values on right side in chart?

I have the following chart which is displaying some values.
I would like to hide/ remove values on the right side, because on the left side are enough.
See image below:
And code is following:
public class MainActivity extends AppCompatActivity implements
OnChartValueSelectedListener{
private LineChart mDataLineChart;
private RelativeLayout mRelativeLayout;
private LineChart mChart;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.activity_linechart);
// Set chart
setChart();
// add data
setData2(3, 155);
// ANIMATE CHART
animateChart();
}
private void setChart() {
mChart = (LineChart) findViewById(R.id.chart1);
mChart.setOnChartValueSelectedListener(this);
////////////////////////////////
// SET DESCRIPTION COLOR
////////////////////////////////
mChart.setDescriptionColor(getResources().getColor(R.color.chart_desc_color));
////////////////////////////////
// BORDERS SURROUNDING THE CHART
////////////////////////////////
mChart.setDrawBorders(true);
mChart.setBorderColor(getResources().getColor(R.color.chart_border));
mChart.setBorderWidth(2);
////////////////////////////////
// CHART BG COLOR
////////////////////////////////
mChart.setBackgroundColor(getResources().getColor(R.color.chart_bg));
////////////////////////////////
// GRID BG COLOR
////////////////////////////////
mChart.setDrawGridBackground(true);
mChart.setGridBackgroundColor(getResources().getColor(R.color.chart_bg));
////////////////////////////////
// OTHER SETTINGS
////////////////////////////////
mChart.setDescription("");
mChart.setNoDataTextDescription("You need to provide data for the chart.");
// enable touch gestures
mChart.setTouchEnabled(true);
mChart.setDragDecelerationFrictionCoef(0.9f);
// enable scaling and dragging
mChart.setDragEnabled(true);
mChart.setScaleEnabled(true);
mChart.setHighlightPerDragEnabled(true);
// if disabled, scaling can be done on x- and y-axis separately
mChart.setPinchZoom(true);
}
private void setData2(int count, float range) {
////////////////////////////////
// X axis values (labels)
////////////////////////////////
ArrayList<String> xVals = new ArrayList<String>();
for (int i = 0; i < count; i++) {
xVals.add((i) + " day");
}
////////////////////////////////
// Y axis values (value in linechart)
////////////////////////////////
ArrayList<Entry> yVals1 = new ArrayList<Entry>();
for (int i = 0; i < count; i++) {
float mult = range / 2f;
float val = (float) (Math.random() * mult) + 50;// + (float)
// ((mult *
// 0.1) / 10);
yVals1.add(new Entry(val, i));
}
////////////////////////////////
// SETTING FOR LINEAR LINE
////////////////////////////////
LineDataSet set1 = new LineDataSet(yVals1, "Pressure mm/Hg");
set1.setAxisDependency(AxisDependency.LEFT);
set1.setLineWidth(2f);
set1.setCircleSize(5f);
set1.setColor(getResources().getColor(R.color.chart_line_color));
set1.setCircleColor(getResources().getColor(R.color.chart_line_color));
set1.setFillColor(getResources().getColor(R.color.chart_line_color));
set1.setDrawCircleHole(true);
ArrayList<LineDataSet> dataSets = new ArrayList<LineDataSet>();
dataSets.add(set1); // add the datasets
////////////////////////////////
// SETTING FOR DATASET (FONT SIZE, )
////////////////////////////////
LineData data = new LineData(xVals, dataSets);
data.setValueTextColor(Color.BLACK);
data.setValueTextSize(9f);
////////////////////////////////
// SET WHOLE DATASET TO CHART
////////////////////////////////
mChart.setData(data);
}
private void animateChart() {
////////////////////////////////
// ANIMATION DURATION
////////////////////////////////
mChart.animateX(1000);
////////////////////////////////
// SET LEGEND BOTTOM DATA TEXT
////////////////////////////////
XAxis xAxis = mChart.getXAxis();
xAxis.setTextSize(12f);
xAxis.setTextColor(Color.BLACK);
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
xAxis.setSpaceBetweenLabels(1);
}
#Override
public void onValueSelected(Entry e, int dataSetIndex, Highlight h) {
Log.i("Entry selected", e.toString());
}
#Override
public void onNothingSelected() {
Log.i("Nothing selected", "Nothing selected.");
}
}
I tried to search in documentation on Github:
https://github.com/PhilJay/MPAndroidChart/wiki/The-Axis
But without luck.
How can i remove values from right please?
Many thanks for any advice.

YAxis yAxisRight = mChart.getAxisRight();
yAxisRight.setEnabled(false);
put this code on your setChart();

You may want to check example application and corresponding codes. The application includes 2 related examples: Line Chart and Line Chart (Dual YAxis). The first is what you want and the latter is what you have right know.
App link: https://play.google.com/store/apps/details?id=com.xxmassdeveloper.mpchartexample
Code: https://github.com/PhilJay/MPAndroidChart/tree/master/MPChartExample

mpandroid chart certain methods unable to resolve

So I'm using the awesome MPAndroid Chart library to make a simple LineChart. I was able to customize it heavily using the example project on GitHub.
The problem is, when I move it to my own code, certain methods are no longer able to be resolved:
mLineChart.setExtraOffsets() and mLineChart.setAutoScaleMinMaxEnabled() in particular. There might be others but these are the only two I've noticed.
Everything else works fine though. Any idea why I can't access these two methods? What should I dig into to find out more about why this is the case?
public class MyFragment extends Fragment {
private LineChart mLineChart;
// stuff here
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// stuff here
// Creating numbers line chart for candidate
LineChart numChart = (LineChart)view.findViewById(R.id.numbersLineChart);
setNumChart(numChart, mObject.getNums());
// stuff here
}
public void setNumChart(LineChart lineChart, List<Integer> nums){
mLineChart = lineChart;
mLineChart.setDrawGridBackground(false);
// no description text
mLineChart.setDescription("");
mLineChart.setNoDataTextDescription("You need to provide data for the chart.");
// enable value highlighting
mLineChart.setHighlightEnabled(true);
// enable touch gestures
mLineChart.setTouchEnabled(true);
// enable scaling and dragging
mLineChart.setDragEnabled(false);
mLineChart.setScaleEnabled(false);
// if disabled, scaling can be done on x- and y-axis separately
mLineChart.setPinchZoom(false);
// create a custom MarkerView (extend MarkerView and specify the layout to use for it)
MyMarkerViewv2 mv = new MyMarkerViewv2(getActivity(), R.layout.custom_marker_view, mLineChart);
// set the marker to the chart
mLineChart.setMarkerView(mv);
// disable all axes lines and labels
YAxis leftAxis = mLineChart.getAxisLeft();
leftAxis.setEnabled(false);
mLineChart.getAxisRight().setEnabled(false);
XAxis bottomAxis = mLineChart.getXAxis();
bottomAxis.setEnabled(false);
// add data
setLineChartData(nums);
//THIS METHOD CANNOT BE RESOLVED********************
mLineChart.setExtraOffsets(30f,50f,30f,0f);
// get the legend (only possible after setting data)
Legend l = mLineChart.getLegend();
l.setEnabled(false);
mLineChart.invalidate();
}
public void setLineChartData(List<Integer> nums){
//create xVariables aka strings of the months
ArrayList<String> xVals = new ArrayList<String>();
for (int i = 0; i < nums.size(); i++) {
xVals.add(Month.getMonthfromIndex(i).getAbbrev());
}
//add corresponding numbers
ArrayList<Entry> yVals = new ArrayList<Entry>();
for (int i = 0; i < nums.size(); i++) {
yVals.add(new Entry(nums.get(i), i));
}
// create a dataset and give it a type
LineDataSet set1 = new LineDataSet(yVals, "DataSet");
set1.setColor(Color.BLACK);
set1.setCircleColor(Color.BLACK);
set1.setLineWidth(0.75f);
set1.setDrawCircles(true);
set1.setDrawValues(false);
set1.setCircleSize(1.75f);
set1.setDrawCircleHole(false);
ArrayList<LineDataSet> dataSets = new ArrayList<LineDataSet>();
dataSets.add(set1); // add the datasets
// create a data object with the datasets
LineData data = new LineData(xVals, dataSets);
// set data
mLineChart.setData(data);
}
// stuff here
class MyMarkerViewv2 extends MarkerView {
private TextView markerContent;
private LineChart mChart;
public MyMarkerViewv2(Context context, int layoutResource, LineChart lChart) {
super(context, layoutResource);
mChart = lChart;
markerContent = (TextView) findViewById(R.id.markerContent);
}
// callbacks everytime the MarkerView is redrawn, can be used to update the
// content (user-interface)
#Override
public void refreshContent(Entry e, int dataSetIndex) {
if (e instanceof CandleEntry) {
CandleEntry ce = (CandleEntry) e;
List<String> months = mChart.getLineData().getXVals();
markerContent.setText(months.get(e.getXIndex() % 12) + "\n" + Utils.formatNumber(ce.getHigh(), 0, true) + "%");
} else {
List<String> months = mChart.getLineData().getXVals();
markerContent.setText(months.get(e.getXIndex() % 12) + "\n" + Utils.formatNumber(e.getVal(), 0, true) + "%");
}
}
#Override
public int getXOffset() {
// this will center the marker-view horizontally
return -(getWidth() / 2);
}
#Override
public int getYOffset() {
// this will cause the marker-view to be above the selected value
return -getHeight();
}
}
I also have the LineChart wrapped inside a vertical LinearLayout with other elements and that whole thing wrapped inside a ScrollView. Not sure if that's what's causing the problem or not.

Nevermind, I figured it out. It's because the library downloaded by Maven and Gradle is not exactly the same as the one included in the example project on the website.

MPAndroidChart - CustomValueFormatter renders values out of the Viewport

I've been working with HorizontalBarChart MPAndroidChart a few days ago, and ran into an issue while trying to use a custom ValueFormatter which converts the time from milliseconds into 12h format time. (08:50 AM) But as you can see in the picture below, the value gets clipped...
Is there any possibility to set a padding for the chart on the right for the values to be visible?
Here's the code which configures the chart:
private void initializeChart() {
// Customize user interaction on chart
mHorizontalBarChart.setTouchEnabled(false);
mHorizontalBarChart.setPinchZoom(false);
mHorizontalBarChart.setDragEnabled(false);
// Customize chart's standard settings
mHorizontalBarChart.setDrawGridBackground(false);
mHorizontalBarChart.setDescription("");
mHorizontalBarChart.setHighlightEnabled(false);
mHorizontalBarChart.getLegend().setEnabled(false);
Paint infoPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
infoPaint.setTextAlign(Paint.Align.CENTER);
infoPaint.setTextSize(12f);
mHorizontalBarChart.setPaint(infoPaint, Chart.PAINT_INFO);
// Customize X axis
XAxis xAxis = mHorizontalBarChart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
xAxis.setTextSize(12f);
xAxis.setDrawLabels(true);
xAxis.setDrawAxisLine(false);
xAxis.setDrawGridLines(false);
xAxis.setAvoidFirstLastClipping(true);
// Customize Y axis's
// Left
YAxis leftAxis = mHorizontalBarChart.getAxisLeft();
leftAxis.setDrawLabels(false);
leftAxis.setDrawAxisLine(false);
leftAxis.setDrawGridLines(false);
leftAxis.setDrawTopYLabelEntry(false);
// Right
YAxis rightAxis = mHorizontalBarChart.getAxisRight();
rightAxis.setDrawLabels(false);
rightAxis.setDrawAxisLine(false);
rightAxis.setDrawGridLines(false);
rightAxis.setDrawTopYLabelEntry(false);
}
And here's the code which populates it:
private void setChartData(float range) {
String[] daysOfWeek = new String[]{"MO", "TU", "WE", "TH", "FR", "SA", "SU"};
ArrayList<String> xVals = new ArrayList<String>();
for (int i = 0; i < daysOfWeek.length; i++) {
xVals.add(daysOfWeek[i]);
}
ArrayList<BarEntry> yVals1 = new ArrayList<BarEntry>();
for (int i = 0; i < daysOfWeek.length; i++) {
float mult = (range + 1);
float val = (float) (Math.random() * mult);
yVals1.add(new BarEntry(val, i));
}
BarDataSet set1 = new BarDataSet(yVals1, "DataSet");
set1.setBarSpacePercent(35f);
ArrayList<BarDataSet> dataSets = new ArrayList<BarDataSet>();
dataSets.add(set1);
BarData data = new BarData(xVals, dataSets);
data.setValueTextSize(10f);
data.setValueFormatter(new ValueFormatter() {
#Override
public String getFormattedValue(float value) {
return value + "some extra text";
}
});
mHorizontalBarChart.setData(data);
}
Any help is greatly appreciated.
Code is used from the examples provided by #Philipp Jahoda.
EDIT: BASED ON Philipp's answer:
I used setSpaceTop(float percent) to adjust the space for the values of the BarData.
// Customize Y axis's
// Left
YAxis leftAxis = mHorizontalBarChart.getAxisLeft();
leftAxis.setDrawLabels(false);
leftAxis.setDrawAxisLine(false);
leftAxis.setDrawGridLines(false);
leftAxis.setDrawTopYLabelEntry(false);
leftAxis.setSpaceTop(20); // use these to adjust space for the BarData values
// Right
YAxis rightAxis = mHorizontalBarChart.getAxisRight();
rightAxis.setDrawLabels(false);
rightAxis.setDrawAxisLine(false);
rightAxis.setDrawGridLines(false);
rightAxis.setDrawTopYLabelEntry(false);
rightAxis.setSpaceTop(20); // use these to adjust space for the BarData values
Code must be optimized though, this is just a quick test, but these suggestions worth tried out. Thanks again Philipp!

Read the documentation of the YAxis.
Focus on the following methods:
setAxisMaxValue(...) & setAxisMinValue(...)
setSpaceTop(...)
setSpaceBottom(...)
With them you can set the range / space of your axis.