I have created bar graph using aChartEngine library. Can anyone help me how to increase the width of the bars and position the bars at the centre of X-axis?
This is my BarGraph class:
public class BarGraph {
public Intent getIntent(Context context){
XYMultipleSeriesRenderer mrenderer = new XYMultipleSeriesRenderer();
double[] range = {0,5,0,5};
int[] y = {24,30,12};
CategorySeries series1 = new CategorySeries("Today");
CategorySeries series2 = new CategorySeries("Next day");
CategorySeries series3 = new CategorySeries("2 days later");
XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
for (int i=0;i<3;i++){
switch(i){
case 0:
series1.add(y[0]);
dataset.addSeries(series1.toXYSeries());
break;
case 1:
series2.add(y[1]);
dataset.addSeries(series2.toXYSeries());
break;
case 2:
series3.add(y[2]);
dataset.addSeries(series3.toXYSeries());
break;
}
}
XYSeriesRenderer renderer1 = new XYSeriesRenderer();
renderer1.setColor(Color.GREEN);
XYSeriesRenderer renderer2 = new XYSeriesRenderer();
renderer2.setColor(Color.BLUE);
XYSeriesRenderer renderer3 = new XYSeriesRenderer();
renderer3.setColor(Color.RED);
mrenderer.setAxisTitleTextSize(16);
mrenderer.setChartTitleTextSize(20);
mrenderer.setLabelsTextSize(15);
mrenderer.setLegendTextSize(15);
mrenderer.setBarSpacing(0);
mrenderer.setXLabels(1);
mrenderer.addXTextLabel(2.5, "Outstanding jobs");
mrenderer.setMargins(new int[] {20, 30, 15, 0});
mrenderer.setAxesColor(Color.WHITE);
mrenderer.setChartTitle("Work per day");
mrenderer.setXTitle("Days");
mrenderer.setInitialRange(range, 1);
mrenderer.setBarSpacing(1);
mrenderer.setXAxisMin(0);
mrenderer.setXAxisMax(5);
mrenderer.setYAxisMin(0);
mrenderer.setPanEnabled(false, false);
mrenderer.setZoomEnabled(false, false);
mrenderer.addSeriesRenderer(renderer1);
mrenderer.addSeriesRenderer(renderer2);
mrenderer.addSeriesRenderer(renderer3);
Intent intent = ChartFactory.getBarChartIntent(context, dataset, mrenderer, Type.DEFAULT);
return intent;
}}
This is the screenshot of the bargraph that i get,
I need a bargraph like this,
How can i achieve this? Please help me.
If you want to set width of the bars--
try this...
renderer.setBarSpacing(-0.7);
The only way that I found to fix your problem is a quite ugly but until they improve colour management in achartengine it might be as good as it gets.
Firstly remove the for-case as per larlins suggestion.
Then add empty points to the other series corresponding to the filled points in the other series:
series1.add(1,y[0]);
series1.add(2,0);
series1.add(3,0);
dataset.addSeries(series1);
series2.add(1,0);
series2.add(2,y[1]);
series2.add(3,0);
dataset.addSeries(series2);
series3.add(1,0);
series3.add(2,0);
series3.add(3,y[2]);
dataset.addSeries(series3);
Also set the BarSpacing to 0 and the Type to Type.STACKED instead of Type.DEFAULT.
I think it would look better if you removed the Label and changed the XTitle to "Outstanding Jobs"
Remove the for loop and switch case i think that is unnecessary.and add two blank categories series like
CategorySeries series(nameit) = new CategorySeries("");
CategorySeries series(nameit) = new CategorySeries("");
place it one after CategoriesSeries series1 and the other after CategoriesSeries series2.
then add zero values two place one after series1 and the other after series2 like
series(name it).add(0);
dataset.addSeries(series(name it).toXYSeries());
and the same do with the renderer :Make two XYSeriesRenderer as Transparent color and paste them after renderer1 and the other after renderer2 like this
XYSeriesRenderer renderer(nameit) = new XYSeriesRenderer();
renderer1.setColor(Color.TRANSPARENT);
XYSeriesRenderer renderer(nameit) = new XYSeriesRenderer();
renderer1.setColor(Color.TRANSPARENT);
and see the magic you got what you want.cheers
i got an answer.... :)
i used setBarspacing, but setting the value 0 or 0.5...
The chart can be moved so the values are easily visible...... :)
XYMultipleSeriesRenderer multiRenderer = new XYMultipleSeriesRenderer();
multiRenderer.setXLabels(0);
multiRenderer.setLabelsTextSize(15);
multiRenderer.setBarSpacing(0.5);
multiRenderer.setChartTitle("Commercial Complex APK");
multiRenderer.setXTitle("Projects");
multiRenderer.setYTitle("Variance");
multiRenderer.setZoomButtonsVisible(true);
Related
I am trying to draw a chart(like below image) using achart engine library in android.
DESIRED_CHART.png
Here is what i achieved
CURRENT_CHART.png
Code to draw this is as below
private void drawChart(){
int[] x = { 1,2,3,4,5,6,7,8 };
int[] happyness = { 5,2,4,1,0,4,5,0};
int[] energy = { 5,4,3,1,4,3,5,0};
int[] strenth = { 2,0,1,3,2,4,3,0};
int[] endurance = { 0,2,1,4,3,5,2,0};
// Creating an XYSeries for Income
XYSeries happynessSeries = new XYSeries("Happyness");
// Creating an XYSeries for Income
XYSeries energySeries = new XYSeries("Energy");
// Adding data to Income and Expense Series
XYSeries strenthSeries = new XYSeries("Strenth");
XYSeries enduranceSeries = new XYSeries("Endurance");
for(int i=0;i<x.length;i++){
happynessSeries.add(x[i], happyness[i]);
energySeries.add(x[i],energy[i]);
strenthSeries.add(x[i],strenth[i]);
enduranceSeries.add(x[i],endurance[i]);
}
// Creating a dataset to hold each series
XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
// Adding Income Series to the dataset
dataset.addSeries(happynessSeries);
// Adding Expense Series to dataset
dataset.addSeries(energySeries);
dataset.addSeries(strenthSeries);
dataset.addSeries(enduranceSeries);
// Creating XYSeriesRenderer to customize incomeSeries
XYSeriesRenderer happynessRenderer = new XYSeriesRenderer();
happynessRenderer.setColor(Color.parseColor("#f4ed21"));//chart border color
happynessRenderer.setPointStyle(PointStyle.CIRCLE);
happynessRenderer.setFillPoints(true);
happynessRenderer.setLineWidth(2);
happynessRenderer.setDisplayChartValues(true);
happynessRenderer.setFillBelowLine(true);
happynessRenderer.setFillBelowLineColor(Color.parseColor("#bbf4ed21"));
// Creating XYSeriesRenderer to customize expenseSeries
XYSeriesRenderer energyRenderer = new XYSeriesRenderer();
energyRenderer.setColor(Color.parseColor("#20bff2"));
energyRenderer.setPointStyle(PointStyle.CIRCLE);
energyRenderer.setFillPoints(true);
energyRenderer.setLineWidth(2);
energyRenderer.setDisplayChartValues(true);
energyRenderer.setFillBelowLine(true);
energyRenderer.setFillBelowLineColor(Color.parseColor("#bb20bff2"));
// strenth
XYSeriesRenderer strenthRenderer = new XYSeriesRenderer();
strenthRenderer.setColor(Color.parseColor("#f97b1d"));
strenthRenderer.setPointStyle(PointStyle.CIRCLE);
strenthRenderer.setFillPoints(true);
strenthRenderer.setLineWidth(2);
strenthRenderer.setDisplayChartValues(true);
strenthRenderer.setFillBelowLine(true);
strenthRenderer.setFillBelowLineColor(Color.parseColor("#bbf97b1d"));
// endurance
XYSeriesRenderer enduranceRenderer = new XYSeriesRenderer();
enduranceRenderer.setColor(Color.parseColor("#c68c4d"));
enduranceRenderer.setPointStyle(PointStyle.CIRCLE);
enduranceRenderer.setFillPoints(true);
enduranceRenderer.setLineWidth(2);
enduranceRenderer.setDisplayChartValues(true);
enduranceRenderer.setFillBelowLine(true);
enduranceRenderer.setFillBelowLineColor(Color.parseColor("#bbc68c4d"));
// Creating a XYMultipleSeriesRenderer to customize the whole chart
XYMultipleSeriesRenderer multiRenderer = new XYMultipleSeriesRenderer();
multiRenderer.setXLabels(0);
multiRenderer.setZoomButtonsVisible(true);
for(int i=0;i<x.length;i++){
multiRenderer.addXTextLabel(i+1, mMonth[i]);
}
multiRenderer.setLabelsTextSize(50);
multiRenderer.setYLabels(0);
multiRenderer.setMargins(new int[]{0,0,0,0});
multiRenderer.addSeriesRenderer(happynessRenderer);
multiRenderer.addSeriesRenderer(energyRenderer);
multiRenderer.addSeriesRenderer(strenthRenderer);
multiRenderer.addSeriesRenderer(enduranceRenderer);
multiRenderer.setPanEnabled(false, false);
multiRenderer.setZoomEnabled(false, false);
multiRenderer.setZoomEnabled(false, false);
// Creating an intent to plot line chart using dataset and multipleRenderer
mChart =(GraphicalView) ChartFactory.getLineChartView(getBaseContext(), dataset, multiRenderer);
llChart.addView(mChart);
}
first and last x Axis points values (Mon feb 3 and Mon Feb 9) are cutting. I am struggling to show these values as DESIRED_CHART.png
How to remove this black background behind the Xaxis Values?
To change background color
multiRenderer.setMarginsColor(Color.GREEN);
and give margins to show whole x Axis points values text
multiRenderer.setMargins(new int[]{0,40,0,40});
To hide title
multiRenderer.setChartTitle("");
To hide legends
multiRenderer.setShowLegend(false);
where multiRenderer is XYMultipleSeriesRenderer .
hello everyone i have a problem in setting the color of my graph...
how will i set the color..please help me thanks..
XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
dataset.addSeries(series);
XYSeriesRenderer renderer = new XYSeriesRenderer();
rendrer.setColor(Color, WHITE);//There is an error here
XYMultipleSeriesRenderer mRenderer = new XYMultipleSeriesRenderer();
mRenderer.addSeriesRenderer(renderer);
Intent intent = ChartFactory.getLineChartIntent(context, dataset,
mRenderer, "Line Graph Title");
return intent;
Try to give rgb values as below
renderer.setColor(Color.rgb(248, 248, 255));
I am using AChart Engine to show a bar chart and want to display a bar chart like this:
But it ends up with this:
It is very frastrating and I am trying for last 4 hours to give it a proper format but failed. I searched internet for a proper tutorial but couldn't manage one. Can you please tell me what snippet should I include?
This is my trying code:
public class BarGraph{
public GraphicalView getView(Context context)
{
// Bar 1
XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
CategorySeries ac = new CategorySeries("AC");
CategorySeries pe = new CategorySeries("PE");
CategorySeries wa = new CategorySeries("WA");
CategorySeries tl = new CategorySeries("TL");
CategorySeries ml = new CategorySeries("ML");
CategorySeries ce = new CategorySeries("CE");
CategorySeries re = new CategorySeries("RE");
CategorySeries ot = new CategorySeries("OT");
ac.add(291);
dataset.addSeries(ac.toXYSeries());
pe.add(11);
dataset.addSeries(pe.toXYSeries());
wa.add(204);
dataset.addSeries(ac.toXYSeries());
tl.add(28);
dataset.addSeries(pe.toXYSeries());
ml.add(0);
dataset.addSeries(ac.toXYSeries());
ce.add(21);
dataset.addSeries(pe.toXYSeries());
re.add(51);
dataset.addSeries(ac.toXYSeries());
ot.add(4);
dataset.addSeries(pe.toXYSeries());
XYMultipleSeriesRenderer mRenderer = new XYMultipleSeriesRenderer();
mRenderer.setChartTitle("Submission Statistics");
mRenderer.setXTitle("Verdict Code");
mRenderer.setYTitle("No. of Submissions");
mRenderer.setAxesColor(Color.BLACK);
mRenderer.setLabelsColor(Color.BLACK);
mRenderer.setApplyBackgroundColor(true);
mRenderer.setBackgroundColor(Color.WHITE);
mRenderer.setMarginsColor(Color.WHITE);
mRenderer.setZoomEnabled(true);
mRenderer.setZoomButtonsVisible(true);
XYSeriesRenderer renderer = new XYSeriesRenderer();
renderer.setColor(Color.parseColor("#00AA00"));
renderer.setDisplayChartValues(true);
renderer.setChartValuesSpacing((float) 0.5);
XYSeriesRenderer renderer2 = new XYSeriesRenderer();
renderer2.setColor(Color.parseColor("#666600"));
renderer2.setDisplayChartValues(true);
renderer2.setChartValuesSpacing((float) 0.5);
XYSeriesRenderer renderer3 = new XYSeriesRenderer();
renderer3.setColor(Color.parseColor("#FF0000"));
renderer3.setDisplayChartValues(true);
renderer3.setChartValuesSpacing((float) 0.5);
XYSeriesRenderer renderer4 = new XYSeriesRenderer();
renderer4.setColor(Color.parseColor("#0000FF"));
renderer4.setDisplayChartValues(true);
renderer4.setChartValuesSpacing((float) 0.5);
XYSeriesRenderer renderer5 = new XYSeriesRenderer();
renderer5.setColor(Color.parseColor("#6767D0"));
renderer5.setDisplayChartValues(true);
renderer5.setChartValuesSpacing((float) 0.5);
XYSeriesRenderer renderer6 = new XYSeriesRenderer();
renderer6.setColor(Color.parseColor("#AAAA00"));
renderer6.setDisplayChartValues(true);
renderer6.setChartValuesSpacing((float) 0.5);
XYSeriesRenderer renderer7 = new XYSeriesRenderer();
renderer7.setColor(Color.parseColor("#00AAAA"));
renderer7.setDisplayChartValues(true);
renderer7.setChartValuesSpacing((float) 0.5);
XYSeriesRenderer renderer8 = new XYSeriesRenderer();
renderer8.setColor(Color.parseColor("#000000"));
renderer8.setDisplayChartValues(true);
renderer8.setChartValuesSpacing((float) 0.5);
mRenderer.addSeriesRenderer(renderer);
mRenderer.addSeriesRenderer(renderer2);
mRenderer.addSeriesRenderer(renderer3);
mRenderer.addSeriesRenderer(renderer4);
mRenderer.addSeriesRenderer(renderer5);
mRenderer.addSeriesRenderer(renderer6);
mRenderer.addSeriesRenderer(renderer7);
mRenderer.addSeriesRenderer(renderer8);
return ChartFactory.getBarChartView(context, dataset,mRenderer, Type.DEFAULT);
}
}
I suggest that instead of building CategorySeries, you build XYSeries. Then, in the first series do: series.add(1, 291); the second one will be series.add(2, 11); and so on.
I am totally new to Android and i am trying to create a bar chart using AChartEngine, it has 3 bars and each bar should be different color. I tried using multiple series but can't make my x-axis values align with bars
protected void onResume() {
super.onResume();
layout = (LinearLayout) findViewById(R.id.chart);
if (mChartView == null)
{
PeakSeries = new XYSeries("Income");
ForecastPeakSeries = new XYSeries("Expense");
ForecastSeries = new XYSeries("Expense");
int[] x = { 1,2,3};
int income = 2000;
int expense = 2700;
System.out.println("Here");
Series1.add(x[0],income);
Series2.add(x[1],expense);
Series3.add(x[2],expense);
// Creating a dataset to hold each series
XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
dataset.addSeries(Series1);
dataset.addSeries(Series2);
dataset.addSeries(Series3);
XYSeriesRenderer Renderer1 = new XYSeriesRenderer();
Renderer1 .setColor(Color.RED);
Renderer1 .setChartValuesTextSize(18);
Renderer1 .setFillPoints(true);
Renderer1 .setDisplayChartValues(true);
// Creating XYSeriesRenderer to customize expenseSeries
XYSeriesRenderer Renderer2 = new XYSeriesRenderer();
Renderer2 .setColor(Color.YELLOW);
Renderer2 .setChartValuesTextSize(18);
Renderer2 .setDisplayChartValues(true);
XYSeriesRenderer Renderer3 = new XYSeriesRenderer();
Renderer3 .setColor(Color.CYAN);
Renderer3 .setChartValuesTextSize(18);
Renderer3 .setFillPoints(true);
Renderer3 .setChartValuesTextAlign(Align.CENTER);
Renderer3 .setDisplayChartValues(true);
// Creating a XYMultipleSeriesRenderer to customize the whole chart
double[] range = {0,5,0,5};
multiRenderer.setMargins(new int[] {50, 50, 50, 50});
multiRenderer.setAxisTitleTextSize(16);
multiRenderer.setChartTitleTextSize(30);
multiRenderer.setLabelsTextSize(15);
multiRenderer.setLegendTextSize(20);
multiRenderer.setLegendHeight(40);
multiRenderer.setBarSpacing(-0.7);
multiRenderer.setAxesColor(Color.WHITE);
multiRenderer.setInitialRange(range, 1);
multiRenderer.setXAxisMin(0.4);
multiRenderer.setXAxisMax(4);
multiRenderer.setYAxisMax(5000);
multiRenderer.setYAxisMin(0);
multiRenderer.setXLabelsAlign(Align.RIGHT);
multiRenderer.setYLabelsAlign(Align.RIGHT);
//multiRenderer.s(Align.LEFT);
multiRenderer.setPanEnabled(false, false);
multiRenderer.setZoomEnabled(true, true);
multiRenderer.setChartTitle("7 Day Outlook - Maxiumum Demand");
multiRenderer.setXTitle("Date");
multiRenderer.setYTitle("MW");
multiRenderer.addSeriesRenderer(Renderer1 );
multiRenderer.addSeriesRenderer(Renderer2 );
multiRenderer.addSeriesRenderer(Renderer3 );
final GraphicalView mChartView = ChartFactory.getBarChartView(TestSevenDay1.this, dataset, multiRenderer,Type.DEFAULT);
layout.addView(mChartView);
}
else
{
mChartView.repaint();
}
}
Any help is greatly appreciated.
I handled it by setting the Type from Type.Default to Type.Stacked in the getBarChartView.
ChartFactory.getBarChartView(TestSevenDay1.this, dataset, multiRenderer, Type.STACKED);
When you have bar charts with only one item per series, it is a good idea not to use renderer.setBarSpacing() and use renderer.setBarWidth() instead.
I am using an excellent library AChart engine for generating bar chart. All features are working fine, but I have couple of things which I am not able to resolve:
this is my screen shot:
Now there are two things that needs to be fixed:
1) Hide the series when it is scrolled to right, currently the series March is visible even after 0,0 also.
2) Gridlines are on top of the graph but it should be behind the graph.
3) How to display the legends on top right corner instead of bottom.
here is my below code:
private void openChart(){
int[] x = { 10,20,30,40,50,60,70,80 };
// int[] y = { 10,20,30,40,50,60,70 };
int[] income = { 20,25,27,30,28,35,37,38};
int[] expense = {22, 27, 29, 28, 26, 30, 33, 34 };
int[] sample = {22, 27, 29, 28, 26, 30, 33, 34};
// Creating an XYSeries for Income
XYSeries incomeSeries = new XYSeries("Income");
// Creating an XYSeries for Expense
XYSeries expenseSeries = new XYSeries("Expense");
// Creating an XYSeries for Expense
XYSeries sampleseries = new XYSeries("Sample");
// Adding data to Income and Expense Series
for(int i=0;i<x.length;i++){
incomeSeries.add(i,income[i]);
expenseSeries.add(i,expense[i]);
sampleseries.add(i,sample[i]);
}
// Creating a dataset to hold each series
XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
// Adding Income Series to the dataset
dataset.addSeries(incomeSeries);
// Adding Expense Series to dataset
dataset.addSeries(expenseSeries);
// Adding Expense Series to dataset
dataset.addSeries(sampleseries);
// Creating XYSeriesRenderer to customize incomeSeries
XYSeriesRenderer incomeRenderer = new XYSeriesRenderer();
incomeRenderer.setColor(Color.rgb(130, 130, 230));
incomeRenderer.setFillPoints(true);
incomeRenderer.setLineWidth(2);
incomeRenderer.setChartValuesTextAlign(Align.CENTER);
incomeRenderer.setChartValuesTextSize(18);
incomeRenderer.setDisplayChartValues(true);
// Creating XYSeriesRenderer to customize expenseSeries
XYSeriesRenderer expenseRenderer = new XYSeriesRenderer();
expenseRenderer.setColor(Color.rgb(220, 80, 80));
expenseRenderer.setFillPoints(true);
expenseRenderer.setLineWidth(2);
expenseRenderer.setChartValuesTextAlign(Align.CENTER);
expenseRenderer.setChartValuesTextSize(18);
expenseRenderer.setDisplayChartValues(true);
// Creating XYSeriesRenderer to customize expenseSeries
XYSeriesRenderer samplseries = new XYSeriesRenderer();
samplseries.setColor(Color.rgb(120, 40, 40));
samplseries.setFillPoints(true);
samplseries.setLineWidth(2);
samplseries.setChartValuesTextAlign(Align.CENTER);
samplseries.setChartValuesTextSize(18);
samplseries.setDisplayChartValues(true);
// Creating a XYMultipleSeriesRenderer to customize the whole chart
XYMultipleSeriesRenderer multiRenderer = new XYMultipleSeriesRenderer();
multiRenderer.setMargins(new int[]{30,50,60,0});
multiRenderer.setXRoundedLabels(true);
multiRenderer.setLegendTextSize(24);
multiRenderer.setZoomRate(0.2f);
multiRenderer.setZoomEnabled(false, false);
multiRenderer.setBarSpacing(0.3f);
multiRenderer.setXAxisMin(-1);
multiRenderer.setXAxisMax(5);
multiRenderer.setYAxisMin(0);
multiRenderer.setYAxisMax(50);
multiRenderer.setAxisTitleTextSize(20);
multiRenderer.setAxesColor(Color.BLACK);
multiRenderer.setGridColor(Color.GRAY);
multiRenderer.setShowGridX(true);
multiRenderer.setXLabels(0);
multiRenderer.setPanLimits(new double[] { -1, x.length, 0, x.length});
multiRenderer.setLabelsColor(Color.BLACK);
multiRenderer.setLabelsTextSize(20);
multiRenderer.setXLabelsColor(Color.BLACK);
multiRenderer.setXTitle("Tests");
multiRenderer.setYLabelsAlign(Align.RIGHT);
multiRenderer.setYLabelsColor(0, Color.BLACK);
multiRenderer.setYTitle("Scores");
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(samplseries);
// Creating an intent to plot bar chart using dataset and multipleRenderer
Intent intent = ChartFactory.getBarChartIntent(getBaseContext(), dataset, multiRenderer, Type.DEFAULT);
// Start Activity
startActivity(intent);
}
renderer.setMarginsColor() and use the right version of ACE.
Hide them.
Hide it or let it the way it is.
Update: I have also added a new API call that will allow you to avoid the values that are partially displayed on the chart to be displayed.
renderer.setDisplayBoundingPoints(false);
You can download a version including this feature here.