CODEWITHSUNDEEP
javafx-2
jpasqua
jpasqua

Reputation: 1

Dynamically selecting JavaFX LIneChart symbol colors

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.

Upvotes: 0

Views: 4408

Answers (3)

Rafał Rozmus
Rafał Rozmus

Reputation: 21

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;");
    }

Upvotes: 2

Karin Johnsgard
Karin Johnsgard

Reputation: 3

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.

Upvotes: 0

Steven Hulshof
Steven Hulshof

Reputation: 1

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);
                            }
                        }
                    });
                }
            }
        });

Upvotes: 0

Related Questions