I am trying out the GraphView Library for creating charts on Android. It looks quite decent, but I am wondering if there is a way to add some space between the tick labels and the graph itself. As you can see, there is basically none:
I use the following code to set up the graph (very similar to the example):
GraphView graph = (GraphView)view.findViewById(R.id.graph);
LineGraphSeries<DataPoint> series = new LineGraphSeries<DataPoint>(new DataPoint[] {
new DataPoint(0, 1),
new DataPoint(1, 5),
new DataPoint(2, 3)
});
graph.addSeries(series);
I tried using graph.getGridLabelRenderer().setPadding(), but that just added padding around the whole graph.
So, is there a way to put some padding around those labels?
yes it is possible in the current version in github (will be released in 4.0.1).
There is the method:
graph.getGridLabelRenderer().setLabelsSpace(x)
Follow this example to give your graph a custom label formatter. By doing so, you can at least add space padding to your y-axis labels (if not newline spacing to your x-axis labels).
// GraphView 4.x
graph.getGridLabelRenderer().setLabelFormatter(
new DefaultLabelFormatter() {
#Override
public String formatLabel(double value, boolean isValueX) {
if (isValueX) {
// show normal x values
return super.formatLabel(value, isValueX);
} else {
// show currency for y values
return super.formatLabel(value, isValueX) + " €";
}
}
}
);
I pulled this example from the GraphView documentation.
Otherwise, I found it interesting that someone chose this answer as the best response for a similar question.
Related
I work for my school project on MPAndroidChart especially a realtime graph, i would like to display Time of the value.
I set a IndexAxisValueFormatter with a "getFormattedValue", it work but refresh every label and not just the last, I try to have for each entry in my graph a XLabel who show the time, I really don't know how to do that you're help would be welcome.
Code for create an entry and display it :
void creaGraph() {
ArrayList<ILineDataSet> dataSets = new ArrayList<>();
if (boxCO2.isChecked()) {
A_CO2.add(new Entry(indice, listData.recup_data(indice - 1).getCO2()));
LineDataSet setCO2 = new LineDataSet(A_CO2, "CO2");
setCO2.setAxisDependency(YAxis.AxisDependency.LEFT);
paramSet(setCO2);
setCO2.setColor(Color.RED);
setCO2.setCircleColor(Color.RED);
dataSets.add(setCO2);
}
LineData data = new LineData(dataSets);
graph.setData(data);
data.notifyDataChanged();
graph.notifyDataSetChanged();
graph.invalidate();
}
The override of getFormattedValue
#Override
public String getFormattedValue(float value) {
return listData.recup_data(GraphPage.indice - 1).getTemps();
}
And a picture of my issue
Every label are refresh when a new entry come
Also, I see after the 7th values entry no longer have a time values
You never use value in getFormattedValue. The string you construct there should be based on value or it will show the same thing for every axis entry.
Something like this:
#Override
public String getFormattedValue(float value) {
return makeDateStringAt(value);
}
For example, if you have a chart with axis values at 0, 1, 2, 3 then getFormattedValue will be called 4 times with 0f, 1f, 1f, and 3f as its arguments and you should use those inputs to create the appropriate string to show at those positions on the axis.
1) I'm practicing stuff with graphs in order to add that feture to my app, I want the upper labels ( the xAxis base ) to be shown only where entries occur.
I haven't found a suitable solution online yet, and currently it appears on every xAxis from first entry to last entry as in the picture below:
I want it to be without the one sI deleted, as shown in the picture below:
2) and the second question I'm struggling with it is that I want to be able to draw for example in (x=5, y=7) and after it to draw at (x=1, y =3), but it wont let me add an entry with a smaller x that any other entry that already in the graph.
You have to extend from ValueFormatter class.
for more detail take a look at link
You can pick your desired logic to make the label disappear with returning "".
for example:
public String getFormattedValue(float value) {
if ((int)value <= 0) //your logic to evaluate correctness
return ""; // make lable go away
//...
}
UPDATE 2 (in Kotlin):
There is another overload for getFormattedValue which have a AxisBase parameter and you can use mEntryCount or mEntries.
override fun getFormattedValue(value: Float, axis: AxisBase?): String {
if (axis?.mEntryCount!! <= 0)
return ""
}
I am currently creating a map which updates based on users selection and displays 5 location closest to them. This works however when the user changes their selection the map updates and displays the 5 NEW locations as well as the 5 OLD locations.
I am not sure how to remove the old symbols.
public void displayResults(ArrayList allLocation) {
SymbolManager sm = new SymbolManager(mapView,map,styleMap);
sm.deleteAll();
SymList.clear();
sm.setIconAllowOverlap(true);
sm.setIconIgnorePlacement(true);
int count = 1;
for (LocationDetails a : allLocation
) {
// gets the distance from user to Location
double LocationLat = Double.parseDouble(a.getLatitude());
double LocationLng = Double.parseDouble(a.getLongitude());
float[] disResult = new float[1];
Location.distanceBetween(lat, lng, LocationLat, LocationLng, disResult);
results.append(count + ": " + a.getName() + " " + "\n");
distanceResults.append(Math.round(disResult[0]) + "m" + "\n");
SymbolOptions symbolOptions = new SymbolOptions()
.withLatLng(new LatLng(LocationLat, LocationLng))
.withIconImage("marker-11")
.withTextField(""+count)
.withIconColor("black")
.withIconSize(2.5f);
SymList.add(symbolOptions);
count++;
}
LatLngBounds latLngBounds = new LatLngBounds.Builder()
.include(SymList.get(0).getLatLng())
.include(SymList.get(1).getLatLng())
.include(SymList.get(2).getLatLng())
.include(SymList.get(3).getLatLng())
.include(SymList.get(4).getLatLng())
.build();
map.animateCamera(CameraUpdateFactory.newLatLngBounds(latLngBounds, 50), 2000);
for(SymbolOptions a : SymList){
sm.create(a);
}
SymList.clear();
}
I have been using mapbox for 3 months. After hours of research I discovered that on Android the only way to remove a Symbol or any element on the map was to reload all the elements from scratch. Unfortunately, there is currently no method to remove a single element.
So I suggest you create a container class in which to save your items.
If your use case only requires showing about five markers on the map at a time, it might be easier to use native sources and SymbolLayers rather than relying on the abstraction provided by the SymbolManager.
For example, this icon updates based on API response Android demo shows how to add a GeoJSON source and corresponding layer to the map, then update said source to get a different visual result. Basically all of the logic you will need is encapsulated here, but your GeoJSON will be a FeatureCollection of multiple (namely, 5) features rather than just one point.
So, you can set up your symbols similarly to how it's done in the linked example:
private void initSpaceStationSymbolLayer(#NonNull Style style) {
style.addImage("space-station-icon-id",
BitmapFactory.decodeResource(
this.getResources(), R.drawable.iss));
style.addSource(new GeoJsonSource("source-id"));
style.addLayer(new SymbolLayer("layer-id", "source-id").withProperties(
iconImage("space-station-icon-id"),
iconIgnorePlacement(true),
iconAllowOverlap(true),
iconSize(.7f)
));
}
, and then update the source's GeoJSON to the new locations closest to the user's position, similar to the updateMarkerPostion method:
private void updateMarkerPosition(LatLng position) {
// This method is where we update the marker position once we have new coordinates. First we
// check if this is the first time we are executing this handler, the best way to do this is
// check if marker is null;
if (map.getStyle() != null) {
GeoJsonSource spaceStationSource = map.getStyle().getSourceAs("source-id");
if (spaceStationSource != null) {
spaceStationSource.setGeoJson(FeatureCollection.fromFeature(
Feature.fromGeometry(Point.fromLngLat(position.getLongitude(), position.getLatitude()))));
}
}
// Lastly, animate the camera to the new position so the user
// wont have to search for the marker and then return.
map.animateCamera(CameraUpdateFactory.newLatLng(position));
}
A few modifications will need to be made, of course, but this option might be more direct for your implementation specifically.
So, my issue is this: I'm attempting to define a custom set of nodes for a Javafx XYChart LineChart, where each node corresponds to a point that was plotted directly from the datasets. After looking around a little bit, Jewlesea actually had a solution at one point about how to add dynamic labels to nodes on a linechart graph that gave me enough of a push in the right direction to create black symbols (they are dots at the moment, but they can be many different things). Now I have a requirement that requires me to change ONE of the nodes on the XY chart into an 'X'. this could be either through loading an image in place of the 'node', or through physically manipulating the 'shape' parameter in .css.
The problem begins when I try to add this property dynamically, since which node has the 'x' will always be changing. Here are the things I've tried, and they all end up with no results whatsoever, regardless of the property used.
private XYChart.Data datum( Double x, Double y )
{
final XYChart.Data data = new XYChart.Data(x, y);
data.setNode(
new HoveredThresholdNode(x, y));
//data.getNode().setStyle("-fx-background-image: url(\"redX.png\");");
data.getNode().styleProperty().bind(
new SimpleStringProperty("-fx-background-color: #0181e2;")
.concat("-fx-font-size: 20px;")
.concat("-fx-background-radius: 0;")
.concat("-fx-background-insets: 0;")
.concat("-fx-shape: \"M2,0 L5,4 L8,0 L10,0 L10,2 L6,5 L10,8 L10,10 L8,10 L5,6 L2,10 L0,10 L0,8 L4,5 L0,2 L0,0 Z\";")
);
data.getNode().toFront();
return data;
}
So in the above, you can see that this is adding a property through the use of the 'bind' function after the dataNode has already been created. Also note above, I tried doing it through the 'setStyle' interface at this level to give it a background image, with no success. Also, no errors are being thrown, no 'invalid css' or anything of the sort, just simply no display on the graph at all when done this way.
now, in the HoveredThresholdNode (Again a big thanks to Jewelsea for being a master of Javafx and putting this bit of code online, it's where 90% of this class came from.) I tried essentially the same thing, at a different level. (actually being IN the node creation class, as opposed to a layer above it).
class HoveredThresholdNode extends StackPane {
/**
*
* #param x the x value of our node (this gets passed around a bunch)
* #param y the y value of our node (also gets passed around a bunch)
*/
HoveredThresholdNode(Double x, Double y) {
//The preferred size of each node of the graph
//getStylesheets().add(getClass().getResource("style/XYChart.css").toExternalForm());
//getStyleClass().add("xyChart-Node");
//setOpacity(.8);
styleProperty().bind(
new SimpleStringProperty("-fx-background-color: #0181e2;")
.concat("-fx-font-size: 20px;")
.concat("-fx-background-radius: 0;")
.concat("-fx-background-insets: 0;")
.concat("-fx-shape: \"M2,0 L5,4 L8,0 L10,0 L10,2 L6,5 L10,8 L10,10 L8,10 L5,6 L2,10 L0,10 L0,8 L4,5 L0,2 L0,0 Z\";")
);
//this label is the 'tooltip' label for the graph.
final Label label = createDataThresholdLabel(x, y);
final double Myx = x;
final double Myy = y;
setOnMouseEntered(new EventHandler<MouseEvent>() {
#Override public void handle(MouseEvent mouseEvent) {
if (Myx == 0) {
label.setTextFill(Color.DARKGRAY);
} else if (Myx > 0) {
label.setTextFill(Color.SPRINGGREEN);
} else {
label.setTextFill(Color.FIREBRICK);
}
label.setText("Current position: " + Myx + " , " + Myy);
//setCursor(Cursor.NONE);
toFront();
}
});
setOnMouseExited(new EventHandler<MouseEvent>() {
#Override public void handle(MouseEvent mouseEvent) {
//getChildren().clear();
//setCursor(Cursor.CROSSHAIR);
}
});
}
Now note, I also tried the setStyle(java.lang.String) method, with all of the same type of CSS, with no success. I have NO idea why this isn't styling dynamically. It's almost as if the custom nodes are simply ignoring all new .css that I define at runtime?
Any help would be greatly appreciated, please don't be shy if you need more details or explanation on any points.
So, I did finally find a good workaround to solve my problem, although not in the way I thought it would happen. The main problem I was having, was that I was extending from stackPane to create my node, which only had a very small number of graphical display options available to it, and by switching the 'prefSize()' property, I was simply changing the size of that stackPane, and then filling in the background area of that stack pane black, giving it a very deceptive shape-look to it.
So rather than use a stack pane, whenever I reached the node that I needed to place the red 'X' on, I simply called a different Datum method that returned a datum with an ImageView Attached, like so:
private XYChart.Data CoLDatum(Double x, Double y){
final XYChart.Data data = new XYChart.Data(x, y);
ImageView myImage = new ImageView(new Image(getClass().getResource("style/redX.png").toExternalForm()));
data.setNode(myImage);
data.getNode().setOnMouseEntered(new EventHandler<MouseEvent>() {
#Override public void handle(MouseEvent mouseEvent) {
main_label.setText("Some Text.");
}
});
data.getNode().setOnMouseExited(new EventHandler<MouseEvent>(){
#Override public void handle(MouseEvent mouseEvent) {
main_label.setText("");
}
});
return data;
}
and since ImageView is an implementing class of Node, this worked out just fine, and allowed me to load up an image for that one single node in the graph, while still maintaining a listener to give custom text to our information label when the red 'x' was hovered over with a mouse. Sometimes, it's the simple solutions that slip right past you.
I imagine that, had I employed stackPane properties properly with the setStyle(java.lang.String) method, they would have absolutely shown up, and I was just butchering the nature of a stack pane. Interesting.
Hopefully this helps somebody else stuck with similar problems!
I am working on an android app and using AChartEngine for Charting. The Bar Chart is drawn on the basis of the dynamic data coming from a server.
Th Y-Axis labels are set to be shown from 0 to 100 and no of labels are 11 s it shows
0..10..20..30..40..60..70..80..90..100 as Y-Axis Labels. Is it possible to set custom Y-Axis labels such that it adds '%' sign after the Y-Axis title value so that it shows,
0%..10%..20%..30%..40%..60%..70%..80%..90%..100% as Y-Axis label values.
How to do it??
All what you need to do is: Enjoy ;)
renderer.addXTextLabel(0, "0");
renderer.addYTextLabel(10, "10%");
renderer.addYTextLabel(20, "20%");
renderer.addYTextLabel(30, "30%");
renderer.addYTextLabel(40, "40%");
renderer.addYTextLabel(50, "50%");
renderer.addYTextLabel(60, "60%");
renderer.addYTextLabel(70, "70%");
renderer.addYTextLabel(80, "80%");
renderer.addYTextLabel(90, "90%");
renderer.addYTextLabel(100, "100%");
renderer.setYLabels(0);
In order to set custom labels on the Y axis, you just need to use the following method:
mRenderer.addYTextLabel(10, "10%");
mRenderer.addYTextLabel(20, "20%");
...
Also, if you want to hide the default labels, do this:
mRenderer.setYLabels(0);
I haven't actually done a lot with AChartEngine, but a quick glance at the source code suggests you could extend BarChart to accomplish what you're after.
Have a look at the getLabel(double label) method located in AbstractChart (BarChart extends XYChart, which on its turn extends AbstractChart).
/**
* Makes sure the fraction digit is not displayed, if not needed.
*
* #param label the input label value
* #return the label without the useless fraction digit
*/
protected String getLabel(double label) {
String text = "";
if (label == Math.round(label)) {
text = Math.round(label) + "";
} else {
text = label + "";
}
return text;
}
I would start with something naive to see how that works out; e.g. simply append "%" on the result of above:
#Override protected String getLabel(double label) {
return super.getLabel(label) + "%";
}
Only thing I'm not too sure about is whether the same method is used to generate labels for the X-axis. If that's the case, you'll probably need to do something slightly smarter to enable it just for the axis you're interested in.