I am using MPAndroidChart. I have an array of 5: float[] sizes that will dynamically get values ranged 0-1.
I need to draw 0-5 bubbles (won't draw if size <0.5) with a different color each. Since we can specify color only at Dataset-level not entry-level, I have to use single-entry data sets.
Below is my code. The issue is, they are all of size 1, disregarding the size they got on the fly (0.9f, 0.8f, 0.7f...).
How to solve this problem?
private void initChart(){
mChart = (BubbleChart) findViewById(R.id.chart);
//mChart.setDescription("");
mChart.setDrawGridBackground(false);
mChart.setTouchEnabled(true);
mChart.setDragEnabled(true);
mChart.setScaleEnabled(true);
mChart.setMaxVisibleValueCount(5);
mChart.setPinchZoom(true);
mChart.getXAxis().setEnabled(false);
mChart.getAxisLeft().setEnabled(false);
mChart.getAxisRight().setEnabled(false);
mChart.setDescription("");
mChart.getXAxis().setAxisMinValue(-0.5f);
mChart.getXAxis().setAxisMaxValue(5.5f);
}
private void updateChart(){
ArrayList<IBubbleDataSet> dataSets = new ArrayList<IBubbleDataSet>();
for(int i = 0, pos = 0; i < 5; ++i) {
if(sizes[i] < 0.5f)
continue;
BubbleEntry entry = new BubbleEntry(pos++, 0, sizes[i]); //!!These sizes e.g. 0.9f, 0.7f ... are disregarded
ArrayList<BubbleEntry> vals = new ArrayList<>();
vals.add(entry);
BubbleDataSet set = new BubbleDataSet(vals, "");
set.setColor(ColorTemplate.COLORFUL_COLORS[i], 130);
set.setDrawValues(false);
dataSets.add(set);
}
BubbleData data = new BubbleData(dataSets);
data.setDrawValues(false);
data.setHighlightCircleWidth(1.5f);
mChart.setData(data);
mChart.invalidate();
}
Solved. Add below line after new BubbleDataSet:
set.setNormalizeSizeEnabled(false);
Related
I'm using MPAndroidchart pie chart and used my own colors for charts. Now the problem is the pie chart is blurred. Its edges are in blur. I want to remove the blur and make it sharp edges.How to do it?
I don't have 10 reputations to post image.
https://drive.google.com/open?id=1umms-1LZj0XuuKuDpOWZqcpRCOn6rh-X
Here is the code for chart displaying.
private void showChart(BudgetResponse.Budgets[] items) {
chart.setVisibility(View.VISIBLE);
chart.setUsePercentValues(true);
chart.getDescription().setEnabled(false);
chart.setExtraOffsets(5, 10, 5, 5);
chart.setDragDecelerationFrictionCoef(0.95f);
//chart.setCenterTextTypeface(tfLight);
//chart.setCenterText(generateCenterSpannableText());
chart.setDrawHoleEnabled(true);
chart.setHoleColor(Color.TRANSPARENT);
chart.setTransparentCircleColor(Color.WHITE);
chart.setTransparentCircleAlpha(110);
chart.setHoleRadius(58f);
chart.setTransparentCircleRadius(61f);
chart.setDrawCenterText(true);
SimpleSpanBuilder sb=new SimpleSpanBuilder();
sb.append("Total budget",new RelativeSizeSpan(1.0f));
float budget=0;
try{
for (int i=0;i<items.length;i++){
budget+=Float.parseFloat(items[i].getCurrentAmount());
}
}catch (Exception e){
e.printStackTrace();
}
sb.append("\n"+budget,new RelativeSizeSpan(2.0f),
new ForegroundColorSpan(activity.getResources().getColor(R.color.colorPrimary)));
chart.setCenterText(sb.build());
chart.setCenterTextColor(activity.getResources().getColor(R.color.titleColor));
chart.setCenterTextSizePixels(12f);
chart.setRotationAngle(0);
// enable rotation of the chart by touch
chart.setRotationEnabled(false);
chart.setHighlightPerTapEnabled(true);
chart.animateY(1400, Easing.EaseInOutQuad);
chart.getLegend().setEnabled(false);
ArrayList<PieEntry> entries = new ArrayList<>();
ArrayList<Integer> pieColors=new ArrayList<>();
for (BudgetResponse.Budgets budgets:items){
entries.add(new PieEntry(Float.parseFloat(budgets.getCurrentAmount()), budgets.getCategoryGroupName()));
if(budgets.getCategoryGroupName().contains("Bills")){
pieColors.add(getAppColor(R.color.lightViolet));
}else if(budgets.getCategoryGroupName().contains("Entertainment")){
pieColors.add(getAppColor(R.color.lightPink));
}else if(budgets.getCategoryGroupName().contains("Food")){
pieColors.add(getAppColor(R.color.lightBlue));
}else if(budgets.getCategoryGroupName().contains("Auto")){
pieColors.add(getAppColor(R.color.darkViolet));
}else if(budgets.getCategoryGroupName().contains("Shopping")){
pieColors.add(getAppColor(R.color.lightOrangeVariant));
}else if(budgets.getCategoryGroupName().contains("Transfers")){
pieColors.add(getAppColor(R.color.lightGreenVariant));
}
}
// add a lot of colors
ArrayList<Integer> colors = new ArrayList<>(pieColors);
PieDataSet dataSet = new PieDataSet(entries, "Budget Spends");
dataSet.setDrawIcons(false);
dataSet.setSliceSpace(3f);
dataSet.setIconsOffset(new MPPointF(0, 40));
dataSet.setSelectionShift(1f);
colors.add(ColorTemplate.getHoloBlue());
dataSet.setColors(colors);
//dataSet.setSelectionShift(0f);
PieData data = new PieData(dataSet);
data.setValueFormatter(new PercentFormatter(chart));
data.setValueTextSize(11f);
data.setValueTextColor(Color.TRANSPARENT);
//data.setValueTypeface(tfLight);
chart.setData(data);
//to remove labels over pie chart
chart.setDrawEntryLabels(false);
//to remove percentage over pie chart
chart.setUsePercentValues(false);
//chart.setDrawCenterText(false);
// undo all highlights
chart.highlightValues(null);
MyMarkerView mv = new MyMarkerView(activity, R.layout.custom_marker_view);
mv.setChartView(chart); // For bounds control
chart.setMarker(mv); //
chart.invalidate();
}
I want to remove blurriness around chart.
In activity the donut chat looks great. But in viewpager it looks blur.
I am using Pie Chart in my application, Right now Pie Chart is displaying properly ,only issue is getting space at bottom of Pie Chart. Following is code of Pie Chart and output what I want and What I am trying to get.
Using this library for piechart
https://github.com/PhilJay/MPAndroidChart
PieChart pieChart = (PieChart) view.findViewById(R.id.fragment_chart);
pieChart.setUsePercentValues(true);
Display display = getActivity().getWindowManager().getDefaultDisplay();
int height = display.getHeight(); // deprecated
int offset = (int)(height * 0.65); /* percent to move */
/* RelativeLayout.LayoutParams rlParams =
(RelativeLayout.LayoutParams)pieChart.getLayoutParams();
rlParams.setMargins(0, 0, 0, -offset);
pieChart.setLayoutParams(rlParams);*/
// IMPORTANT: In a PieChart, no values (Entry) should have the same
// xIndex (even if from different DataSets), since no values can be
// drawn above each other.
ArrayList<PieEntry> yvalues = new ArrayList<PieEntry>();
yvalues.add(new PieEntry(8f, 0));
yvalues.add(new PieEntry(15f, 1));
yvalues.add(new PieEntry(12f, 2));
PieDataSet dataSet = new PieDataSet(yvalues, "Reward Points");
ArrayList<String> xVals = new ArrayList<String>();
xVals.add("January");
xVals.add("February");
xVals.add("March");
xVals.add("April");
xVals.add("May");
xVals.add("June");
PieData data = new PieData( dataSet);
data.setValueFormatter(new PercentFormatter());
pieChart.setData(data);
//pieChart.setDescription("This is Pie Chart");
pieChart.setBackgroundColor(Color.TRANSPARENT);
pieChart.setHoleColor(Color.WHITE);
pieChart.setTransparentCircleColor(Color.WHITE);
pieChart.setTransparentCircleAlpha(0);
pieChart.setHoleRadius(18f);
pieChart.setDrawCenterText(true);
pieChart.isRotationEnabled();
pieChart.isHighlightPerTapEnabled();
pieChart.setCenterTextOffset(0f,-20f);
pieChart.setEntryLabelColor(Color.WHITE);
pieChart.setEntryLabelTypeface(Typeface.DEFAULT);
pieChart.setEntryLabelTextSize(16f);
pieChart.setTransparentCircleRadius(11f);
pieChart.setDrawHoleEnabled(true);
pieChart.setMaxAngle(180.0f);
pieChart.setRotationAngle(180.0f);
pieChart.setCenterTextSize(30);
dataSet.setColors(ColorTemplate.VORDIPLOM_COLORS);
data.setValueTextSize(13f);
data.setValueTextColor(Color.DKGRAY);
//pieChart.setOnChartValueSelectedListener(getActivity());
pieChart.animateY(1400, Easing.EaseInOutQuad);
Expected Output
Getting Output
Use below code.
pieChart.setHoleRadius(64f);//18f
pieChart.setCenterTextSize(10);//30
pieChart.setCenterText("Reward Points: 150");//new line
pieChart.setExtraOffsets(5f,0f,10f,-100f);
Adjust value of bottom offset in setExtraOffsets(in above code value -100f) in order to adjust space.
To get the expected output,
You need to add a negative bottom margin
// Use LinearLayout.LayoutParams since you use a linear layout
// set buttom margin (I used -450 change this as you need)
LinearLayout.LayoutParams rlParams =
(LinearLayout.LayoutParams) pieChart.getLayoutParams();
rlParams.setMargins(0, 0, 0, -450);
pieChart.setLayoutParams(rlParams);
Disable the description
pieChart.getDescription().setEnabled(false); // remove the description
Increase hole radius
pieChart.setHoleRadius(50f); // increase hole radius
Reduce center font size and set text
pieChart.setCenterTextSize(15); // reduce font size
pieChart.setCenterText("Rewarded points: 140"); // set center text
Also change the height to 400dp in your xml file.
<com.github.mikephil.charting.charts.PieChart
android:id="#+id/fragment_chart"
android:layout_width="match_parent"
android:layout_height="400dp" />
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 am able to create the linechart dynamically using the MPAndroid Chart Library and is Able to Create the Shadow of the LineChart aswell but i am not Able to Create the Another Circle Hole Over the one previously existed in MPAndroid Line chart?
Code
void plotGraph(List<StatementListApi> statementListApis) {
HashMap<Integer, String> stringDoubleHashMap = new HashMap<>();
stringDoubleHashMap.put(0, "0");
stringDoubleHashMap.put(1, "0");
stringDoubleHashMap.put(2, "0");
stringDoubleHashMap.put(3, "0");
stringDoubleHashMap.put(4, "0");
stringDoubleHashMap.put(5, "0");
stringDoubleHashMap.put(6, "0");
for (int i = 0; i < statementListApis.size(); i++) {
Date date = new Date(Long.parseLong(statementListApis.get(i).getRecordedDate()));
System.out.println("date is" + date);
if (stringDoubleHashMap.containsKey(date.getDay())) {
Long aLong = statementListApis.get(i).getAmount() + Long.parseLong(stringDoubleHashMap.get(date.getDay()));
stringDoubleHashMap.put(date.getDay(), aLong + "");
} else {
stringDoubleHashMap.put(date.getDay(), statementListApis.get(i).getAmount() + "");
}
System.out.println("size of hashmap" + stringDoubleHashMap.size());
}
List<String> xVals = new ArrayList<String>(stringDoubleHashMap.values());
List<ILineDataSet> testDataSet1 = new ArrayList<>();
List<Entry> entries = new ArrayList<>();
ArrayList<String> Labels = new ArrayList<>();
Labels.add("SUN");
Labels.add("MON");
Labels.add("TUE");
Labels.add("WED");
Labels.add("THU");
Labels.add("FRI");
Labels.add("SAT");
for (int i = 0; i < xVals.size(); i++) {
entries.add(new Entry(i, Float.parseFloat(xVals.get(i))));
LineDataSet dataSet = new LineDataSet(entries, Labels.get(i));
testDataSet1.add(dataSet);
dataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);
dataSet.setColor(Color.RED);
dataSet.setCircleColor(Color.WHITE);
dataSet.setValueTextColor(Color.WHITE);
}
activityStatementBinding.lineChart.getXAxis().setTextColor(Color.WHITE);
// for shadow
activityStatementBinding.lineChart.setLayerType(View.LAYER_TYPE_HARDWARE, null);
activityStatementBinding.lineChart.getRenderer().getPaintRender().setShadowLayer(1, 10, 10, Color.BLACK);
IMarker marker = new CustomMarkerView(this, R.layout.activity_marker_view);
activityStatementBinding.lineChart.setMarker(marker);
MarkerImage markerImage = new MarkerImage(this, R.drawable.ic_back_24);
activityStatementBinding.lineChart.setMarker(markerImage);
//Animation
activityStatementBinding.lineChart.animateY(1700);
YAxis leftAxis = activityStatementBinding.lineChart.getAxisRight();
leftAxis.setEnabled(false);
//used to remove the horizontal x-axis lines in graph
YAxis rightAxis = activityStatementBinding.lineChart.getAxisLeft();
rightAxis.setEnabled(false);
activityStatementBinding.lineChart.getDescription().setEnabled(false);
activityStatementBinding.lineChart.getXAxis().setPosition(XAxis.XAxisPosition.BOTTOM);
// used for removing the labels with color
Legend legend = activityStatementBinding.lineChart.getLegend();
legend.setEnabled(false);
// activityStatementBinding.lineChart.moveViewTo(10, 0, RIGHT);
// activityStatementBinding.lineChart.setScrollContainer(true);
// activityStatementBinding.lineChart.setHorizontalScrollBarEnabled(true);
activityStatementBinding.lineChart.getXAxis().setValueFormatter(new IndexAxisValueFormatter(Labels));
activityStatementBinding.lineChart.setData(new LineData(testDataSet1));
activityStatementBinding.lineChart.notifyDataSetChanged();
activityStatementBinding.lineChart.invalidate();
}
getting image
required image
How can i achieve the circle hole over the one that already exist?
you need to do following:
lineDataSet.setCircleRadius(6);
float circleHoleRadius = circleRadius/2;
lineDataSet.setCircleHoleRadius(circleHoleRadius);
//lineDataSet.setCircleColor(Color.RED);
// Below line is to add transperancy to your color
lineDataSet.setCircleColor(Color.argb(12,284,55,32));
lineDataSet.setCircleColorHole(Color.WHITE);
You can change colors and size according to your requirements. Happy coding :)
dataSet.setDrawCircles(true);
dataSet.setDrawCircleHole(true);
dataSet.setColor(yourColor);
dataSet.setCircleRadius(20); // required radius
dataSet.setCircleColor(circleColor);
dataSet.setCircleHoleColor(circleColor);
dataSet.setCircleHoleRadius(10); // hole radius
dataSet.setDrawValues(true);
You have to enable dataSet.setDrawCircleHole(true); for drawing holes
I want to draw a bar chart with 2 stacked bars with AChartEngine, like in the SalesBarChart example. My Problem is, the bars with same X value don't have the same width, i.e. the larger bar is wider than the smaller bar, see the image below.
Source code:
renderer = new XYMultipleSeriesRenderer();
// Set chart parameters
renderer.setBarSpacing(0.5);
// Margin background color
renderer.setMarginsColor(Color.rgb(0xF3, 0xF3, 0xF3));
// Disable pan and zoom
renderer.setPanEnabled(false, false);
renderer.setZoomEnabled(false, false);
// Text sizes
renderer.setAxisTitleTextSize(16);
renderer.setChartTitleTextSize(20);
renderer.setLabelsTextSize(16);
renderer.setLegendTextSize(16);
// X axis
renderer.setXLabelsColor(Color.BLACK);
renderer.setXLabelsAlign(Align.RIGHT);
// TODO: adjust axis limits depending on time series
// Y axis
renderer.setYAxisMin(0);
renderer.setYAxisMax(200);
renderer.setYLabels(10);
renderer.setYLabelsColor(0, Color.BLACK);
renderer.setYLabelsAlign(Align.RIGHT);
// Configure renderer for normal and alarm time series
XYSeriesRenderer alarmRenderer = new XYSeriesRenderer();
alarmRenderer.setColor(Color.rgb(0xCC, 0x00, 0x00));
renderer.addSeriesRenderer(alarmRenderer);
XYSeriesRenderer normRenderer = new XYSeriesRenderer();
normRenderer.setColor(Color.rgb(0x99, 0xCC, 0x00));
renderer.addSeriesRenderer(normRenderer);
[...]
dataset = new XYMultipleSeriesDataset();
renderer.setChartTitle(items[which]);
// Dummy Data TODO: replace with real data
Random r = new Random();
int limit = 100;
normValues = new TimeSeries("Normal");
alarmValues = new TimeSeries("Alarm");
dataset.addSeries(alarmValues);
dataset.addSeries(normValues);
for (int i = 0; i < 100; i++) {
Date date = new Date(i*1000);
int value = 70+r.nextInt(60);
if (value <= limit) {
normValues.add(date, value);
} else {
normValues.add(date, 100);
alarmValues.add(date, value);
}
}
if (!init) {
trend.removeView(chart);
}
chart = ChartFactory.getBarChartView(getActivity(), dataset, renderer, Type.STACKED);
chart.setBackgroundColor(Color.TRANSPARENT);
chart.setLayoutParams(params);
chart.setPadding(6, 20, 6, 0);
trend.addView(chart, 0);
How can I achieve that both bars have the same width??
This happens when the 2 series have a different number of items. Please make sure that the series have the same length.