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
Related
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.
I am trying to plot a graph using achartengine. As you can see from the image, it looks quite ugly.I want to ,
1. Reduce space between values. I cannot have that much space since I need to add more series to it.
2. I am not plotting any negative values, so why it's showing lines at the bottom. The values displayed at the bottom are -1.I want to eliminate any lines at the bottom.
3. If possible, I want to change the background color of graph from black to some other color.
Thanks. Code is included with which I am working.
String see = pull.trim();
String str = '"' + see + '"';
int[] intArray = new int[str.length()];
for(int i=0; i < str.length(); i++){
intArray[i] = Character.digit(str.charAt(i), 10);
}
CategorySeries series = new CategorySeries("My Graph");
for(int i = 0; i <intArray.length; i++){
series.add("Bar ", intArray[i]);
}
XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
dataset.addSeries(series.toXYSeries());
XYSeriesRenderer renderer = new XYSeriesRenderer();
renderer.setDisplayChartValues(true);
renderer.setChartValuesSpacing((float) 0.1);
renderer.setColor(getResources().getColor(R.color.fuchsia));
XYMultipleSeriesRenderer mRenderer = new XYMultipleSeriesRenderer();
mRenderer.addSeriesRenderer(renderer);
mRenderer.setChartTitle("My Graph");
mRenderer.setYTitle("Values");
mRenderer.setZoomButtonsVisible(true);
LinearLayout chart_container=(LinearLayout)findViewById(R.id.Chart_layout);
mChart=(GraphicalView)ChartFactory.getBarChartView(getBaseContext(), dataset, mRenderer, Type.DEFAULT);
chart_container.addView(mChart);
I found out that the bottom negative values were showing because there were spaces in my string with which I was plotting graph.So I wrote it this way,
Hopefully it helps someone in the future.
String see = pull.replaceAll("\\s+","");
int[] intArray = new int[see.length()];
for(int k=0; k < see.length(); k++){
intArray[k] = Character.digit(see.charAt(k), 10);
}
I get bat barchart as like below.
I have used below code for it.
public void createBarChart(String loanName1,String loanName2){
XYSeries loan1Series = new XYSeries(loanName1);
// Creating an XYSeries for Income
XYSeries loan2Series = new XYSeries(loanName2);
// Adding data to Income and Expense Series
double ymax = principleLoan1;
if(principleLoan2 > principleLoan1){
ymax = principleLoan2;
}
if(totalPayment1 > 10000){
totalPayment1 = totalPayment1/1000;
}
if(totalPayment2 > 10000){
totalPayment2 = totalPayment2/1000;
}
if(totalPayment1 > totalPayment2){
if(totalPayment1 > ymax){
ymax = totalPayment1;
}
}else{
if(totalPayment2 > ymax){
ymax = totalPayment2;
}
}
loan1Series.add(1, principleLoan1);
loan1Series.add(2, totalPayment1);
loan2Series.add(1, principleLoan2);
loan2Series.add(2, totalPayment2);
// Creating a dataset to hold each series
XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
// Adding loan 1 Series to the dataset
dataset.addSeries(loan1Series);
// Adding loan 2 Series to dataset
dataset.addSeries(loan2Series);
XYSeriesRenderer loan1Renderer = new XYSeriesRenderer();
loan1Renderer.setColor(Color.parseColor("#b3b3b3"));
loan1Renderer.setFillPoints(true);
loan1Renderer.setChartValuesTextSize(20);
loan1Renderer.setLineWidth(0.2f);
loan1Renderer.setDisplayChartValues(true);
// Creating XYSeriesRenderer to customize expenseSeries
XYSeriesRenderer loan2Renderer = new XYSeriesRenderer();
loan2Renderer.setColor(Color.parseColor("#5eae1f"));
loan2Renderer.setFillPoints(true);
loan2Renderer.setChartValuesTextSize(20);
loan2Renderer.setLineWidth(0.2f);
loan2Renderer.setDisplayChartValues(true);
XYMultipleSeriesRenderer multiRenderer = new XYMultipleSeriesRenderer();
//multiRenderer.setXLabels(0);
multiRenderer.setChartTitle("Difference between Two loan");
//multiRenderer.setXTitle("Year 2012");
// multiRenderer.setYTitle("Amount in Dollars");
multiRenderer.setZoomButtonsVisible(false);
multiRenderer.setZoomEnabled(false);
multiRenderer.setPanEnabled(false);
multiRenderer.setInScroll(true);
multiRenderer.setClickEnabled(false);
//multiRenderer.setFitLegend(true);
//multiRenderer.setLegendHeight(50);
//For apply background
multiRenderer.setApplyBackgroundColor(true);
multiRenderer.setBackgroundColor(Color.WHITE);
multiRenderer.setMarginsColor(Color.WHITE);
//multiRenderer.setLegendTextSize(20);
multiRenderer.setAxisTitleTextSize(20);
multiRenderer.setChartTitleTextSize(28);
multiRenderer.setLabelsTextSize(18);
multiRenderer.setLegendTextSize(18);
//multiRenderer.setLegendHeight(5);
// for x axis
//multiRenderer.setXLabelsAlign(Align.CENTER);
multiRenderer.setXLabels(0);
//for y axis
multiRenderer.setYLabelsAlign(Align.RIGHT);
multiRenderer.setYAxisMax(ymax);
// main axis
multiRenderer.setAxisTitleTextSize(22);
multiRenderer.setLabelsColor(Color.BLACK);
//multiRenderer.setFitLegend(true);
//multiRenderer.setZoomRate(0.2f);
//multiRenderer.setMargins(new int[] { 70, 50, 50, 30 });
//multiRenderer.setBarSpacing(0.2f);
multiRenderer.addSeriesRenderer(loan1Renderer);
multiRenderer.addSeriesRenderer(loan2Renderer);
GraphicalView barChart = ChartFactory.getBarChartView(CompareLoanActivity.this, dataset, multiRenderer, Type.DEFAULT);
rlBarChart.addView(barChart);
}
And I want bar chart like this.
Upper chart is also same chart when I zoom out.
Thanks
I have solved my issue by setting below property.
multiRenderer.setXAxisMax(3);
multiRenderer.setXAxisMin(0);
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.
I am new to Graph concept in android. In my app i want implement the line graph using achartengine. I have the demo of achartengine it consists a lot of code. I am not able to understand the line graph. I want simple Line graph using achartengine. Please can anybody help me.
thanks
Following method will generate random points (x,y) and add it to XYSeries (it is series of points to be plotted on chart).
private XYMultipleSeriesDataset getDemoDataset() {
XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
final int nr = 7;
Random r = new Random();
for (int i = 0; i < SERIES_NR; i++) {
XYSeries series = new XYSeries("Demo series " + (i + 1));
for (int k = 0; k < nr; k++) {
series.add(k, 20 + r.nextInt() % 100);
}
dataset.addSeries(series);
}
return dataset;
}
Following Method will return a multiple renderer which is used to draw line charts.
private XYMultipleSeriesRenderer getDemoRenderer() {
XYMultipleSeriesRenderer renderer = new XYMultipleSeriesRenderer();
renderer.setAxisTitleTextSize(12);
renderer.setChartTitleTextSize(12);
renderer.setLabelsTextSize(15);
renderer.setLegendTextSize(15);
renderer.setPointSize(5f);
renderer.setMargins(new int[] { 20, 30, 15, 0 });
XYSeriesRenderer r = new XYSeriesRenderer();
r.setColor(Color.BLACK);
r.setPointStyle(PointStyle.CIRCLE);
r.setFillBelowLine(false);
r.setFillPoints(true);
renderer.addSeriesRenderer(r);
setChartSettings(renderer);
return renderer;
}
Following method will set the settings for your chart. You can look for more options in docs provided by AChartEngine.
private void setChartSettings(XYMultipleSeriesRenderer renderer) {
renderer.setChartTitle("Chart demo");
renderer.setXTitle("x values");
renderer.setYTitle("y values");
renderer.setApplyBackgroundColor(false);
renderer.setRange(new double[] {0,6,-70,40});
renderer.setFitLegend(false);
renderer.setAxesColor(Color.BLACK);
renderer.setShowGrid(true);
renderer.setXAxisMin(0.5);
renderer.setXAxisMax(10.5);
renderer.setYAxisMin(0);
renderer.setZoomEnabled(false);
renderer.setYAxisMax(30);
}
You can now get the line chart in two ways:
Chart as a view which can be added to any layout:
ChartFactory.getLineChartView(this,
getDemoDataset(), getDemoRenderer());
Chart as an Intent for a new activity alltogether
ChartFactory.getLineChartIntent(this,
getDemoDataset(), getDemoRenderer());
PS: SERIES_NR is a constant which tells how many line series you want to draw.