Develop Reference

Barchart as TableRow in JavaFX

I would like to add such kind of bar chart to my application using JavaFX:
Essentially: A (potentially large, i.e. up to 50 entries) table. For each row there are several columns with information. One piece of information are percentages about win/draw/loss ratio, i.e. say three numbers 10%, 50%, 40%. I would like to display these three percentages graphically as a vertical bar, with three different colors. So that a user can get a visual impression of each of these percentages.
I have not found a simple or straight-forward method of doing that with JavaFX. There seems at least no control for that right now. I also could not find a control from ControlsFX that seemd suitable. What I am curently doing is having the information itself, and three columns for the percentages like this:
Option Win Draw Loss
============================
option1 10% 50% 40%
option2 20% 70% 10%
option3 ...
But that's just not so nice. How can I achieve the above mentioned graphical kind of display?
(added an image for better understanding; it's from the lichess.org where they do exactly that in html)

This uses a combination of trashgod's and James_D's ideas:
a TableView with a custom cell factory and graphic,
The graphic could just be three appropriately-styled labels in a single-row grid pane with column constraints set.
Other than that, it is a standard table view implementation.
Numbers in my example don't always add up to 100% due to rounding, so you may wish to do something about that, if so, I leave that up to you.
import javafx.application.Application;
import javafx.beans.property.*;
import javafx.collections.*;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;
import java.text.NumberFormat;
import java.util.Arrays;
public class ChartTableApp extends Application {
private final ObservableList<Outcomes> outcomes = FXCollections.observableList(
Arrays.asList(
new Outcomes("Qxd5", 5722, 5722, 3646),
new Outcomes("Kf6", 2727, 2262, 1597),
new Outcomes("c6", 11, 1, 5),
new Outcomes("e6", 0, 1, 1)
)
);
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage stage) {
stage.setScene(new Scene(createOutcomesTableView()));
stage.show();
}
private TableView<Outcomes> createOutcomesTableView() {
final TableView<Outcomes> outcomesTable = new TableView<>(outcomes);
TableColumn<Outcomes, String> moveCol = new TableColumn<>("Move");
moveCol.setCellValueFactory(o ->
new SimpleStringProperty(o.getValue().move())
);
TableColumn<Outcomes, Integer> totalCol = new TableColumn<>("Total");
totalCol.setCellValueFactory(o ->
new SimpleIntegerProperty(o.getValue().total()).asObject()
);
totalCol.setCellFactory(p ->
new IntegerCell()
);
totalCol.setStyle("-fx-alignment: BASELINE_RIGHT;");
TableColumn<Outcomes, Outcomes> outcomesCol = new TableColumn<>("Outcomes");
outcomesCol.setCellValueFactory(o ->
new SimpleObjectProperty<>(o.getValue())
);
outcomesCol.setCellFactory(p ->
new OutcomesCell()
);
//noinspection unchecked
outcomesTable.getColumns().addAll(
moveCol,
totalCol,
outcomesCol
);
outcomesTable.setPrefSize(450, 150);
return outcomesTable;
}
public record Outcomes(String move, int wins, int draws, int losses) {
public int total() { return wins + draws + losses; }
public double winPercent() { return percent(wins); }
public double drawPercent() { return percent(draws); }
public double lossPercent() { return percent(losses); }
private double percent(int value) { return value * 100.0 / total(); }
}
private static class OutcomesCell extends TableCell<Outcomes, Outcomes> {
OutcomesBar bar = new OutcomesBar();
#Override
protected void updateItem(Outcomes item, boolean empty) {
super.updateItem(item, empty);
if (empty || item == null) {
setText(null);
setGraphic(null);
} else {
bar.setOutcomes(item);
setGraphic(bar);
}
}
}
private static class OutcomesBar extends GridPane {
private final Label winsLabel = new Label();
private final Label drawsLabel = new Label();
private final Label lossesLabel = new Label();
private final ColumnConstraints winsColConstraints = new ColumnConstraints();
private final ColumnConstraints drawsColConstraints = new ColumnConstraints();
private final ColumnConstraints lossesColConstraints = new ColumnConstraints();
public OutcomesBar() {
winsLabel.setStyle("-fx-background-color : lightgray");
drawsLabel.setStyle("-fx-background-color : darkgray");
lossesLabel.setStyle("-fx-background-color : gray");
winsLabel.setAlignment(Pos.CENTER);
drawsLabel.setAlignment(Pos.CENTER);
lossesLabel.setAlignment(Pos.CENTER);
winsLabel.setMaxWidth(Double.MAX_VALUE);
drawsLabel.setMaxWidth(Double.MAX_VALUE);
lossesLabel.setMaxWidth(Double.MAX_VALUE);
addRow(0, winsLabel, drawsLabel, lossesLabel);
getColumnConstraints().addAll(
winsColConstraints,
drawsColConstraints,
lossesColConstraints
);
}
public void setOutcomes(Outcomes outcomes) {
winsLabel.setText((int) outcomes.winPercent() + "%");
drawsLabel.setText((int) outcomes.drawPercent() + "%");
lossesLabel.setText((int) outcomes.lossPercent() + "%");
winsColConstraints.setPercentWidth(outcomes.winPercent());
drawsColConstraints.setPercentWidth(outcomes.drawPercent());
lossesColConstraints.setPercentWidth(outcomes.lossPercent());
}
}
private static class IntegerCell extends TableCell<Outcomes, Integer> {
#Override
protected void updateItem(Integer item, boolean empty) {
super.updateItem(item, empty);
if (empty || item == null) {
setText(null);
} else {
setText(
NumberFormat.getNumberInstance().format(
item
)
);
}
}
}
}

