Slider above the x axis in a chart? - javafx

Question

I am trying to implement a Slider that has an XYChart below and is supposed to slider along the values of the x-axis. New values for the y-axis are to be dynamilcally added, so the chart may grow vertically. That's why I decided, it has to be inside a ScrollPane.
Now the question is:
How can I reliably position a slider above and with the same length of the x-axis?
I have tried to bind properties concerning the width and position of the Slider and the NumberAxis in fxml and java. See minimal (not) working (as desired) example below:
MainView.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import javafx.scene.chart.*?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.control.Slider?>
<VBox fx:id="timeBox" prefHeight="600" prefWidth="800" maxHeight="600" maxWidth="800"
xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<children>
<Slider fx:id="timeSlider" blockIncrement="30.0" max="360.0" />
<HBox fx:id="scrollBox" fitwidth="${timeBox.width}" VBox.vgrow="ALWAYS">
<children>
<ScrollPane fx:id="timeScrollPane" fitToHeight="true"
fitToWidth="true" fitwidth="${scrollBox.width}" HBox.hgrow="SOMETIMES">
<content>
<LineChart fx:id="timeChart">
<xAxis>
<NumberAxis fx:id="timeAxis" minorTickCount="1"
minorTickLength="1.0" side="TOP" tickLabelGap="30.0"
tickLength="1.0" tickUnit="1.0" upperBound="360.0" />
</xAxis>
<yAxis>
<CategoryAxis fx:id="appearanceAxis" prefWidth="160.0"
side="LEFT" />
</yAxis>
</LineChart>
</content>
</ScrollPane>
</children>
</HBox>
</children>
</VBox>
MainViewController
public class MainViewController implements Initializable {
#FXML private VBox timeBox;
#FXML private HBox sliderBox;
#FXML private Slider timeSlider;
#FXML private HBox scrollBox;
#FXML private ScrollPane timeScrollPane;
#FXML private NumberAxis timeAxis;
#FXML private CategoryAxis appearanceAxis;
#FXML private LineChart<Number, String> timeChart;
#Override
public void initialize(URL location, ResourceBundle resources) {
// idea: set the same x value, but it does not change anything
timeSlider.setLayoutX(timeAxis.getLayoutX());
// idea: bind the width, but it stays longer
timeSlider.prefWidthProperty().bind(timeAxis.widthProperty());
}
}
Main.java
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.stage.Stage;
import javafx.scene.Parent;
import javafx.scene.Scene;
public class Main extends Application {
#Override
public void start(Stage primaryStage) {
try {
FXMLLoader loader = new FXMLLoader();
loader.setLocation(getClass().getResource("MainView.fxml"));
Parent root = loader.load();
Scene scene = new Scene(root,800,600);
scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
primaryStage.setScene(scene);
primaryStage.show();
} catch(Exception e) {
e.printStackTrace();
}
}
public static void main(String[] args) {
launch(args);
}
}
I know, what I have tried so far is not really much, but I just don't have an idea how to fix that.
The chart is meant to show the start-to-stop time of a video file on the x-axis and annotations with their appearance intervals on the y-axis.
Thanks for reading this…