I have a list of color representing a color sequence. I want to apply the new color sequence to the piechart data.
private final int CASPIAN_COLOR_COUNTS = 8;
public void setPieChartColor(PieChart chart, List<String> colors) {
chart.getData().get(i); // for debug to get the node name (.data)
/**
* Set Pie color
*/
int i = 0;
for (String color : colors) {
final Node node = chart.lookup(".data" + i);
node.getStyleClass().remove("default-color" + (i % CASPIAN_COLOR_COUNTS));
node.getStyleClass().add(color);
i++;
}
but all chart data take Only one color from Caspian color.
You can achieve custom pie colors in code using a method such as:
private void applyCustomColorSequence(
ObservableList<PieChart.Data> pieChartData,
String... pieColors) {
int i = 0;
for (PieChart.Data data : pieChartData) {
data.getNode().setStyle(
"-fx-pie-color: " + pieColors[i % pieColors.length] + ";"
);
i++;
}
}
Note that the method must be applied after the chart has been shown on an active scene (otherwise the data.getNode() call will return null).
Here is some sample code which uses it.
You can accomplish the same effect using css stylesheets.
For example a css stylesheet containing the following style definitions will change the default colors of a pie chart when the stylesheet is applied against a given chart.
.default-color0.chart-pie { -fx-pie-color: #ffd700; }
.default-color1.chart-pie { -fx-pie-color: #ffa500; }
.default-color2.chart-pie { -fx-pie-color: #860061; }
.default-color3.chart-pie { -fx-pie-color: #adff2f; }
.default-color4.chart-pie { -fx-pie-color: #ff5700; }
For an example of the stylesheet based approach: see the "Setting Colors of a Pie Chart" section of the Styling Charts with CSS tutorial.
The stylesheet approach has an advantage that the styles are separated from the code. It has the disadvantage that the colors are must be set the time the stylesheet are created rather than at runtime and the color sequence is restricted to a fixed number of colors (8).
In general, the stylesheet approach is recommended for most applications.
The css styles might not work if your values are negative. This might be a bug but I had to convert my values to positive values for the styles to work. When the values were negative all pies were white in color.
Related
I'm developing NativeScript JavaScript code to create dynamic text marker for maps. I have the code working that creates a marker for a specific string. My next step is to take any given string, determine its height and width in bits, and create the marker sized to contain the text.
My problem is finding the size of the text, given the text string itself, the font size, and the font family.
It looks like getMeasuredWidth could work, except that the string must already be loaded on a page before that function will return a value. In my case, I simply need to compute the size; the text won't otherwise appear as such on a page (the text in the marker becomes an image).
Is there a way to do this?
var bmp = BitmapFactory.create(200);
bmp.dispose(function (b) {
try {
b.drawRect(
"100,34", // size
'0,0', // upper-left coordinate
KnownColors.Black, // border color
KnownColors.Cornsilk // fill color
);
b.writeText(
"Parking",
"2,25",
{ color: KnownColors.Black, size: 8, name: 'fontawesome-webfont', });
...
In the code above, the width of "100" of the bounding rectangle actually represents the bit width of "Parking" with a small amount of padding. What I want to does calculate the rectangle's height and width and not hard-code it.
Try this, finding label size without adding it to Page upon button click
export function onFindButtonTap(args: EventData) {
const button = <any>args.object;
const label = new Label();
label.text = "Hello, found my size?"
label.fontSize = 20;
(<any>label)._setupAsRootView(button._context);
label.onLoaded();
label.measure(0, 0);
console.log(`Width : ${label.getMeasuredWidth()} x Height : ${label.getMeasuredHeight()}`);
}
Playground Sample
Note: I didn't get a chance to test it with iOS yet, let me know if you hit any issues.
I have been using this example for my project, and it works really nice.
My question: Is it possible to offset the hovered node such that it does not overlay the underlying data point. The example centers the hovered node right over the "normal" node. It kind of gets in the way on a chart with a lot of data points.
A simple solution is to set a custom translation to the displayed Label. The following code is extracted from the example.
private Label createDataThresholdLabel(int priorValue, int value)
{
final Label label = new Label(value + "");
label.setTranslateY(-25); //Move label 25 pixels up
label.getStyleClass().addAll("default-color0", "chart-line-symbol", "chart-series-line");
label.setStyle("-fx-font-size: 20; -fx-font-weight: bold;");
if (priorValue == 0)
{
label.setTextFill(Color.DARKGRAY);
}
else if (value > priorValue)
{
label.setTextFill(Color.FORESTGREEN);
}
else
{
label.setTextFill(Color.FIREBRICK);
}
label.setMinSize(Label.USE_PREF_SIZE, Label.USE_PREF_SIZE);
return label;
}
I have a JavaFX app which contains a line chart. I want users to be able to select the color of each series in the chart. Since the selection is dynamic I can't use static CSS to set the colors. I also have other controls that I need to set to the same color as the associated series. It's possible to set the line color of a series dynamically using code like this:
series.getNode().setStyle("-fx-stroke: " + color + ";");
That works well and I can use the user-specified color on the associated controls.
My problem is that I also need to set the color of the symbols for each series to the same color. I can't find any way to do that dynamically. All of the tutorials, documentation, and posts that I've read on the topic point to the static CSS approach.
Most charting widgets make this sort of thing very easy to do, but I've found no clues here or on the Oracle forums. Any guidance would be greatly appreciated.
-- Update --
I've found no way to do this other than to enumerate every data point in every series, grab the associated symbol node and set the style individually. Not what I was hoping for. In the process I realized that the default Node allocated for a symbol is a StackPane. I didn't need that flexibility so I replaced it with a Rectangle. This made rendering faster.
I'm late to the game, but maybe someone can use my solution. What worked for me, was iterating through every item in the data series and setting the CSS style for each one.
for (int index = 0; index < series.getData().size(); index++) {
XYChart.Data dataPoint = series.getData().get(index);
Node lineSymbol = dataPoint.getNode().lookup(".chart-line-symbol");
lineSymbol.setStyle("-fx-background-color: #00ff00, #000000; -fx-background-insets: 0, 2;\n" +
" -fx-background-radius: 3px;\n" +
" -fx-padding: 3px;");
}
I was stuck with a similar problem. I don't know upfront which data is going to be added to the graph, so I can't make use of a fixed stylesheet.
I came up with this solution. This code listens for new series added to graph. For every added series, it will create a new listener for data added to the series.
This listener will look up which series this is, the 0th, 1st, etc and then find the two nodes for the coloring of the line and of the legend/symbol.
As soon as it has set both, it can unsubscribe.
Problem can be that the legend/symbol node is not available yet when you receive the callback on the first added datapoint.
I'm aware it's very convoluted and I'm open to hear improvements.
At least it will give you the option to dynamically set the color to anything you want.
final LineChart<Number, Number> chart = new LineChart<>(new NumberAxis(), new NumberAxis());
final ObservableList<Series<Number, Number>> series = chart.getData();
series.addListener(new ListChangeListener<Series<Number, Number>>() {
#Override
public void onChanged(Change<? extends Series<Number, Number>> change) {
ObservableList<? extends Series<Number, Number>> list = change.getList();
for (final Series<Number, Number> serie : list) {
serie.getData().addListener(new ListChangeListener<Data<Number, Number>>() {
#Override
public void onChanged(Change<? extends Data<Number, Number>> ignore) {
int index = series.indexOf(serie);
Set<Node> nodes = chart.lookupAll(".series" + index);
boolean isStyleSet = false;
for (Node n : nodes) {
if (StringUtils.isEmpty(n.getStyle())) {
String css = "-fx-stroke: %s; -fx-background-color: %s, white; ";
String color = //assign dynamically here, for instance based on the name of the series
n.setStyle(String.format(css, color, color));
isStyleSet = true;
}
}
if (!isStyleSet & nodes.size() > 1) {
serie.getData().removeListener(this);
}
}
});
}
}
});
I had a problem which might be slightly different (possibly more complex); I needed to style some nodes of a series one color, others within the same series another color (I also needed to be able to change the allocation of color dynamically). I am working in JavaFx 2.2; I have css-styling, but of course that does not help here. I could not find my issue addressed anywhere; this was the closest I've found.
I just want to say that I could not get "series.getNode().setStyle("-fx-stroke: " + color + ";")" to work. However, using "-fx-background" instead does work. I hope this helps someone.
I am developing a game app for blackberry where i want to place the buttons in a semi circle fashion on the home screen.....so far I have seen all the buttons being aligned either horizontally or vertically....is there any way out where we can place buttons at custom locations such as using a layout in android and hardcoding to place them in terms of pixels? Any help is greatly appreciated
thanks
You may do this by overriding sublayout in your field manager.
In the following example setPositionChild defines the X,Y position of the first field (field 0) added to this manager. To add additional fields increment the number in this.getField() and add the fields to hfm in the order you position them.
public HorizontalFieldManager testingXYPlacement() {
HorizontalFieldManager hfm = new HorizontalFieldManager() {
// Define the x,y, positions of the fields
protected void sublayout( int width, int height ) {
super.sublayout( width, height );
Field field = null;
field = this.getField(0);
if (field != null && equals(field.getManager())) {
setPositionChild(field, XPOS, YPOS);
}
setExtent( width, height);
}
};
hfm.add(new ButtonField("hello!"));
return hfm;
}
if you are used custom button than sometimes set margin is not working properly so used button.setpadding for place your desire location .please keep USEALLWIDTH for your Horizontal or Vertical layout
If your layout is a RelativeLayout you can position elements relative to other elements within the layout (or to the entire RelativeLayout). This directly lets you place views next to other views, and you can apply margins to offset the views from others.
The ComboBox text color is white even though I've set it to black in my theme. The text color of TextField is black as supposed to. How come the ComboBox text color isn't black?
The theme:
fgColor=FFFFFF
bgColor=000000
sel#fgColor=FFFFFF
sel#bgColor=EE8207
ComboBox.fgColor=000000
ComboBox.bgColor=FFFFFF
ComboBox.sel#fgColor=000000
ComboBox.sel#bgColor=FFFFFF
TextField.fgColor=000000
TextField.bgColor=FFFFFF
TextField.sel#fgColor=000000
TextField.sel#bgColor=FFFFFF
You can change the text color like this
Style selStyle = UIManager.getInstance().getComponentSelectedStyle("ComboBoxItem");
selStyle.setFgColor(0x00AF00); // Selected Item will be in green color
UIManager.getInstance().setComponentSelectedStyle("ComboBoxItem", selStyle);
Style unSelStyle = UIManager.getInstance().getComponentStyle("ComboBoxItem");
unSelStyle.setFgColor(0x000000); // Selected Item will be in black color
UIManager.getInstance().setComponentStyle("ComboBoxItem", unSelStyle);
This will work out!!
You should use hexColors: "0x000000" or "0xffffff"
You can also set the color in your app using following methods.
lwuit uses int's to set a color, to calculate the int use the following function.
public static int colorStringToInt(String hexColor) {
int color;
try {
color = Integer.parseInt(hexColor.substring(2), 16);
return color;
} catch (Exception ex) {
ex.printStackTrace();
return -1;//no negative colors
}
}
set the color like this.
int color = AppUtils.colorStringToInt("0xffffff");//white
if (color != -1) {
b.getStyle().setFgColor(color, true);
}
you can use like this,
ComboBoxItem.fgColor=000000
ComboBoxItem.sel#fgColor=ffffff
Are you using ResourceEdit. If u r not using means use the ResourceEdit and create the theme.