Infinite JavaFX coordinate system pane

I need to write a custom pane that behaves like an infinite two-dimensional cartesian coordinate system. When first showing I want 0,0 to be in the center of the pane. The user should be able to navigate the pane by holding down the left mouse button and dragging. It needs to have the ability to zoom in and out. I also have to be able to place nodes at specific coordinates.
Of course I am aware that this is a very specific control and I am not asking anyone to give me step-by-step instructions or write it for me.
I am just new to the world of JFX custom controls and don't know how to approach this problem, especially the whole infinity thing.

This is not so difficult to achieve as you may think. Just start with a simple Pane. That already gives you the infinte coordinate system. The only difference from your requirement is that the point 0/0 is in the upper left corner and not in the middle. This can be fixed by applying a translate transform to the pane. Zooming and panning can then be achieved in a similar way by adding the corresponding mouse listeners to the Pane.

One approach is to render arbitrary content in a Canvas, as suggested here. The corresponding GraphicsContext gives you maximum control of the coordinates. As a concrete example, jfreechart renders charts using jfreechart-fx, whose ChartViewer holds a ChartCanvas that extends Canvas. Starting from this example, the variation below sets the domain axis to span an interval centered on zero after adding corresponding points to the three series. Use the mouse wheel or context menu to zoom; see this related answer for more on zooming and panning.
for (double t = -3; t <= 3; t += 0.5) {
series.add(t, Math.sin(t) + i);
}
…
xAxis.setRange(-Math.PI, Math.PI);
…
plot.setDomainPannable(true);
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.axis.NumberAxis;
import org.jfree.chart.entity.ChartEntity;
import org.jfree.chart.entity.LegendItemEntity;
import org.jfree.chart.entity.XYItemEntity;
import org.jfree.chart.fx.ChartViewer;
import org.jfree.chart.fx.interaction.ChartMouseEventFX;
import org.jfree.chart.fx.interaction.ChartMouseListenerFX;
import org.jfree.chart.labels.StandardXYToolTipGenerator;
import org.jfree.chart.plot.XYPlot;
import org.jfree.chart.renderer.xy.XYLineAndShapeRenderer;
import org.jfree.data.xy.XYSeries;
import org.jfree.data.xy.XYSeriesCollection;
/**
* #see https://stackoverflow.com/a/44967809/230513
* #see https://stackoverflow.com/a/43286042/230513
*/
public class VisibleTest extends Application {
#Override
public void start(Stage stage) {
XYSeriesCollection dataset = new XYSeriesCollection();
for (int i = 0; i < 3; i++) {
XYSeries series = new XYSeries("value" + i);
for (double t = -3; t <= 3; t += 0.5) {
series.add(t, Math.sin(t) + i);
}
dataset.addSeries(series);
}
NumberAxis xAxis = new NumberAxis("domain");
xAxis.setRange(-Math.PI, Math.PI);
NumberAxis yAxis = new NumberAxis("range");
XYLineAndShapeRenderer renderer = new XYLineAndShapeRenderer(true, true);
renderer.setBaseToolTipGenerator(new StandardXYToolTipGenerator());
XYPlot plot = new XYPlot(dataset, xAxis, yAxis, renderer);
JFreeChart chart = new JFreeChart("Test", plot);
ChartViewer viewer = new ChartViewer(chart);
viewer.addChartMouseListener(new ChartMouseListenerFX() {
#Override
public void chartMouseClicked(ChartMouseEventFX e) {
ChartEntity ce = e.getEntity();
if (ce instanceof XYItemEntity) {
XYItemEntity item = (XYItemEntity) ce;
renderer.setSeriesVisible(item.getSeriesIndex(), false);
} else if (ce instanceof LegendItemEntity) {
LegendItemEntity item = (LegendItemEntity) ce;
Comparable key = item.getSeriesKey();
renderer.setSeriesVisible(dataset.getSeriesIndex(key), false);
} else {
for (int i = 0; i < dataset.getSeriesCount(); i++) {
renderer.setSeriesVisible(i, true);
}
}
}
#Override
public void chartMouseMoved(ChartMouseEventFX e) {}
});
stage.setScene(new Scene(viewer));
stage.setTitle("JFreeChartFX");
stage.setWidth(640);
stage.setHeight(480);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}

How to retrieve the final Slider value when snapToTicks==true?

I have the following JavaFX scene (note the setting of snapToTicks):
package com.example.javafx;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Slider;
import javafx.stage.Stage;
public class SliderExample extends Application {
public static void main(String[] args) { launch(args); }
#Override
public void start(Stage primaryStage) {
Slider slider = new Slider(0.25, 2.0, 1.0);
slider.setShowTickLabels(true);
slider.setShowTickMarks(true);
slider.setMajorTickUnit(0.25);
slider.setMinorTickCount(0);
slider.setSnapToTicks(true); // !!!!!!!!!!
Scene scene = new Scene(slider, 800, 600);
primaryStage.setScene(scene);
primaryStage.show();
}
}
which renders a slider like this:
Since snapToTicks is set to true the slider will finally move to the nearest value once the mouse button is released.
How can that final value be retrieved?
I tried
slider.valueProperty().addListener( n -> {
if (!slider.isValueChanging()) {
System.err.println(n);
}
});
which works well except for the minimum and maximum values - if the mouse is already at a position left to the slider or at a position right to the slider, the listener will not be called at all anymore since the final value has already been set.
I have also tried to use the valueChangingProperty:
slider.valueChangingProperty().addListener( (prop, oldVal, newVal) -> {
// NOT the final value when newVal == false!!!!!!!
System.err.println(prop + "/" + oldVal + "/" + newVal);
});
but the problem is that JavaFX will still change the value to the snapped value after that listener has been called with newVal equal to false (which I would even consider a bug, but probably I missed something). So its not possible to access the final, snapped value in that method.

I finally came up with the below solution, based on the proposal from #ItachiUchiha. Essentially, the solution uses both, a valueProperty and a valueChangingProperty listener, and uses some flags to track the current state. At the end, the perform() method is called exactly once when the slider movement is done and the final value is available. This works when the slider is moved either with the mouse or through the keyboard.
A reusable class implemented as subclass of Slider is available at https://github.com/afester/FranzXaver/blob/master/FranzXaver/src/main/java/afester/javafx/components/SnapSlider.java.
package com.example.javafx;
import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.scene.Scene;
import javafx.scene.control.Slider;
import javafx.stage.Stage;
public class SliderExample extends Application {
public static void main(String[] args) { launch(args); }
private boolean isFinal = true; // assumption: no dragging - clicked value is the final one.
// variable changes to "false" once dragging starts.
private Double finalValue = null;
#Override
public void start(Stage primaryStage) {
final Slider slider = new Slider(0.25, 2.0, 1.0);
slider.setShowTickLabels(true);
slider.setShowTickMarks(true);
slider.setMajorTickUnit(0.25);
slider.setMinorTickCount(0);
slider.setSnapToTicks(true);
slider.valueProperty().addListener(new ChangeListener<Number>() {
final double minCompare = slider.getMin() + Math.ulp(slider.getMin());
final double maxCompare = slider.getMax() - Math.ulp(slider.getMax());
#Override
public void changed(ObservableValue<? extends Number> observable,
Number oldValue, Number newValue) {
if (isFinal) { // either dragging of knob has stopped or
// no dragging was done at all (direct click or
// keyboard navigation)
perform((Double) newValue);
finalValue = null;
} else { // dragging in progress
double val = (double) newValue;
if (val > maxCompare || val < minCompare) {
isFinal = true; // current value will be treated as final value
// once the valueChangingProperty goes to false
finalValue = (Double) newValue; // remember current value
} else {
isFinal = false; // no final value anymore - slider
finalValue = null; // has been dragged to a position within
// minimum and maximum
}
}
}
});
slider.valueChangingProperty().addListener(new ChangeListener<Boolean>() {
#Override
public void changed(ObservableValue<? extends Boolean> observable,
Boolean oldValue, Boolean newValue) {
if (newValue == true) { // dragging of knob started.
isFinal = false; // captured values are not the final ones.
} else { // dragging of knob stopped.
if (isFinal) { // captured value is already the final one
// since it is either the minimum or the maximum value
perform(finalValue);
finalValue = null;
} else {
isFinal = true; // next captured value will be the final one
}
}
}
});
Scene scene = new Scene(slider, 800, 600);
primaryStage.setScene(scene);
primaryStage.show();
}
private void perform(double value) {
System.err.printf("FINAL: %s\n", value);
}
}

JavaFX Pass MouseEvents through Transparent Node to Children

In the java doc it says for setMouseTransparent that is affects all children as well as the parent.
How can it be made so only the parent's transparent areas (can see other nodes below it but not responding to mouse events) are transparent to mouse events so that the nodes below it may receive them.
This happens when stacking two XYCharts in the same pane. Only the last one added can receive events.

Set pickOnBounds for the relevant nodes to false, then clicking on transparent areas in a node won't register a click with that node.
Defines how the picking computation is done for this node when triggered by a MouseEvent or a contains function call. If pickOnBounds is true, then picking is computed by intersecting with the bounds of this node, else picking is computed by intersecting with the geometric shape of this node.
Sample Output
This sample is actually far more complicated than is necessary to demonstrate the pickOnBounds function - but I just did something this complicated so that it shows what happens "when stacking two XYCharts in the same pane" as mentioned in the poster's question.
In the sample below two line charts are stacked on top of each other and the mouse is moved over the data line in one chart which has a glow function attached to it's mouseenter event. The mouse is then moved off of the first line chart data and the glow is removed from it. The mouse is then placed over the second line chart data of an underlying stacked chart and the glow is added to that linechart in the underlying stacked chart.
This sample was developed using Java8 and the coloring and behaviour described is what I exeperienced running the program on Mac OS X and Java 8b91.
Sample Code
The code below is just for demonstrating that pickOnBounds does work for allowing you to pass mouse events through transparent regions stacked on top of opaque node shapes. It is not a recommended code practice to follow for styling lines in charts (you are better off using style sheets than lookups for that), it is also not necessary that you use a line chart stack to get multiple series on a single chart - it was only necessary or simpler to do these things to demonstrate the pick on bounds concept application for this answer.
Note the recursive call to set the pickOnBounds property for the charts after the charts have been shown on a stage and all of their requisite nodes created.
Sample code is an adaption of JavaFX 2 XYChart.Series and setOnMouseEntered:
import javafx.application.Application;
import javafx.collections.*;
import javafx.event.EventHandler;
import javafx.scene.*;
import javafx.scene.chart.*;
import javafx.scene.effect.Glow;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.StackPane;
import javafx.scene.shape.Path;
import javafx.stage.Stage;
public class LineChartSample extends Application {
#SuppressWarnings("unchecked")
#Override public void start(Stage stage) {
// initialize data
ObservableList<XYChart.Data> data = FXCollections.observableArrayList(
new XYChart.Data(1, 23),new XYChart.Data(2, 14),new XYChart.Data(3, 15),new XYChart.Data(4, 24),new XYChart.Data(5, 34),new XYChart.Data(6, 36),new XYChart.Data(7, 22),new XYChart.Data(8, 45),new XYChart.Data(9, 43),new XYChart.Data(10, 17),new XYChart.Data(11, 29),new XYChart.Data(12, 25)
);
ObservableList<XYChart.Data> reversedData = FXCollections.observableArrayList(
new XYChart.Data(1, 25), new XYChart.Data(2, 29), new XYChart.Data(3, 17), new XYChart.Data(4, 43), new XYChart.Data(5, 45), new XYChart.Data(6, 22), new XYChart.Data(7, 36), new XYChart.Data(8, 34), new XYChart.Data(9, 24), new XYChart.Data(10, 15), new XYChart.Data(11, 14), new XYChart.Data(12, 23)
);
// create charts
final LineChart<Number, Number> lineChart = createChart(data);
final LineChart<Number, Number> reverseLineChart = createChart(reversedData);
StackPane layout = new StackPane();
layout.getChildren().setAll(
lineChart,
reverseLineChart
);
// show the scene.
Scene scene = new Scene(layout, 800, 600);
stage.setScene(scene);
stage.show();
// make one line chart line green so it is easy to see which is which.
reverseLineChart.lookup(".default-color0.chart-series-line").setStyle("-fx-stroke: forestgreen;");
// turn off pick on bounds for the charts so that clicks only register when you click on shapes.
turnOffPickOnBoundsFor(lineChart);
turnOffPickOnBoundsFor(reverseLineChart);
// add a glow when you mouse over the lines in the line chart so that you can see that they are chosen.
addGlowOnMouseOverData(lineChart);
addGlowOnMouseOverData(reverseLineChart);
}
#SuppressWarnings("unchecked")
private void turnOffPickOnBoundsFor(Node n) {
n.setPickOnBounds(false);
if (n instanceof Parent) {
for (Node c: ((Parent) n).getChildrenUnmodifiable()) {
turnOffPickOnBoundsFor(c);
}
}
}
private void addGlowOnMouseOverData(LineChart<Number, Number> lineChart) {
// make the first series in the chart glow when you mouse over it.
Node n = lineChart.lookup(".chart-series-line.series0");
if (n != null && n instanceof Path) {
final Path path = (Path) n;
final Glow glow = new Glow(.8);
path.setEffect(null);
path.setOnMouseEntered(new EventHandler<MouseEvent>() {
#Override public void handle(MouseEvent e) {
path.setEffect(glow);
}
});
path.setOnMouseExited(new EventHandler<MouseEvent>() {
#Override public void handle(MouseEvent e) {
path.setEffect(null);
}
});
}
}
private LineChart<Number, Number> createChart(ObservableList<XYChart.Data> data) {
final NumberAxis xAxis = new NumberAxis();
final NumberAxis yAxis = new NumberAxis();
xAxis.setLabel("Number of Month");
final LineChart<Number, Number> lineChart = new LineChart<>(xAxis, yAxis);
lineChart.setTitle("Stock Monitoring, 2010");
XYChart.Series series = new XYChart.Series(data);
series.setName("My portfolio");
series.getData().addAll();
lineChart.getData().add(series);
lineChart.setCreateSymbols(false);
lineChart.setLegendVisible(false);
return lineChart;
}
public static void main(String[] args) { launch(args); }
}

