A Combined LineChart and TableView Widget in JavaFX

(enlarge to see more details)

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.

A Graph Editor in JavaFX

Another thing we’ve been working on is going to see the light of day soon: a graph editor for JavaFX. The current beta version provides the following main features:

  • create draggable, resizable nodes and connections between them
  • add multiple input or output connectors to a node
  • create joints inside a connection
  • add custom skins for nodes, connections, connectors, and joints
  • enhanced user experience through comprehensive styling during drag-and-drop actions

Internally, we use an EMF model to represent the UI objects and their state. The model is in sync with the UI at all times.

Here’s a short video of our current development version: