I'm new to that library. I'm trying to Create the following plot:
Meanwhile I have the next one:
My questions: NOTE: The colors doesn't matters
How do I get rid of the black area (where was lables on range domain and title)
and center the plot (like in the first picture)
How to add ranges as in the first picture ? (x:[1-7] y:[0-4500])
Make the same grid as in the first picture
My code:
public class MainActivity extends Activity {
private XYPlot mySimpleXYPlot;
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Create a couple arrays of y-values to plot:
Number[] days = { 1 , 2 , 3 , 4 , 5 , 6 , 7 };
Number[] values = { 380, 1433, 1965, 3200, 3651, 3215, 3217 };
// initialize our XYPlot reference:
mySimpleXYPlot = (XYPlot) findViewById(R.id.mySimpleXYPlot);
mySimpleXYPlot.getBackgroundPaint().setColor(Color.WHITE);
mySimpleXYPlot.setBorderStyle(XYPlot.BorderStyle.NONE, null, null);
mySimpleXYPlot.getGraphWidget().getBackgroundPaint().setColor(Color.WHITE);
mySimpleXYPlot.getGraphWidget().getGridBackgroundPaint().setColor(Color.WHITE);
// Domain
mySimpleXYPlot.getGraphWidget().setDomainLabelPaint(null);
mySimpleXYPlot.getGraphWidget().setDomainOriginLinePaint(null);
mySimpleXYPlot.setDomainStep(XYStepMode.INCREMENT_BY_VAL, days.length);
mySimpleXYPlot.setDomainValueFormat(new DecimalFormat("0"));
//Range
mySimpleXYPlot.getGraphWidget().setRangeOriginLinePaint(null);
mySimpleXYPlot.setRangeStep(XYStepMode.SUBDIVIDE, values.length);
mySimpleXYPlot.setRangeValueFormat(new DecimalFormat("0"));
//Remove legend
mySimpleXYPlot.getLayoutManager().remove(mySimpleXYPlot.getLegendWidget());
mySimpleXYPlot.getLayoutManager().remove(mySimpleXYPlot.getDomainLabelWidget());
mySimpleXYPlot.getLayoutManager().remove(mySimpleXYPlot.getRangeLabelWidget());
mySimpleXYPlot.getLayoutManager().remove(mySimpleXYPlot.getTitleWidget());
// Turn the above arrays into XYSeries':
XYSeries series1 = new SimpleXYSeries(
Arrays.asList(days),
Arrays.asList(values),
"Series1"); // Set the display title of the series
// Create a formatter to use for drawing a series using LineAndPointRenderer:
LineAndPointFormatter series1Format = new LineAndPointFormatter(
Color.rgb(0, 200, 0), // line color
Color.rgb(0, 100, 0), // point color
Color.CYAN); // fill color
// setup our line fill paint to be a slightly transparent gradient:
Paint lineFill = new Paint();
lineFill.setAlpha(200);
lineFill.setShader(new LinearGradient(0, 0, 0, 250, Color.WHITE, Color.GREEN, Shader.TileMode.MIRROR));
series1Format.setFillPaint(lineFill);
// add a new series' to the xyplot:
mySimpleXYPlot.addSeries(series1, series1Format);
// by default, AndroidPlot displays developer guides to aid in laying out your plot.
// To get rid of them call disableAllMarkup():
mySimpleXYPlot.disableAllMarkup();
}
}
I hope this is helpful.
My code:
private XYPlot mySimpleXYPlot;
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// Create a couple arrays of y-values to plot:
Number[] days = { 1 , 2 , 3 , 4 , 5 , 6 , 7 };
Number[] values = { 380, 1433, 1965, 3200, 3651, 3215, 3217 };
// initialize our XYPlot reference:
mySimpleXYPlot = (XYPlot) findViewById(R.id.mySimpleXYPlot);
mySimpleXYPlot.setBorderStyle(Plot.BorderStyle.NONE, null, null);
mySimpleXYPlot.setPlotMargins(0, 0, 0, 0);
mySimpleXYPlot.setPlotPadding(0, 0, 0, 0);
mySimpleXYPlot.setGridPadding(0, 10, 5, 0);
mySimpleXYPlot.setBackgroundColor(Color.WHITE);
mySimpleXYPlot.position(
mySimpleXYPlot.getGraphWidget(),
0,
XLayoutStyle.ABSOLUTE_FROM_LEFT,
0,
YLayoutStyle.RELATIVE_TO_CENTER,
AnchorPosition.LEFT_MIDDLE);
mySimpleXYPlot.getGraphWidget().getBackgroundPaint().setColor(Color.WHITE);
mySimpleXYPlot.getGraphWidget().getGridBackgroundPaint().setColor(Color.WHITE);
mySimpleXYPlot.getGraphWidget().getDomainLabelPaint().setColor(Color.BLACK);
mySimpleXYPlot.getGraphWidget().getRangeLabelPaint().setColor(Color.BLACK);
mySimpleXYPlot.getGraphWidget().getDomainOriginLabelPaint().setColor(Color.BLACK);
mySimpleXYPlot.getGraphWidget().getDomainOriginLinePaint().setColor(Color.BLACK);
mySimpleXYPlot.getGraphWidget().getRangeOriginLinePaint().setColor(Color.BLACK);
// Domain
mySimpleXYPlot.setDomainStep(XYStepMode.INCREMENT_BY_VAL, days.length);
mySimpleXYPlot.setDomainValueFormat(new DecimalFormat("0"));
mySimpleXYPlot.setDomainStepValue(1);
//Range
mySimpleXYPlot.setRangeBoundaries(0, 4500, BoundaryMode.FIXED);
mySimpleXYPlot.setRangeStepValue(10);
//mySimpleXYPlot.setRangeStep(XYStepMode.SUBDIVIDE, values.length);
mySimpleXYPlot.setRangeValueFormat(new DecimalFormat("0"));
//Remove legend
mySimpleXYPlot.getLayoutManager().remove(mySimpleXYPlot.getLegendWidget());
mySimpleXYPlot.getLayoutManager().remove(mySimpleXYPlot.getDomainLabelWidget());
mySimpleXYPlot.getLayoutManager().remove(mySimpleXYPlot.getRangeLabelWidget());
mySimpleXYPlot.getLayoutManager().remove(mySimpleXYPlot.getTitleWidget());
// Turn the above arrays into XYSeries':
XYSeries series1 = new SimpleXYSeries(
Arrays.asList(days),
Arrays.asList(values),
"Series1"); // Set the display title of the series
// Create a formatter to use for drawing a series using LineAndPointRenderer:
LineAndPointFormatter series1Format = new LineAndPointFormatter(
Color.rgb(0, 200, 0), // line color
Color.rgb(0, 100, 0), // point color
Color.CYAN); // fill color
// setup our line fill paint to be a slightly transparent gradient:
Paint lineFill = new Paint();
lineFill.setAlpha(200);
lineFill.setShader(new LinearGradient(0, 0, 0, 250, Color.WHITE, Color.GREEN, Shader.TileMode.MIRROR));
series1Format.setFillPaint(lineFill);
// add a new series' to the xyplot:
mySimpleXYPlot.addSeries(series1, series1Format);
// by default, AndroidPlot displays developer guides to aid in laying out your plot.
// To get rid of them call disableAllMarkup():
mySimpleXYPlot.disableAllMarkup();
}
}
It will look like this:
In the latest version, instead of using
mySimpleXYPlot.position(
mySimpleXYPlot.getGraphWidget(),
0,
XLayoutStyle.ABSOLUTE_FROM_LEFT,
0,
YLayoutStyle.RELATIVE_TO_CENTER,
AnchorPosition.LEFT_MIDDLE);
it is to be used:
mySimpleXYPlot.getGraphWidget().setSize(new SizeMetrics(
0, SizeLayoutType.FILL,
0, SizeLayoutType.FILL));
This will eliminate the black area.
This will work for new Devices:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
plot.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}
// Create a formatter to use for drawing a series using LineAndPointRenderer:
LineAndPointFormatter series1Format = new LineAndPointFormatter(
Color.rgb(0, 200, 0), // line color
Color.rgb(0, 100, 0), // point color
Color.CYAN);
Argument is missing
It should be like this
// Create a formatter to use for drawing a series using LineAndPointRenderer:
LineAndPointFormatter series1Format = new LineAndPointFormatter(Color.rgb(0, 200, 0),Color.rgb(0, 100, 0),Color.CYAN, new PointLabelFormatter());
Related
Hi all I am just trying out a simple XY Plot with AndroidPlot. I am having trouble figuring out how to change the label colours for the domain and range. Examples online say to use:
plot.getGraphWidget().getDomainLabelPaint().setColor(my_colour);
plot.getDomainLabelWidget().getLabelPaint().setColor(my_colour);
However this does not compile for me. Can anyone suggest what I need to use? (I have also tried using getGraph() instead of getGraphWidget() )
I'm also trying to set margin space between the graph and domain labels, and also space between graph and range labels if anyone has a suggestion for that.
plot = (XYPlot) findViewById(R.id.plot);
plot.setPlotMargins(0, 0, 0, 0);
plot.getBackgroundPaint().setColor(Color.WHITE);
plot.setBorderStyle(XYPlot.BorderStyle.NONE, null, null);
plot.getGraph().getBackgroundPaint().setColor(Color.WHITE);
plot.getGraph().getGridBackgroundPaint().setColor(Color.WHITE);
plot.getGraph().getDomainOriginLinePaint().setColor(Color.TRANSPARENT);
plot.getGraph().getRangeOriginLinePaint().setColor(Color.TRANSPARENT);
// create a couple arrays of y-values to plot:
final Number[] domainLabels = {1, 10, 20, 6, 7, 8, 9, 10, 13, 14};
Number[] series1Numbers = {1, 4, 2, 8, 4, 16, 8, 32, 16, 64};
// turn the above arrays into XYSeries':
// (Y_VALS_ONLY means use the element index as the x value)
XYSeries series1 = new SimpleXYSeries(
Arrays.asList(series1Numbers), SimpleXYSeries.ArrayFormat.Y_VALS_ONLY, "Series1");
// create formatters to use for drawing a series using LineAndPointRenderer
// and configure them from xml:
LineAndPointFormatter series1Format = new LineAndPointFormatter();
series1Format.setPointLabelFormatter(new PointLabelFormatter());
series1Format.configure(getApplicationContext(),
R.xml.line_point_formatter_with_labels);
LineAndPointFormatter series2Format = new LineAndPointFormatter();
series2Format.setPointLabelFormatter(new PointLabelFormatter());
series2Format.configure(getApplicationContext(),
R.xml.line_point_formatter_with_labels_2);
// add an "dash" effect to the series2 line:
series2Format.getLinePaint().setPathEffect(
new DashPathEffect(new float[]{
// always use DP when specifying pixel sizes, to keep things consistent across devices:
PixelUtils.dpToPix(20),
PixelUtils.dpToPix(15)}, 0));
plot.addSeries(series1, series1Format);
plot.getGraph().getLineLabelStyle(XYGraphWidget.Edge.BOTTOM).setFormat(new Format() {
#Override
public StringBuffer format(Object obj, StringBuffer toAppendTo, FieldPosition pos) {
int i = Math.round(((Number) obj).floatValue());
return toAppendTo.append(domainLabels[i]);
}
#Override
public Object parseObject(String source, ParsePosition pos) {
return null;
}
});
Looks like you found the answer to your text color problem.
As far as adjusting the spacing between your graph and the domain / range labels, as of Androidplot 1.x that's controlled by the graph's line label insets. For example, to adjust the relative positioning of range labels on the left edge of the graph:
programmatically:
// move line labels away from the graph by 5dp:
plot.getGraph().getLineLabelInsets().setLeft(PixelUtils.dpToPix(-5));
xml param:
ap:lineLabelInsetLeft="-5dp"
I'm trying to draw a polygon with AndroidPlot library.
I'm successfully drawing the four points, but it draws only 3 sides of the polygon. (it's not closing the polygon)
The polygon should be filled. How can I achieve this?
Thanks!
Edit:
I'm firstly drawing a point and then the polygon, because I have to show if that point will be inside the polygon.
private XYPlot plot;
plot = (XYPlot) findViewById(R.id.graph);
seriesPointFormat = new LineAndPointFormatter(
null, // line color
Color.rgb(5, 100, 150), // point color
null, // fill color
new PointLabelFormatter());
float[] xTol = intent.getExtras().getFloatArray("tolerancesX");
float[] yTol = intent.getExtras().getFloatArray("tolerancesY");
Float[] xTolerances = new Float[xTol.length];
Float[] yTolerances = new Float[yTol.length];
for(int i = 0; i< xTol.length; i++)
xTolerances[i] = xTol[i];
for(int i = 0; i< yTol.length; i++)
yTolerances[i] = yTol[i];
//Example
x=0.35f;
y=0.65f;
//Turn the above arrays into XYSeries':
XYSeries seriesPoint = new SimpleXYSeries(
Arrays.asList(x),
Arrays.asList(y),
"point"); // Set the display title of the series
plot.getGraphWidget().setDomainValueFormat(new DecimalFormat("##.###"));
// add a new series' to the xyplot:
plot.addSeries(seriesPoint, seriesPointFormat);
XYSeries seriesPolygon = new SimpleXYSeries(
Arrays.asList(xTolerances),
Arrays.asList(yTolerances),
"Polygon");
LineAndPointFormatter seriesPolygonFormat = new LineAndPointFormatter(
Color.rgb(500, 0, 0), // line color
Color.rgb(500, 100, 0), // point color
null,
new PointLabelFormatter());
seriesPolygonFormat.getLinePaint().setStrokeWidth(2);
plot.addSeries(seriesPolygon, seriesPolygonFormat);
The answer is obvious, stupid me...(Facepalm)
You just have to add the first point at the end of the array.
Float[] xTolerances = new Float[xTol.length+1];
Float[] yTolerances = new Float[yTol.length+1];
for(int i = 0; i< xTol.length; i++)
xTolerances[i] = xTol[i];
//add here the first x coordinate at the end of the array
xTolerances[xTol.length] = xTol[0];
for(int i = 0; i< yTol.length; i++)
yTolerances[i] = yTol[i];
//add here the first x coordinate at the end of the array
yTolerances[yTol.length] = yTol[0];
And to fill in the polygon:
LineAndPointFormatter seriesPolygonFormat = new LineAndPointFormatter(
Color.rgb(500, 0, 0), // line color
Color.rgb(500, 100, 100), // point color
Color.argb(50, 200, 0, 0), //fill color with alpha, to make the fill transparent
new PointLabelFormatter());
I will not cancel the question, maybe will be useful to someone.
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 using achartengine with cubic line chart, but it doesnt seem to work. The cubic line chart doesnt pass through all the points in the series. In this example, the graph is far away from the points. What am I doing wrong, or is this an actual issue with achartengine?
Code:
XYMultipleSeriesDataset series = new XYMultipleSeriesDataset();
XYValueSeries newTicketSeries = new XYValueSeries("New Tickets");
newTicketSeries.add(1, 14);
newTicketSeries.add( 2, 12);
newTicketSeries.add(3, 18);
newTicketSeries.add( 4, 5);
newTicketSeries.add( 5, 10);
series.addSeries(newTicketSeries);
XYValueSeries fixedTicketSeries = new XYValueSeries("Fixed Tickets");
fixedTicketSeries.add( 1, 15);
fixedTicketSeries.add( 2, 5);
fixedTicketSeries.add( 3, 15);
fixedTicketSeries.add(4, 5);
fixedTicketSeries.add(5, 15);
series.addSeries(fixedTicketSeries);
XYMultipleSeriesRenderer renderer = new XYMultipleSeriesRenderer();
renderer.setAxisTitleTextSize(56);
renderer.setChartTitleTextSize(50);
renderer.setLabelsTextSize(55);
renderer.setZoomEnabled(true, false);
renderer.setPanEnabled(false, false);
renderer.setRange(new double[]{0, 10, 0, 20});
//renderer.setMargins(new int[] { 20, 30, 15, 0 });
XYSeriesRenderer newTicketRenderer = new XYSeriesRenderer();
newTicketRenderer.setColor(Color.argb(250, 0, 210, 250));
renderer.addSeriesRenderer(newTicketRenderer);
XYSeriesRenderer fixedTicketRenderer = new XYSeriesRenderer();
fixedTicketRenderer.setColor(Color.RED);
fixedTicketRenderer.setLineWidth(10);
fixedTicketRenderer.setPointStyle(PointStyle.CIRCLE);
fixedTicketRenderer.setFillPoints(true);
renderer.addSeriesRenderer(fixedTicketRenderer);
renderer.setPointSize(40);
renderer.setXLabels(0);
renderer.setYLabels(0);
newTicketRenderer.setDisplayChartValues(true);
newTicketRenderer.setChartValuesTextSize(30);
renderer.setShowGrid(false);
renderer.setShowLegend(true);
renderer.setShowLabels(false);
renderer.setBarSpacing(0.5);
renderer.setBackgroundColor(Color.TRANSPARENT);
renderer.setMarginsColor(Color.argb(0x00, 0x01, 0x01, 0x01));
//renderer.setZoomEnabled(false, false);
GraphicalView chartView;
String[] types = new String[] { BarChart.TYPE, CubicLineChart.TYPE};
chartView = ChartFactory.getCombinedXYChartView(getActivity(), series, renderer, types);
This was a bug, indeed. I checked in a fix in the SVN. You can download a version including this fix here.
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.