Instead of doing this:
// turn off pick on bounds for the charts so that clicks only register when you click on shapes.
turnOffPickOnBoundsFor(lineChart);
turnOffPickOnBoundsFor(reverseLineChart);
do this:
// turn off pick on bounds for the charts so that clicks only register when you click on shapes.
turnOffPickOnBoundsFor(reverseLineChart, false);
with the folling methods.
private boolean turnOffPickOnBoundsFor(Node n, boolean plotContent) {
boolean result = false;
boolean plotContentFound = false;
n.setPickOnBounds(false);
if(!plotContent){
if(containsStyle(n)){
plotContentFound = true;
result=true;
}
if (n instanceof Parent) {
for (Node c : ((Parent) n).getChildrenUnmodifiable()) {
if(turnOffPickOnBoundsFor(c,plotContentFound)){
result = true;
}
}
}
n.setMouseTransparent(!result);
}
return result;
}
private boolean containsStyle(Node node){
boolean result = false;
for (String object : node.getStyleClass()) {
if(object.equals("plot-content")){
result = true;
break;
}
}
return result;
}
Also you will need to make the chart in front(reverseLineChart) transparent.

The code posted in jewelsea answer does not work. To make it work I implemented the changes proposed is user1638436 answer and Julia Grabovska comment. Here is a working version for the sake of future readers:
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.EventHandler;
import javafx.scene.Node;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.effect.Glow;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.StackPane;
import javafx.scene.shape.Path;
import javafx.stage.Stage;
public class LineChartSample extends Application {
#SuppressWarnings("unchecked")
#Override public void start(Stage stage) {
// initialize data
ObservableList<XYChart.Data> data = FXCollections.observableArrayList(
new XYChart.Data(1, 23),new XYChart.Data(2, 14),new XYChart.Data(3, 15),new XYChart.Data(4, 24),new XYChart.Data(5, 34),new XYChart.Data(6, 36),new XYChart.Data(7, 22),new XYChart.Data(8, 45),new XYChart.Data(9, 43),new XYChart.Data(10, 17),new XYChart.Data(11, 29),new XYChart.Data(12, 25)
);
ObservableList<XYChart.Data> reversedData = FXCollections.observableArrayList(
new XYChart.Data(1, 25), new XYChart.Data(2, 29), new XYChart.Data(3, 17), new XYChart.Data(4, 43), new XYChart.Data(5, 45), new XYChart.Data(6, 22), new XYChart.Data(7, 36), new XYChart.Data(8, 34), new XYChart.Data(9, 24), new XYChart.Data(10, 15), new XYChart.Data(11, 14), new XYChart.Data(12, 23)
);
// create charts
final LineChart<Number, Number> bottomLineChart = createChart(data);
final LineChart<Number, Number> topLineChart = createChart(reversedData);
//add css to make top chart line transparent as pointed out by Julia Grabovska
//and user1638436, as well as make line green
topLineChart.getStylesheets().add(getClass().getResource("LineChartSample.css").toExternalForm());
StackPane layout = new StackPane(bottomLineChart, topLineChart);
// show the scene.
Scene scene = new Scene(layout, 800, 600);
stage.setScene(scene);
stage.show();
// turn off pick on bounds for the charts so that clicks only register when you click on shapes.
turnOffPickOnBoundsFor(topLineChart, false); //taken from user1638436 answer
// add a glow when you mouse over the lines in the line chart so that you can see that they are chosen.
addGlowOnMouseOverData(bottomLineChart);
addGlowOnMouseOverData(topLineChart);
}
//taken from user1638436 answer (https://stackoverflow.com/a/18104172/3992939)
private boolean turnOffPickOnBoundsFor(Node n, boolean plotContent) {
boolean result = false;
boolean plotContentFound = false;
n.setPickOnBounds(false);
if(!plotContent){
if(containsPlotContent(n)){
plotContentFound = true;
result=true;
}
if (n instanceof Parent) {
for (Node c : ((Parent) n).getChildrenUnmodifiable()) {
if(turnOffPickOnBoundsFor(c,plotContentFound)){
result = true;
}
}
}
n.setMouseTransparent(!result);
}
return result;
}
private boolean containsPlotContent(Node node){
boolean result = false;
for (String object : node.getStyleClass()) {
if(object.equals("plot-content")){
result = true;
break;
}
}
return result;
}
private void addGlowOnMouseOverData(LineChart<Number, Number> lineChart) {
// make the first series in the chart glow when you mouse over it.
Node n = lineChart.lookup(".chart-series-line.series0");
if ((n != null) && (n instanceof Path)) {
final Path path = (Path) n;
final Glow glow = new Glow(.8);
path.setEffect(null);
path.setOnMouseEntered(new EventHandler<MouseEvent>() {
#Override public void handle(MouseEvent e) {
path.setEffect(glow);
}
});
path.setOnMouseExited(new EventHandler<MouseEvent>() {
#Override public void handle(MouseEvent e) {
path.setEffect(null);
}
});
}
}
private LineChart<Number, Number> createChart(ObservableList<XYChart.Data> data) {
final NumberAxis xAxis = new NumberAxis();
final NumberAxis yAxis = new NumberAxis();
xAxis.setLabel("Number of Month");
final LineChart<Number, Number> lineChart = new LineChart<>(xAxis, yAxis);
lineChart.setTitle("Stock Monitoring, 2010");
XYChart.Series series = new XYChart.Series(data);
series.setName("My portfolio");
series.getData().addAll();
lineChart.getData().add(series);
lineChart.setCreateSymbols(false);
lineChart.setLegendVisible(false);
return lineChart;
}
public static void main(String[] args) { launch(args); }
}
LineChartSample.css:
.chart-plot-background {
-fx-background-color:transparent;
}
.default-color0.chart-series-line{
-fx-stroke: forestgreen;
}
A simpler version of turnOffPickOnBoundsFor method:
private boolean turnOffPickOnBoundsFor(Node n) {
n.setPickOnBounds(false);
boolean isContainPlotContent = containsPlotContent(n);
if (! isContainPlotContent && (n instanceof Parent) ) {
for (Node c : ((Parent) n).getChildrenUnmodifiable()) {
if(turnOffPickOnBoundsFor(c)){
isContainPlotContent = true;
}
}
}
n.setMouseTransparent(!isContainPlotContent);
return isContainPlotContent;
}

