How to make stacked bars have the same width in AChartEngine - android

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.

Related

AChartEngine Custom Axis

ScreenShot
Hello, i have a trouble with bar chart, i must remove this sticks on X and Y axis above numbers but i don't know how to do this, here is my code for creating chart: `String[] monthDays = new String[lastDayOfMonth];
// Create month days labels
int[] x = new int[lastDayOfMonth];
for (int i = 0; i < monthDays.length; i++) {
monthDays[i] = "" + (i + 1);
x[i] = i + 1;
}
// Create series
XYSeries majorSeries = new XYSeries("Major");
XYSeries middleSeries = new XYSeries("Middle");
XYSeries minorSeries = new XYSeries("Minor");
XYSeries restSeries = new XYSeries("Rest");
// Add data to series
for(int i = 0; i < x.length; i++) {
majorSeries.add(i, majorData[i]);
middleSeries.add(i, middleData[i]);
minorSeries.add(i, minorData[i]);
restSeries.add(i, restData[i]);
}
// Create series data set
XYMultipleSeriesDataset xyMultipleSeriesDataset = new XYMultipleSeriesDataset();
// Add series to data set
xyMultipleSeriesDataset.addSeries(restSeries);
xyMultipleSeriesDataset.addSeries(minorSeries);
xyMultipleSeriesDataset.addSeries(middleSeries);
xyMultipleSeriesDataset.addSeries(majorSeries);
// Create series render for major data set
XYSeriesRenderer majorXySeriesRenderer = new XYSeriesRenderer();
majorXySeriesRenderer.setColor(Color.parseColor("#4797b4"));
majorXySeriesRenderer.setFillPoints(true);
majorXySeriesRenderer.setLineWidth(2);
// Create series render for middle data set
XYSeriesRenderer middleXySeriesRenderer = new XYSeriesRenderer();
middleXySeriesRenderer.setColor(Color.parseColor("#4ec697"));
middleXySeriesRenderer.setFillPoints(true);
middleXySeriesRenderer.setLineWidth(2);
// Create series render for minor data set
XYSeriesRenderer minorXySeriesRenderer = new XYSeriesRenderer();
minorXySeriesRenderer.setColor(Color.parseColor("#1fb1ba"));
minorXySeriesRenderer.setFillPoints(true);
minorXySeriesRenderer.setLineWidth(2);
// Create series render for rest data set
XYSeriesRenderer restXySeriesRenderer = new XYSeriesRenderer();
restXySeriesRenderer.setColor(Color.parseColor("#c2c2c2"));
restXySeriesRenderer.setFillPoints(true);
restXySeriesRenderer.setLineWidth(2);
// Creating XYMultipleSeriesRenderer to customize chart
XYMultipleSeriesRenderer multiRenderer = new XYMultipleSeriesRenderer();
multiRenderer.setOrientation(XYMultipleSeriesRenderer.Orientation.HORIZONTAL);
// Add labels to x
for(int i = 0; i < monthDays.length; i++) {
multiRenderer.addXTextLabel(i, monthDays[i]);
}
multiRenderer.setXLabels(0);
multiRenderer.setYLabels(0);
multiRenderer.setXLabelsColor(Color.BLACK);
multiRenderer.setYLabelsColor(0, Color.BLACK);
multiRenderer.setLabelsTextSize(24);
multiRenderer.setZoomButtonsVisible(false);
multiRenderer.setPanEnabled(true, false);
multiRenderer.setPanLimits(new double[] {-0.75, 31, 0, 0});
multiRenderer.setClickEnabled(false);
multiRenderer.setZoomEnabled(false, false);
multiRenderer.setShowGridY(false);
multiRenderer.setShowGridX(false);
multiRenderer.setFitLegend(true);
multiRenderer.setShowAxes(false);
multiRenderer.setShowLegend(false);
multiRenderer.setShowGrid(false);
multiRenderer.setZoomEnabled(false);
multiRenderer.setExternalZoomEnabled(false);
multiRenderer.setAntialiasing(true);
multiRenderer.setInScroll(true);
multiRenderer.setLegendHeight(30);
multiRenderer.setXLabelsAlign(Paint.Align.CENTER);
multiRenderer.setYLabelsAlign(Paint.Align.LEFT);
multiRenderer.setTextTypeface("sans_serif", Typeface.NORMAL);
multiRenderer.setYAxisMax(maxValue + (maxValue * 2 / 100));
multiRenderer.addYTextLabel(0, currency + "0.0");
if (maxValue == 0) {
multiRenderer.setYAxisMax(500);
multiRenderer.addYTextLabel(500, currency + maxValue);
} else {
multiRenderer.addYTextLabel(multiRenderer.getYAxisMax(), currency + maxValue);
}
multiRenderer.setXAxisMin(-0.5);
multiRenderer.setXAxisMax(11);
multiRenderer.setBarSpacing(0.5);
multiRenderer.setBackgroundColor(Color.TRANSPARENT);
multiRenderer.setMarginsColor(Color.argb(0x00, 0xff, 0x00, 0x00));
multiRenderer.setApplyBackgroundColor(true);
multiRenderer.setMargins(new int[]{30, 30, 30, 30});
// Add all renders to multi render
multiRenderer.addSeriesRenderer(restXySeriesRenderer);
multiRenderer.addSeriesRenderer(minorXySeriesRenderer);
multiRenderer.addSeriesRenderer(middleXySeriesRenderer);
multiRenderer.addSeriesRenderer(majorXySeriesRenderer);
// Create array of chart types
CombinedXYChart.XYCombinedChartDef[] types = new CombinedXYChart.XYCombinedChartDef[]{
new CombinedXYChart.XYCombinedChartDef(BarChart.TYPE, 0),
new CombinedXYChart.XYCombinedChartDef(BarChart.TYPE, 1),
new CombinedXYChart.XYCombinedChartDef(BarChart.TYPE, 2),
new CombinedXYChart.XYCombinedChartDef(BarChart.TYPE, 3)};
// Get view of chart
GraphicalView graphicalView = ChartFactory.getCombinedXYChartView(getContext(), xyMultipleSeriesDataset, multiRenderer, types);
chart.removeAllViews();
chart.addView(graphicalView);`
Solved
To do this you can set labels color same as your background or transparent
multiRenderer.setXLabelsColor(Color.WHITE);
multiRenderer.setYLabelsColor(0, Color.WHITE);
After this you have to create your own class that extends chart class witch you need
public class MyChart extends CombinedXYChart {
int color;
public MyChart(XYMultipleSeriesDataset dataset, XYMultipleSeriesRenderer renderer, XYCombinedChartDef[] chartDefinitions) {
super(dataset, renderer, chartDefinitions);
}
#Override
protected void drawString(Canvas canvas, String text, float x, float y, Paint paint) {
paint.setColor(color);
super.drawString(canvas, text, x, y, paint);
}
public void setColor(int color) {
this.color = color;
}}
And finally you have to use your own class to create graphicalView and place it in layout
MyChart myChart = new MyChart(xyMultipleSeriesDataset, multiRenderer, types);
myChart.setColor(Color.BLACK);
GraphicalView graphicalView = new GraphicalView(getContext(), myChart);
This steps will override method from AbstractChart class witch draws only text values in your chart, but sticks will remain same color as your background, so they would be invisible

Android Chart not giving output

Following is my fragment used to display the graph on click of chart button. Right now it does not display any output. There is no error. I am using achartengine for the charts. Is there some error in the code or what? Please help.
public class VitalShow extends Fragment{
private Context mContext;
private EditText pn;
private Button chart,vaccine,presc;
private Database dbHelper;
private String val,data,dt,gen;
private View mChart;
private LinearLayout chartContainer;
//private double[] male1,male2,male3,male4,male5;
private String[] mMonth = new String[] {
"0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24"
};
private int agemo;
#Override
public void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
mContext = getActivity();
dbHelper=new Database(getActivity());
Bundle bundle=this.getArguments();
val=bundle.getString("val");
dt=bundle.getString("dt");
System.out.println(dt+"Date");
System.out.println(val+"Valuesss");
data=dbHelper.getVital(val);
gen=dbHelper.getGender(val);
String month=dt.substring(5,8);
String year=dt.substring(14);
System.out.println(month+"month"+year+"year");
System.out.println(gen+"Gender");
int mono = 0;
if(month.equals("Jan"))
mono = 1;
else if(month.equals("Feb"))
mono = 2;
else if(month.equals("Mar"))
mono = 3;
else if(month.equals("Apr"))
mono = 4;
else if(month.equals("May"))
mono = 5;
else if(month.equals("Jun"))
mono = 6;
else if(month.equals("Jul"))
mono = 7;
else if(month.equals("Aug"))
mono = 8;
else if(month.equals("Sep"))
mono = 9;
else if(month.equals("Oct"))
mono = 10;
else if(month.equals("Nov"))
mono = 11;
else if(month.equals("Dec"))
mono = 12;
System.out.println(mono+"mono");
int yrno=Integer.parseInt(year);
System.out.println(yrno+"yrno");
Calendar calendar = Calendar.getInstance();
int thisYear = calendar.get(Calendar.YEAR);
int thisMonth = calendar.get(Calendar.MONTH);
System.out.println(thisMonth+"thisyr");
agemo=((thisYear-yrno)*12)+(thisMonth-mono+1);
System.out.println(agemo+"Age");
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
View view = inflater.inflate(R.layout.vitalshow,null);
pn=(EditText)view.findViewById(R.id.editText1);
chart=(Button)view.findViewById(R.id.button1);
vaccine=(Button)view.findViewById(R.id.button2);
presc=(Button)view.findViewById(R.id.button3);
chartContainer = (LinearLayout)view.findViewById(R.id.chart);
pn.setText(data);
chart.setOnClickListener(new OnClickListener(){
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
pn.setVisibility(View.GONE);
chart.setVisibility(View.GONE);
vaccine.setVisibility(View.GONE);
presc.setVisibility(View.GONE);
openChart(gen);
}
});
vaccine.setOnClickListener(new OnClickListener(){
FragmentManager fragmentManager = getFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
Intent intent = new Intent(getActivity(), VaccAdmin.class);
String mon=String.valueOf(agemo);
intent.putExtra("age", mon);
startActivity(intent);
}
});
presc.setOnClickListener(new OnClickListener(){
FragmentManager fragmentManager = getFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
Fragment fragment = new Prescription();
Bundle bundle=new Bundle();
bundle.putString("val", val);
System.out.println(val+"abc");
fragment.setArguments(bundle);
fragmentTransaction.replace(R.id.content_frame, fragment);
fragmentTransaction.addToBackStack(null);
fragmentTransaction.commit();
}
});
return view;
}
private void openChart(String gen){
String gender=gen;
System.out.println(gender);
int[] x = { 0,1,2,3,4,5,6,7, 8, 9, 10, 11,12,13,14,15,16,17,18,19,20,21,22,23,24 };
if(gender.equals("Male")){
double[] male1 = { 11.3,12.6,13.8, 14.4,14.7,14.8,14.9,14.9,
14.9,14.8,14.7,14.6,14.5,14.4,14.3,14.2,14.2,14.1,14.0,
13.9,13.9, 13.8, 13.8, 13.7,13.7};
double[] male2 = {12.2, 13.6, 14.9, 15.5,15.7,15.9,15.9,15.9,
15.9,15.8,15.7,15.6,15.5,15.4,15.3,15.2,15.1,15.0,
14.9,14.8, 14.8, 14.7, 14.6,14.6,14.5};
double[] male3 = {13.4, 14.9, 16.3,16.9,17.2,17.3,17.3,17.3,
17.3,17.2,17.0,16.9,16.8,16.7,16.6,16.4,16.3,16.2,16.1,
16.1,16.0, 15.9, 15.8, 15.8,15.7};
double[] male4 = {14.8,16.4,17.8,18.5,18.7,18.9,18.9,18.9,
18.8,18.7,18.6,18.4,18.3,18.1,18.0,17.9,17.8,17.6,17.5,
17.4,17.4, 17.3, 17.2, 17.1,17.1};
double[] male5 = {16.1,17.6,19.2,19.8,20.1,20.2,20.3,20.3,
20.2,20.1,19.9,19.8,19.6,19.5,19.3,19.2,19.1,18.9,18.8,
18.7,18.6,18.6,18.5,18.4,18.3};
double[] male6 = {15.0,15.0,15.0,15.0,15.0,15.0,15.0,15.0,15.0,15.0,15.0,15.0,
15.0,15.0,15.0,15.0,15.0,15.0,15.0,15.0,15.0,15.0,15.0,15.0,15.0,};
// Creating an XYSeries for Income
XYSeries m1 = new XYSeries("Male1");
// Creating an XYSeries for Expense
XYSeries m2 = new XYSeries("Male2");
// Adding data to Income and Expense Series
XYSeries m3 = new XYSeries("Male3");
XYSeries m4 = new XYSeries("Male4");
XYSeries m5 = new XYSeries("Male5");
XYSeries m6 = new XYSeries("You");
for(int i=0;i<x.length;i++){
m1.add(i,male1[i]);
m2.add(i,male2[i]);
m3.add(i,male3[i]);
m4.add(i,male4[i]);
m5.add(i,male5[i]);
//m6.add(i,male6[i]);
}
m6.add(20,15.0);
XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
// Adding Income Series to the dataset
dataset.addSeries(m1);
// Adding Expense Series to dataset
dataset.addSeries(m2);
dataset.addSeries(m3);
dataset.addSeries(m4);
dataset.addSeries(m5);
dataset.addSeries(m6);
// Creating XYSeriesRenderer to customize incomeSeries
XYSeriesRenderer incomeRenderer = new XYSeriesRenderer();
incomeRenderer.setColor(Color.RED); //color of the graph set to cyan
incomeRenderer.setFillPoints(true);
incomeRenderer.setLineWidth(2f);
incomeRenderer.setDisplayChartValues(true);
//setting chart value distance
incomeRenderer.setDisplayChartValuesDistance(10);
//setting line graph point style to circle
incomeRenderer.setPointStyle(PointStyle.CIRCLE);
//setting stroke of the line chart to solid
incomeRenderer.setStroke(BasicStroke.SOLID);
// Creating XYSeriesRenderer to customize expenseSeries
XYSeriesRenderer expenseRenderer = new XYSeriesRenderer();
expenseRenderer.setColor(Color.YELLOW);
expenseRenderer.setFillPoints(true);
expenseRenderer.setLineWidth(2f);
expenseRenderer.setDisplayChartValues(true);
//setting line graph point style to circle
expenseRenderer.setPointStyle(PointStyle.CIRCLE);
//setting stroke of the line chart to solid
expenseRenderer.setStroke(BasicStroke.SOLID);
XYSeriesRenderer Renderer3 = new XYSeriesRenderer();
Renderer3.setColor(Color.GREEN);
Renderer3.setFillPoints(true);
Renderer3.setLineWidth(2f);
Renderer3.setDisplayChartValues(true);
//setting line graph point style to circle
Renderer3.setPointStyle(PointStyle.CIRCLE);
//setting stroke of the line chart to solid
Renderer3.setStroke(BasicStroke.SOLID);
XYSeriesRenderer Renderer4 = new XYSeriesRenderer();
Renderer4.setColor(Color.YELLOW);
Renderer4.setFillPoints(true);
Renderer4.setLineWidth(2f);
Renderer4.setDisplayChartValues(true);
//setting line graph point style to circle
Renderer4.setPointStyle(PointStyle.CIRCLE);
//setting stroke of the line chart to solid
Renderer4.setStroke(BasicStroke.SOLID);
XYSeriesRenderer Renderer5 = new XYSeriesRenderer();
Renderer5.setColor(Color.RED);
Renderer5.setFillPoints(true);
Renderer5.setLineWidth(2f);
Renderer5.setDisplayChartValues(true);
//setting line graph point style to circle
Renderer5.setPointStyle(PointStyle.CIRCLE);
//setting stroke of the line chart to solid
Renderer5.setStroke(BasicStroke.SOLID);
XYSeriesRenderer Renderer6 = new XYSeriesRenderer();
Renderer6.setColor(Color.WHITE);
Renderer6.setFillPoints(true);
Renderer6.setLineWidth(2f);
Renderer6.setDisplayChartValues(true);
//setting line graph point style to circle
Renderer6.setPointStyle(PointStyle.SQUARE);
//setting stroke of the line chart to solid
Renderer6.setStroke(BasicStroke.SOLID);
// Creating a XYMultipleSeriesRenderer to customize the whole chart
XYMultipleSeriesRenderer multiRenderer = new XYMultipleSeriesRenderer();
multiRenderer.setXLabels(0);
multiRenderer.setChartTitle("BMI Chart");
multiRenderer.setXTitle("Age in Months");
multiRenderer.setYTitle("BMI percentile");
/***
* Customizing graphs
*/
//setting text size of the title
multiRenderer.setChartTitleTextSize(28);
//setting text size of the axis title
multiRenderer.setAxisTitleTextSize(24);
//setting text size of the graph lable
multiRenderer.setLabelsTextSize(24);
//setting zoom buttons visiblity
multiRenderer.setZoomButtonsVisible(false);
//setting pan enablity which uses graph to move on both axis
multiRenderer.setPanEnabled(true, true);
//setting click false on graph
multiRenderer.setClickEnabled(false);
//setting zoom to false on both axis
multiRenderer.setZoomEnabled(true, true);
//setting lines to display on y axis
multiRenderer.setShowGridY(true);
//setting lines to display on x axis
multiRenderer.setShowGridX(true);
//setting legend to fit the screen size
multiRenderer.setFitLegend(true);
//setting displaying line on grid
multiRenderer.setShowGrid(true);
//setting zoom to false
multiRenderer.setZoomEnabled(true);
//setting external zoom functions to false
multiRenderer.setExternalZoomEnabled(true);
//setting displaying lines on graph to be formatted(like using graphics)
multiRenderer.setAntialiasing(true);
//setting to in scroll to false
multiRenderer.setInScroll(false);
//setting to set legend height of the graph
multiRenderer.setLegendHeight(30);
//setting x axis label align
multiRenderer.setXLabelsAlign(Align.CENTER);
//setting y axis label to align
multiRenderer.setYLabelsAlign(Align.LEFT);
multiRenderer.setXLabelsColor(Color.WHITE);
//setting text style
multiRenderer.setTextTypeface("sans_serif", Typeface.NORMAL);
//setting no of values to display in y axis
multiRenderer.setYLabels(10);
//multiRenderer.setYLabelsColor(10, Color.BLACK);
// setting y axis max value, Since i'm using static values inside the graph so i'm setting y max value to 4000.
// if you use dynamic values then get the max y value and set here
multiRenderer.setYAxisMax(20);
//setting used to move the graph on xaxiz to .5 to the right
multiRenderer.setXAxisMin(-0.5);
//setting used to move the graph on xaxiz to .5 to the right
multiRenderer.setXAxisMax(24);
//setting bar size or space between two bars
//multiRenderer.setBarSpacing(0.5);
//Setting background color of the graph to transparent
multiRenderer.setBackgroundColor(Color.BLACK);
//Setting margin color of the graph to transparent
//multiRenderer.setMarginsColor(getResources().getColor(R.color.transparent_background));
multiRenderer.setApplyBackgroundColor(true);
multiRenderer.setScale(2f);
//setting x axis point size
multiRenderer.setPointSize(4f);
multiRenderer.setXLabelsAngle(90);
//setting the margin size for the graph in the order top, left, bottom, right
multiRenderer.setMargins(new int[]{30, 30, 30, 30});
multiRenderer.setLabelsColor(Color.WHITE);
for(int i=0; i< x.length;i++){
multiRenderer.addXTextLabel(i, mMonth[i]);
}
// Adding incomeRenderer and expenseRenderer to multipleRenderer
// Note: The order of adding dataseries to dataset and renderers to multipleRenderer
// should be same
multiRenderer.addSeriesRenderer(incomeRenderer);
multiRenderer.addSeriesRenderer(expenseRenderer);
multiRenderer.addSeriesRenderer(Renderer3);
multiRenderer.addSeriesRenderer(Renderer4);
multiRenderer.addSeriesRenderer(Renderer5);
multiRenderer.addSeriesRenderer(Renderer6);
//this part is used to display graph on the xml
//LinearLayout chartContainer = (LinearLayout)findViewById(R.id.chart);
//remove any views before u paint the chart
chartContainer.removeAllViews();
//drawing bar chart
mChart = ChartFactory.getLineChartView(getActivity(), dataset, multiRenderer);
//adding the view to the linearlayout
chartContainer.addView(mChart,new LayoutParams(
LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
}
else {
double [] female1 = { 11.2, 12.1, 13.2, 13.7,14.0,14.2,14.3,14.3,
14.3,14.2,14.1,14.0,13.9,13.8,13.7,13.7,13.6,13.5,13.4,
13.4,13.3, 13.3, 13.3, 13.2,13.2};
double [] female2 = {12.1, 13.2, 14.3, 14.9,15.2,15.3,15.4,15.4,
15.4,15.3,15.2,15.1,15.0,14.8,14.7,14.6,14.6,14.5,
14.4,14.3, 14.3, 14.2, 14.2,14.2,14.1};
double [] female3 ={13.3, 14.6,15.8,16.4,16.7,16.8,16.9,16.9,16.8,
16.7,16.6,16.5,16.4,16.2,16.1,16.0,15.9,15.8,15.7,15.7,15.6,
15.5,15.5, 15.4, 15.4};
double [] female4 = {14.7, 16.1, 17.4, 18.0,18.3,18.5,18.6,18.6,
18.5,18.4,18.2,18.1,17.9,17.8,17.7,17.5,17.4,17.3,17.2,
17.2,17.1, 17.0, 17.0, 16.9,16.9};
double [] female5 = {15.9, 17.3, 18.8, 19.4,19.8,20.0,20.1,20.1,
20.0,19.9,19.7,19.6,19.4,19.2,19.1,19.0,18.8,18.7,18.6,
18.5,18.5, 18.4, 18.3, 18.3,18.2};
// Creating an XYSeries for Income
XYSeries m1 = new XYSeries("Female1");
// Creating an XYSeries for Expense
XYSeries m2 = new XYSeries("Female2");
// Adding data to Income and Expense Series
XYSeries m3 = new XYSeries("Female3");
XYSeries m4 = new XYSeries("Female4");
XYSeries m5 = new XYSeries("Female5");
XYSeries m6 = new XYSeries("You");
for(int i=0;i<x.length;i++){
m1.add(i,female1[i]);
m2.add(i,female2[i]);
m3.add(i,female3[i]);
m4.add(i,female4[i]);
m5.add(i,female5[i]);
}
m6.add(12,14.0);
XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
// Adding Income Series to the dataset
dataset.addSeries(m1);
// Adding Expense Series to dataset
dataset.addSeries(m2);
dataset.addSeries(m3);
dataset.addSeries(m4);
dataset.addSeries(m5);
dataset.addSeries(m6);
// Creating XYSeriesRenderer to customize incomeSeries
XYSeriesRenderer incomeRenderer = new XYSeriesRenderer();
incomeRenderer.setColor(Color.RED); //color of the graph set to cyan
incomeRenderer.setFillPoints(true);
incomeRenderer.setLineWidth(2f);
incomeRenderer.setDisplayChartValues(true);
//setting chart value distance
incomeRenderer.setDisplayChartValuesDistance(10);
//setting line graph point style to circle
incomeRenderer.setPointStyle(PointStyle.CIRCLE);
//setting stroke of the line chart to solid
incomeRenderer.setStroke(BasicStroke.SOLID);
// Creating XYSeriesRenderer to customize expenseSeries
XYSeriesRenderer expenseRenderer = new XYSeriesRenderer();
expenseRenderer.setColor(Color.YELLOW);
expenseRenderer.setFillPoints(true);
expenseRenderer.setLineWidth(2f);
expenseRenderer.setDisplayChartValues(true);
//setting line graph point style to circle
expenseRenderer.setPointStyle(PointStyle.CIRCLE);
//setting stroke of the line chart to solid
expenseRenderer.setStroke(BasicStroke.SOLID);
XYSeriesRenderer Renderer3 = new XYSeriesRenderer();
Renderer3.setColor(Color.GREEN);
Renderer3.setFillPoints(true);
Renderer3.setLineWidth(2f);
Renderer3.setDisplayChartValues(true);
//setting line graph point style to circle
Renderer3.setPointStyle(PointStyle.CIRCLE);
//setting stroke of the line chart to solid
Renderer3.setStroke(BasicStroke.SOLID);
XYSeriesRenderer Renderer4 = new XYSeriesRenderer();
Renderer4.setColor(Color.YELLOW);
Renderer4.setFillPoints(true);
Renderer4.setLineWidth(2f);
Renderer4.setDisplayChartValues(true);
//setting line graph point style to circle
Renderer4.setPointStyle(PointStyle.CIRCLE);
//setting stroke of the line chart to solid
Renderer4.setStroke(BasicStroke.SOLID);
XYSeriesRenderer Renderer5 = new XYSeriesRenderer();
Renderer5.setColor(Color.RED);
Renderer5.setFillPoints(true);
Renderer5.setLineWidth(2f);
Renderer5.setDisplayChartValues(true);
//setting line graph point style to circle
Renderer5.setPointStyle(PointStyle.CIRCLE);
//setting stroke of the line chart to solid
Renderer5.setStroke(BasicStroke.SOLID);
XYSeriesRenderer Renderer6 = new XYSeriesRenderer();
Renderer6.setColor(Color.WHITE);
Renderer6.setFillPoints(true);
Renderer6.setLineWidth(2f);
Renderer6.setDisplayChartValues(true);
//setting line graph point style to circle
Renderer6.setPointStyle(PointStyle.SQUARE);
//setting stroke of the line chart to solid
Renderer6.setStroke(BasicStroke.SOLID);
// Creating a XYMultipleSeriesRenderer to customize the whole chart
XYMultipleSeriesRenderer multiRenderer = new XYMultipleSeriesRenderer();
multiRenderer.setXLabels(0);
multiRenderer.setChartTitle("BMI Chart");
multiRenderer.setXTitle("Age in Months");
multiRenderer.setYTitle("BMI percentile");
/***
* Customizing graphs
*/
//setting text size of the title
multiRenderer.setChartTitleTextSize(28);
//setting text size of the axis title
multiRenderer.setAxisTitleTextSize(24);
//setting text size of the graph lable
multiRenderer.setLabelsTextSize(24);
//setting zoom buttons visiblity
multiRenderer.setZoomButtonsVisible(false);
//setting pan enablity which uses graph to move on both axis
multiRenderer.setPanEnabled(true, true);
//setting click false on graph
multiRenderer.setClickEnabled(false);
//setting zoom to false on both axis
multiRenderer.setZoomEnabled(true, true);
//setting lines to display on y axis
multiRenderer.setShowGridY(true);
//setting lines to display on x axis
multiRenderer.setShowGridX(true);
//setting legend to fit the screen size
multiRenderer.setFitLegend(true);
//setting displaying line on grid
multiRenderer.setShowGrid(true);
//setting zoom to false
multiRenderer.setZoomEnabled(true);
//setting external zoom functions to false
multiRenderer.setExternalZoomEnabled(true);
//setting displaying lines on graph to be formatted(like using graphics)
multiRenderer.setAntialiasing(true);
//setting to in scroll to false
multiRenderer.setInScroll(false);
//setting to set legend height of the graph
multiRenderer.setLegendHeight(30);
//setting x axis label align
multiRenderer.setXLabelsAlign(Align.CENTER);
//setting y axis label to align
multiRenderer.setYLabelsAlign(Align.LEFT);
multiRenderer.setXLabelsColor(Color.WHITE);
//setting text style
multiRenderer.setTextTypeface("sans_serif", Typeface.NORMAL);
//setting no of values to display in y axis
multiRenderer.setYLabels(10);
//multiRenderer.setYLabelsColor(10, Color.BLACK);
// setting y axis max value, Since i'm using static values inside the graph so i'm setting y max value to 4000.
// if you use dynamic values then get the max y value and set here
multiRenderer.setYAxisMax(20);
//setting used to move the graph on xaxiz to .5 to the right
multiRenderer.setXAxisMin(-0.5);
//setting used to move the graph on xaxiz to .5 to the right
multiRenderer.setXAxisMax(24);
//setting bar size or space between two bars
//multiRenderer.setBarSpacing(0.5);
//Setting background color of the graph to transparent
multiRenderer.setBackgroundColor(Color.BLACK);
//Setting margin color of the graph to transparent
//multiRenderer.setMarginsColor(getResources().getColor(R.color.transparent_background));
//multiRenderer.setApplyBackgroundColor(true);
multiRenderer.setScale(2f);
//setting x axis point size
multiRenderer.setPointSize(4f);
multiRenderer.setXLabelsAngle(90);
//setting the margin size for the graph in the order top, left, bottom, right
multiRenderer.setMargins(new int[]{30, 30, 30, 30});
multiRenderer.setLabelsColor(Color.WHITE);
for(int i=0; i< x.length;i++){
multiRenderer.addXTextLabel(i, mMonth[i]);
}
// Adding incomeRenderer and expenseRenderer to multipleRenderer
// Note: The order of adding dataseries to dataset and renderers to multipleRenderer
// should be same
multiRenderer.addSeriesRenderer(incomeRenderer);
multiRenderer.addSeriesRenderer(expenseRenderer);
multiRenderer.addSeriesRenderer(Renderer3);
multiRenderer.addSeriesRenderer(Renderer4);
multiRenderer.addSeriesRenderer(Renderer5);
multiRenderer.addSeriesRenderer(Renderer6);
//this part is used to display graph on the xml
//LinearLayout chartContainer = (LinearLayout)findViewById(R.id.chart);
//remove any views before u paint the chart
chartContainer.removeAllViews();
//drawing bar chart
mChart = ChartFactory.getLineChartView(getActivity(), dataset, multiRenderer);
//adding the view to the linearlayout
chartContainer.addView(mChart,new LayoutParams(
LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
}
}
}

AchartEngine Barchart Spacing not working when orientation is vertical and number of elements are 2

I am having a AchartEngine Barchart. I have only two bars to show with Orientation as Vertical. The space between the two bars is very high and I am not able to change it. I have tried the following
1. Change the values passed to setBarSpacing() method from -100, -10, -.9, -.5, -.1, 0, .1, .5, .9, 10, 100
2. Used two XYSeries and then one. In both cases, the space is significant
3. Increased and decreased width of Bar
4. Set the min, max and values at different ranges. min = .9, max = 2.1, x1 = 1, x2 = 2
Nothing is working. Can some one please help me with this?
Try the following method.
The method below adds a barchart showing data for two months with values. If you want to change the color and some other properties, you are free to do that.
private void createChart() {
String[] mMonth = new String[] { "Jan", "Feb" };
int[] mData = new int[] { 20, 25 };
// creating XY series for Data
XYSeries series = new XYSeries("Performance");
// fill the data
for (int i = 0; i < mMonth.length; i++) {
series.add(i, mData[i]);
}
// create a dataset to hold each data series
XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
// Adding dataseries to datast
dataset.addSeries(series);
// create a renderer to customize the series
XYSeriesRenderer renderer = new XYSeriesRenderer();
renderer.setColor(Color.GREEN);
renderer.setFillPoints(true);
renderer.setLineWidth(2);
renderer.setDisplayChartValues(true);
renderer.setChartValuesTextSize(30);
// create a renderer to customize entire chart
XYMultipleSeriesRenderer mRenderer = new XYMultipleSeriesRenderer();
mRenderer.setXLabels(0);
mRenderer.setXTitle("Quarter 1");
mRenderer.setYTitle("Values in K");
mRenderer.setAxesColor(Color.BLACK);
mRenderer.setApplyBackgroundColor(true);
mRenderer.setBackgroundColor(Color.WHITE);
mRenderer.setMarginsColor(Color.WHITE);
mRenderer.setZoomButtonsVisible(false);
mRenderer.setZoomEnabled(false, false);
mRenderer.setPanEnabled(false, false);
// margins
int marginT = 50;
int marginL = 80;
int marginB = 15;
int marginR = 15;
mRenderer.setMargins(new int[] { marginT, marginL, marginB, marginR });
mRenderer.setShowLegend(false);
mRenderer.setAxisTitleTextSize(30);
// mRenderer.setChartTitleTextSize(20);
mRenderer.setLabelsTextSize(30);
mRenderer.setLegendTextSize(30);
// mRenderer.addXTextLabel(8, "OT");
mRenderer.setXAxisMin(-0.5);
mRenderer.setXAxisMax(3);
mRenderer.setYAxisMin(0);
mRenderer.setYLabelsAlign(Align.RIGHT);
mRenderer.setXLabelsColor(Color.BLACK);
mRenderer.setYLabelsColor(0, Color.BLACK);
mRenderer.setXLabels(0);
mRenderer.setBarSpacing(2);
// We want to avoid black border
// transparent margins
mRenderer.setMarginsColor(Color.argb(0x00, 0xff, 0x00, 0x00));
for (int i = 0; i < mMonth.length; i++) {
mRenderer.addXTextLabel(i, mMonth[i]);
}
// adding renderer to multiple renderer(chart)
mRenderer.addSeriesRenderer(renderer);
GraphicalView view = ChartFactory.getBarChartView(this, dataset,
mRenderer, Type.STACKED);
RelativeLayout layout = (RelativeLayout) findViewById(R.id.rlBarChart);
layout.addView(view, 0);
}
Hope this helps.

Customizing achart engine XYMultipleSeriesRenderer display

I am currently working on an android application where I need to display linegraph. I choose achartengine and make XYMultipleSeriesRenderer with timeseries. I am using following code.
private void openChart(){
int count = 5;
Date[] dt = new Date[5];
for(int i=0;i<count;i++){
GregorianCalendar gc = new GregorianCalendar(2012, 10, i+1);
dt[i] = gc.getTime();
}
int[] visits = { 40,40,40,40,40};
int[] views = {55, 51, 44, 41, 39};
// Creating TimeSeries for Visits
TimeSeries visitsSeries = new TimeSeries("Theshold");
// Creating TimeSeries for Views
TimeSeries viewsSeries = new TimeSeries("Readings");
// Adding data to Visits and Views Series
for(int i=0;i<dt.length;i++){
visitsSeries.add(dt[i], visits[i]);
viewsSeries.add(dt[i],views[i]);
}
// Creating a dataset to hold each series
XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
// Adding Visits Series to the dataset
dataset.addSeries(visitsSeries);
// Adding Visits Series to dataset
dataset.addSeries(viewsSeries);
// Creating XYSeriesRenderer to customize visitsSeries
XYSeriesRenderer thresholdRenderer = new XYSeriesRenderer();
thresholdRenderer.setColor(Color.GREEN);
thresholdRenderer.setPointStyle(PointStyle.CIRCLE);
thresholdRenderer.setFillPoints(true);
thresholdRenderer.setLineWidth(2);
thresholdRenderer.setDisplayChartValues(true);
// Creating XYSeriesRenderer to customize viewsSeries
XYSeriesRenderer readingRenderer = new XYSeriesRenderer();
readingRenderer.setColor(Color.BLUE);
readingRenderer.setPointStyle(PointStyle.CIRCLE);
readingRenderer.setFillPoints(true);
readingRenderer.setLineWidth(2);
readingRenderer.setDisplayChartValues(true);
// Creating a XYMultipleSeriesRenderer to customize the whole chart
XYMultipleSeriesRenderer multiRenderer = new XYMultipleSeriesRenderer();
multiRenderer.setLabelsTextSize(20);
multiRenderer.setXLabelsPadding(5);
multiRenderer.setYAxisMax(90);
multiRenderer.setYAxisMin(-20);
multiRenderer.setXTitle("Time Stamps");
multiRenderer.setYTitle("Temperature");
multiRenderer.setZoomButtonsVisible(true);
// Adding visitsRenderer and viewsRenderer to multipleRenderer
// Note: The order of adding dataseries to dataset and renderers to multipleRenderer
// should be same
multiRenderer.addSeriesRenderer(thresholdRenderer);
multiRenderer.addSeriesRenderer(readingRenderer);
// Getting a reference to LinearLayout of the MainActivity Layout
LinearLayout chartContainer = (LinearLayout) findViewById(R.id.chart_container);
// Creating a Time Chart
mChart = (GraphicalView) ChartFactory.getTimeChartView(getBaseContext(), dataset, multiRenderer,"dd-MMM-yyyy");
multiRenderer.setClickEnabled(true);
multiRenderer.setSelectableBuffer(10);
// Setting a click event listener for the graph
mChart.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Format formatter = new SimpleDateFormat("dd-MMM-yyyy");
SeriesSelection seriesSelection = mChart.getCurrentSeriesAndPoint();
if (seriesSelection != null) {
int seriesIndex = seriesSelection.getSeriesIndex();
String selectedSeries="Visits";
if(seriesIndex==0)
selectedSeries = "Visits";
else
selectedSeries = "Views";
// Getting the clicked Date ( x value )
long clickedDateSeconds = (long) seriesSelection.getXValue();
Date clickedDate = new Date(clickedDateSeconds);
String strDate = formatter.format(clickedDate);
// Getting the y value
int amount = (int) seriesSelection.getValue();
// Displaying Toast Message
Toast.makeText(
getBaseContext(),
selectedSeries + " on " + strDate + " : " + amount ,
Toast.LENGTH_SHORT).show();
}
}
});
// Adding the Line Chart to the LinearLayout
chartContainer.addView(mChart);
}
Using the above code I am able to generated following view
I am now stuck on the customizing the view. How can I remove the black background around the chart. And how can I increase the text size of legends and the xlabel and ylabel as well.
Using the setLabelsTextSize will only increase the size of the data in x and y axis (e.g. the date and the temperature value).
Thanks
Updated image:
To change the legend text size use multiRenderer.setLegendTextSize(). To change the outline background color use multiRenderer.setMarginsColor().
As a general note, customizations that involve the entire graph are probably going to be found as part of your XYMultipleSeriesRenderer. I recommend playing with the different settings and finding what each does.
ADDITIONAL
To increase the axes title size use multiRenderer.setAxesTitleSize(). As for the axes label colors use multiRenderer.setXLabelsColor() and multiRenderer.setYLabelsColor(). The axis color can be changed with multiRenderer.setAxesColor().
Again, I encourage you to play with the settings of the renderer. In your IDE, type multiRenderer. and all available methods will be shown. Scroll through those and you can probably find what you are looking. Most of the methods have clear descriptive names.
Change the color and font size use these code
XYSeriesRenderer incomeRenderer = new XYSeriesRenderer();
incomeRenderer.setColor(Color.rgb(130, 130, 230));
incomeRenderer.setChartValuesTextSize(15);
incomeRenderer.setDisplayChartValues(true);
XYMultipleSeriesRenderer multiRenderer = new XYMultipleSeriesRenderer();
multiRenderer.setXLabels(0);
multiRenderer.setChartTitle("Question vs Time Chart");
multiRenderer.setInScroll(true);
multiRenderer.setXTitle("Questions");
multiRenderer.setLabelsColor(Color.BLACK);
multiRenderer.setAxesColor(Color.BLACK);
multiRenderer.setXLabelsColor(Color.RED);
multiRenderer.setYLabelsColor(0, Color.RED);
multiRenderer.setLabelsTextSize(15);
multiRenderer.setYLabelsPadding(10);
multiRenderer.setZoomEnabled(false, false);
double[] set_pan=new double[]{-1.0,Double.MAX_VALUE,0.0,Double.MAX_VALUE+2};
multiRenderer.setPanLimits(set_pan);
multiRenderer.setPanEnabled(true, false);
multiRenderer.setLegendTextSize(15);
multiRenderer.setAxisTitleTextSize(18);
multiRenderer.setChartTitleTextSize(25);
multiRenderer.setTextTypeface("Arial", Typeface.BOLD);
multiRenderer.setMarginsColor(Color.WHITE);

AChartEngine Multiple Y Axis overlapping Values

i use the AChartEngine as a library to draw my line Charts. This Line-Chart consists of Multiple Y-Axis (3-5 Axis) and goes on a Timeline on the X-Axis.
My Problem is, that Y-Axis-Values are overlapping (see image)
Heres my code:
//Puls, Geschwindigkeit und Hoehenmeter dem Diagramm hinzufugen
HashMap<Long, Heartrate> heartrateMap = trainingLog.getHeartrateList();
HashMap<Long, GPS> gpsMap = trainingLog.getGpsList();
//Puls, Geschwindigkeit und Hoehenmeter dem Diagramm hinzufugen
XYSeries heartrateSeries = new XYSeries("Puls", 0);
XYSeries altitudeSeries = new XYSeries("Höhenmeter", 1);
XYSeries speedSeries = new XYSeries("Geschwindigkeit", 2);
for(int i=0; i<trainingLog.getDuration(); i++){
Heartrate heartrate = heartrateMap.get(Long.valueOf(i));
if(heartrate != null){
heartrateSeries.add(i, heartrate.getHeartrate());
}
GPS gps = gpsMap.get(Long.valueOf(i));
if(gps != null){
altitudeSeries.add(i, gps.getAltitude());
speedSeries.add(i, gps.getSpeed());
}
}
XYMultipleSeriesDataset dataSet = new XYMultipleSeriesDataset();
dataSet.addSeries(0, heartrateSeries);
dataSet.addSeries(1, altitudeSeries);
dataSet.addSeries(2, speedSeries);
XYMultipleSeriesRenderer multiRenderer = new XYMultipleSeriesRenderer(3);
//Renderer fuer Pulswerte
XYSeriesRenderer rendererHeartrate = new XYSeriesRenderer();
rendererHeartrate.setColor(Color.RED);
multiRenderer.addSeriesRenderer(rendererHeartrate);
//Renderer fuer Hoehenmeter
XYSeriesRenderer rendererAltitude = new XYSeriesRenderer();
rendererAltitude.setColor(Color.BLUE);
multiRenderer.addSeriesRenderer(rendererAltitude);
//Renderer fuer Geschwindigkeit
XYSeriesRenderer rendererSpeed = new XYSeriesRenderer();
rendererSpeed.setColor(Color.DKGRAY);
multiRenderer.addSeriesRenderer(rendererSpeed);
//Hintergrundfarbe weiß setzen
multiRenderer.setApplyBackgroundColor(true);
multiRenderer.setBackgroundColor(Color.WHITE);
multiRenderer.setMarginsColor(Color.argb(0x00, 0x01, 0x01, 0x01));
//Label--Einstellungen
multiRenderer.setYLabelsColor(0, Color.RED);
multiRenderer.setYLabelsColor(1, Color.BLUE);
multiRenderer.setYLabelsColor(2, Color.DKGRAY);
multiRenderer.setLabelsTextSize(25);
int length = multiRenderer.getSeriesRendererCount();
for (int i = 0; i < length; i++) {
XYSeriesRenderer r = (XYSeriesRenderer) multiRenderer.getSeriesRendererAt(i);
r.setLineWidth(2f);
}
//Legenden-Einstellungen
multiRenderer.setLegendTextSize(20);
multiRenderer.setMargins(new int[] {20, 20, 20, 20});
Looper.prepare();
graphicalView = ChartFactory.getLineChartView(getActivity(), dataSet, multiRenderer);
Does anyone know how to solve this problem? The best way would be to set the y-labels parallel to each other, but i havent found a way to do this. Or is there a function to set the margin of each y-label to the y-axis?
Thanks for your help!
You could set different alignments for your Y axis labels. For instance, the first series would align the labels on the left, the second one on the right and the third on center.
multiRenderer.setYLabelsAlign(Align.LEFT, 0);
multiRenderer.setYLabelsAlign(Align.RIGHT, 1);
multiRenderer.setYLabelsAlign(Align.CENTER, 2);
Simply set y axis minimum value and maximum value for all three scales you used.
Then change color of two Y scales to transparent using Color.argb

Categories

Resources