A Combined LineChart and TableView Widget in JavaFX

(click to watch the video)

This video shows a widget for displaying three characteristics (velocity vs. distance) in a LineChart node and a tabbed TableView node. The two nodes provide different views on the same data.

The widget comes with the following features:

• hovering over a data point in the chart will show a popup with the x and y values.
• selecting a data point in the chart will select the corresponding data item in the table view and vice versa.
• when a data item was edited in the table view, the chart will update immediately.
• three colour pickers allow for changing the line colours in the chart.
• import and export data from sources like CSV, Excel, HDF5 (to be done).

These features were implemented using JavaFX bindings, events, animations, and CSS styling.