Based on jewelsea answer setting top pane background color of the pane to null and topPane.setPickOnBounds(false); works fine:
import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.scene.Cursor;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class PropagateEvents extends Application {
private double x, y;
#Override public void start(Stage primaryStage) throws Exception {
StackPane root = new StackPane(getBottomPane(), getTopPane());
Scene scene = new Scene(root);
primaryStage.setScene(scene);
primaryStage.show();
}
private Pane getBottomPane() {
Pane pane = new Pane();
pane.setStyle("-fx-background-color : yellow;");
pane.setPrefSize(250,200);
pane.setOnMouseClicked(e-> System.out.println("Bottom pane recieved click event"));
return pane;
}
private Pane getTopPane() {
Label label = new Label();
label.setPrefSize(20,10);
label.setStyle("-fx-background-color:red;");
label.layoutXProperty().setValue(30); label.layoutYProperty().setValue(30);
addDragSupport(label);
Pane pane = new Pane(label);
// NULL color setPickOnBounds do the trick
pane.setPickOnBounds(false);
pane.setStyle("-fx-background-color: null; ");
return pane;
}
//drag support for red label
private void addDragSupport(Node node) {
node.setOnMousePressed(new EventHandler<MouseEvent>() {
#Override public void handle(MouseEvent mouseEvent) {
x = node.getLayoutX() - mouseEvent.getSceneX();
y = node.getLayoutY() - mouseEvent.getSceneY();
node.setCursor(Cursor.MOVE);
}
});
node.setOnMouseReleased(new EventHandler<MouseEvent>() {
#Override public void handle(MouseEvent mouseEvent) {
node.setCursor(Cursor.HAND);
}
});
node.setOnMouseDragged(new EventHandler<MouseEvent>() {
#Override public void handle(MouseEvent mouseEvent) {
node.setLayoutX(mouseEvent.getSceneX() + x);
node.setLayoutY(mouseEvent.getSceneY() + y);
}
});
node.setOnMouseEntered(new EventHandler<MouseEvent>() {
#Override public void handle(MouseEvent mouseEvent) {
node.setCursor(Cursor.HAND);
}
});
}
public static void main (String[] args) {launch(null); }
}

