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"
Related
I have a program android use graph view but default label graph view using int number like 1, 2 or 3. I wanna change the label from 1, 2, 3 to A, B, C horizontal label like this http://prntscr.com/bwxclx
My code like this
GraphView bar_graph = (GraphView) findViewById(R.id.graph);
BarGraphSeries<DataPoint> bar_series = new BarGraphSeries<DataPoint>(new DataPoint[] {
new DataPoint(0, 0),
new DataPoint(1, 7), // 1st war
new DataPoint(1.5, 0),
new DataPoint(2, 5), // 2nd war
new DataPoint(2.5, 0),
new DataPoint(3, 8), // 3rd war
new DataPoint(3.5, 0),
new DataPoint(4, 0)
});
Anyone can help me how to change label 1, 2, 3 to A, B, C
You can set labels statically using StaticLabelsFormatter().
In my case below, the "plotArrayX" is an array containing the values I want. They can be text, numbers or empty.
I've used it to generate timestamps set at.
The code below is kotlin, but it's quite simlar to java.
val staticLabelsFormatter = StaticLabelsFormatter(graph)
staticLabelsFormatter.setHorizontalLabels(plotArrayX)
graph.getGridLabelRenderer().setLabelFormatter(staticLabelsFormatter)
my actual X axis datapoints are just an incremented integer. The labels are then automatically exchanged with the static ones in the final view.
I'm a bit stuck here. I have a graph but next to the graph I would love to put a textview.
The textView should get my records straight from the database and add a colour code to it.
(For now a simple for loop will do)
I've got to the point that the pie chart gets drawn and a textview next to the pie chart shows all strings printed (which is now test + the number from the array)
protected void createPiechart(){
Number[] seriesOfNumbers = { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 };
int teller = 0, teller2 = 0;
String text= "";
PieGraph pg = (PieGraph) findViewById(R.id.piegraph);
for (teller = 0; teller < seriesOfNumbers.length;) {
//Random colors in the whole range
Random randomFullRange = new Random();
int color = Color.argb(255, randomFullRange.nextInt(256), randomFullRange.nextInt(256), randomFullRange.nextInt(256));
teller2 = 100 + (15 * teller);
seriesOfNumbers[teller] = teller;
PieSlice slice = new PieSlice();
//Random colors only in green tints.
//Random rnd = new Random();
//int color = Color.argb(255, 0, teller2, 0);
slice.setColor(color);
slice.setValue(teller);
slice.setTitle("test");
pg.addSlice(slice);
text += "test " + teller + "\n";
teller++;
}
TextView textPieGraph = (TextView) findViewById(R.id.textPieGraph);
textPieGraph.setText(text);
}
Now I would like to add the colour that the pieslice has in the textview in some sort of bitmap (lets say 20px*20px)
Which would give
Bitmap Categoryname1
Bitmap2 Categoryname2
... etc etc.
Now how could I add bitmaps to it dynamically with the same colours of my int color value?
I'd love a colour coded list with the text.
Thanks
Yenthe
You could set the background of the textview to the color or add a bitmap behind the text.
textPieGraph.setBackgroundColor(Color.blahblah);
If you wanted it beside it (which might be easier for the user) in a smaller form you could add a linearlayout horizontal around the textview and put a small view beside it and color the background in it. This way there could be the color square beside the text.
I'm trying to make a BarChart using achartengine, but so far, I haven't been able to get rid of the following effect : bar width is only correctly displayed when values are on the edge of the screen, but at startup, bars are much bigger and sometimes even hide the bar's value. Could this have something to do with my data set not being a continued serie of x values ? I have one point at x=17 then then next value is at x=24, and it seems the changing bar width happens between these 2 values. Can someone assist in making this graph look good ?
Thanks in advance for your help !
[The graph being shown on fragment's start]
[The graph being shown when scrolling to the left]
CODE TO MAKE THE GRAPH :
XYSeries xySerie = new XYSeries("Climb Level Statistics");
XYSeriesRenderer serieRenderer;
XYMultipleSeriesDataset mDataset = new XYMultipleSeriesDataset();
XYMultipleSeriesRenderer mRenderer = new XYMultipleSeriesRenderer();
//Adding data to XYSerie and adding XYSerie to mDataset
//stats is an int[] containing level id, value for the level, level id, ...
//example of dataset used for image shown above: {17, 4, 24, 3, 25, 7, 26, 10, 27, 4}
int statsSize = stats.size();
double routeLevel;
double climbsQuantity;
for (int counter = 0; counter<statsSize; counter++){
routeLevel = stats.get(counter);
counter++;
climbsQuantity = stats.get(counter);
xySerie.add(routeLevel, climbsQuantity);
}
mDataset.addSeries(xySerie);
//Setting series renderer properties and adding it to the mRenderer
serieRenderer = new XYSeriesRenderer();
serieRenderer.setChartValuesTextSize(28);
serieRenderer.setDisplayChartValues(true);
mRenderer.addSeriesRenderer(serieRenderer);
//Setting main renderer properties
mRenderer.setApplyBackgroundColor(true);
mRenderer.setMarginsColor(Color.argb(0x00, 0x01, 0x01, 0x01));
mRenderer.setBackgroundColor(Color.TRANSPARENT);
mRenderer.setLabelsTextSize(15);
mRenderer.setMargins(new int[] { 30, 30, 30, 30 });
mRenderer.setZoomButtonsVisible(false);
mRenderer.setPanLimits(new double[]{0,48, 0, 5000});
mRenderer.setBarSpacing(1.5);
mRenderer.setLabelsTextSize(28);
mRenderer.setLabelsColor(Color.BLACK);
mRenderer.setXLabels(0);
mRenderer.setXLabelsColor(Color.BLACK);
String[] routeLevels = context.getResources().getStringArray(R.array.route_levels);
int routeLevelsSize = routeLevels.length;
for (int x=1;x<routeLevelsSize+1;x++){
mRenderer.addXTextLabel(x, routeLevels[x-1]);
}
mRenderer.setYLabels(0);
mRenderer.setYAxisMin(0);
mRenderer.setShowLegend(false);
mRenderer.setZoomEnabled(false);
mRenderer.setZoomEnabled(false, false);
mRenderer.setPanEnabled(true, false);
GraphicalView graphView = ChartFactory.getBarChartView(context, mDataset, mRenderer, BarChart.Type.STACKED);
graphView.setBackgroundColor(Color.argb(255, 247, 247, 247));
I was able to resolve the changing bar width issue by ensuring the serie was a "perfect" suite for x values, changing
this : {17, 4, 24, 3, 25, 7, 26, 10, 27, 4}
to this : {17, 4, 18, 0, 19, 0, 20, 0, 21, 0, 22, 0, 23, 0, 24, 3, 25, 7, 26, 10, 27, 4}
To achieve that, I modified my first for loop to check for missing x values :
for (int x = 0; x<statsSize; x++){
routeLevel = currentLevel;
x++;
currentLevel++;
climbsQuantity = stats.get(x);
xySerie.add(routeLevel, climbsQuantity);
//if not at the last x/y couple of the array, fill the blanks in the serie
if (x<statsSize-1){
while (stats.get(x+1)>currentLevel){
routeLevel = currentLevel;
climbsQuantity = 0;
xySerie.add(routeLevel, climbsQuantity);
currentLevel++;
}
}
}
Now the bar width doesn't change at all when I scroll. This is more a workaround, though, because now the "filling" couples I added are all showing 0 as value, which I find a bit odd. If I find a way to hide these 0 values, I'll edit my answer...
CURRENT APPEARANCE OF THE GRAPH
First of all, you can set the visible area by changing the X axis min and max:
renderer.setXAxisMin(min);
renderer.setXAxisMax(max);
For changing the bars width, you have a few options.
If your dataset contain more than one element per series then I suggest you use renderer.setBarSpacing().
If there is only one element in your series then you can use renderer.setBarWidth().
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());
I have constructed a TimeChart graph in my app. But while showing dates on the x-axis it shows a problem. The code I have used while designing a chart using renderer is shown below along with the screenshot. If anyone knows why this problem arises please help me to solve this out.
Code:
Calendar pCalendar_FirstDay = Calendar.getInstance();
int nMinDay = pCalendar_FirstDay.getActualMinimum(Calendar.DATE);
Date currentDate = pCalendar_FirstDay.getTime();
renderer = new XYMultipleSeriesRenderer();
//set value for x axis
renderer.setChartTitle("Weight / Temperature");
renderer.setXLabels(15);
renderer.setXAxisMin(new Date(currentDate.getYear(), currentDate.getMonth(), nMinDay).getTime());
renderer.setXAxisMax(currentDate.getTime());
renderer.setXLabelsAlign(Align.CENTER);
//set value for y axis
renderer.setYLabels(10);
renderer.setYTitle("Weight", 0);
renderer.setYAxisMin(10, 0);
renderer.setYAxisMax(90, 0);
renderer.setYAxisAlign(Align.LEFT, 0);
renderer.setYLabelsAlign(Align.LEFT, 0);
renderer.setPanLimits(new double[]{0,currentDate.getTime(), 10, 90});
renderer.setAxisTitleTextSize(12);
renderer.setChartTitleTextSize(12);
renderer.setLabelsTextSize(10);
renderer.setLegendTextSize(12);
renderer.setPointSize(5f);
renderer.setApplyBackgroundColor(true);
renderer.setBackgroundColor(Color.parseColor("#F5F5F5"));
renderer.setMarginsColor(Color.parseColor("#F5F5F5"));
renderer.setAxesColor(Color.LTGRAY);
renderer.setLabelsColor(Color.parseColor("#5f5f5f"));
renderer.setShowGrid(true);
renderer.setGridColor(Color.GRAY);
The output I got
The output I want is
From your APIs, I presume you are using AChartEngine.
How did you build the TimeChart instance?
You should be doing something like this:
ChartFactory.getTimeChartIntent(context, dataset, renderer, pattern);
where pattern is a date formatting format which you should tweak for getting the desired display.