How to access the Scrollbars of a ScrollPane

I'm trying to get some information about the ScrollBar components that are by standard included in a ScrollPane. Especially i'm interested in reading the height of the horizontal Scrollbar. How can i reference it?

I think you can use the lookupAll() method of the Node class for find the scroll bars.
http://docs.oracle.com/javafx/2/api/javafx/scene/Node.html#lookupAll(java.lang.String)
For example:
package com.test;
import java.util.Set;
import javafx.application.Application;
import javafx.geometry.Orientation;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.ScrollBar;
import javafx.scene.control.ScrollPane;
import javafx.scene.control.ScrollPaneBuilder;
import javafx.scene.text.Text;
import javafx.scene.text.TextBuilder;
import javafx.stage.Stage;
public class JavaFxScrollPaneTest extends Application {
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage primaryStage) {
String longString = "The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.";
Text longText = TextBuilder.create().text(longString).build();
ScrollPane scrollPane = ScrollPaneBuilder.create().content(longText).build();
primaryStage.setScene(new Scene(scrollPane, 400, 100));
primaryStage.show();
Set<Node> nodes = scrollPane.lookupAll(".scroll-bar");
for (final Node node : nodes) {
if (node instanceof ScrollBar) {
ScrollBar sb = (ScrollBar) node;
if (sb.getOrientation() == Orientation.HORIZONTAL) {
System.out.println("horizontal scrollbar visible = " + sb.isVisible());
System.out.println("width = " + sb.getWidth());
System.out.println("height = " + sb.getHeight());
}
}
}
}
}

Since the mentioned methods did not work for everybody (including me), I investigated it a bit more and found the source of the problem.
In general, both methods work, but only as soon as the ScrollPane's skin property has been set. In my case, skin was still null after loading my view using FXMLLoader.
By delaying the call in case the skin property has not been initialized (using a one-shot listener) solves the problem.
Working boiler-plate code:
ScrollPane scrollPane;
// ...
if (scrollPane.getSkin() == null) {
// Skin is not yet attached, wait until skin is attached to access the scroll bars
ChangeListener<Skin<?>> skinChangeListener = new ChangeListener<Skin<?>>() {
#Override
public void changed(ObservableValue<? extends Skin<?>> observable, Skin<?> oldValue, Skin<?> newValue) {
scrollPane.skinProperty().removeListener(this);
accessScrollBar(scrollPane);
}
};
scrollPane.skinProperty().addListener(skinChangeListener);
} else {
// Skin is already attached, just access the scroll bars
accessScrollBar(scrollPane);
}
private void accessScrollBar(ScrollPane scrollPane) {
for (Node node : scrollPane.lookupAll(".scroll-bar")) {
if (node instanceof ScrollBar) {
ScrollBar scrollBar = (ScrollBar) node;
if (scrollBar.getOrientation() == Orientation.HORIZONTAL) {
// Do something with the horizontal scroll bar
// Example 1: Print scrollbar height
// System.out.println(scrollBar.heightProperty().get());
// Example 2: Listen to visibility changes
// scrollBar.visibleProperty().addListener((observable, oldValue, newValue) -> {
// if(newValue) {
// // Do something when scrollbar gets visible
// } else {
// // Do something when scrollbar gets hidden
// }
// });
}
if (scrollBar.getOrientation() == Orientation.VERTICAL) {
// Do something with the vertical scroll bar
}
}
}
}

This not is the best pratice, but works,
private boolean determineVerticalSBVisible(final ScrollPane scrollPane) {
try {
final ScrollPaneSkin skin = (ScrollPaneSkin) scrollPane.getSkin();
final Field field = skin.getClass().getDeclaredField("vsb");
field.setAccessible(true);
final ScrollBar scrollBar = (ScrollBar) field.get(skin);
field.setAccessible(false);
return scrollBar.isVisible();
} catch (final Exception e) {
e.printStackTrace();
}
return false;
}
Use "hsb" for Horizontal ScrollBar.
Best Regards,
Henrique Guedes.