Question

My requirement is to use 2 tables and 1 chart to visualize my data set. Each data element contains its (unique) name and a bunch of data belonging to it. The first table will show the name of every dataset I have and the second table will show the data belonging to the dataset (row) being selected in the first table. The second table and the chart will show the same data and both belong to the dataset (row) being selected in the first table. I have achieved half of this behavior (linking both table) now by using the code below.

The problem I currently have now is: I can’t figure out the way to let the chart display the same data as the second table. My idea is to set the chart data in the ChangeListener, but the problem is the data model of the table is likely to not suitable with the chart. I have the readingData field as ObservableList in the TableDataModel class which is the type that the chart accept but it is an ObservableList of ReadingData not XYChart.Data. Is there any way I can use the XYChart.Data in the ReadData class?

My main class:

ObservableList<TableDataModel> tableData = FXCollections.observableArrayList();
// Other code omitted

/* Create the first table */
TableView<TableDataModel> myTable = new TableView<TableDataModel>();
TableColumn nameColumn = new TableColumn("Name");
nameColumn.setCellValueFactory(new PropertyValueFactory<TableDataModel, String>("name"));
// Other column omitted
myTable.setItems(tableData); 
myTable.getColumns().addAll(nameColumn, ...);

// When user select on any row update the second table items
myTable.getSelectionModel().selectedItemProperty().addListener(new ChangeListener<TableDataModel>()
    {
        @Override
        public void changed(ObservableValue<? extends TableDataModel> arg0, TableDataModel arg1, TableDataModel arg2) 
        {
            dataTable.setItems(arg2.readingData);
        }       
    });

/* The second table */
TableView<ReadData> dataTable = new TableView<ReadData>();
TableColumn valueColumn = new TableColumn("Value");
valueColumn.setCellValueFactory(new PropertyValueFactory<ReadData, Integer>("value"));
// Other column omitted
dataTable.setItems(null);
dataTable.getColumns().addAll(valueColumn, ...);

TableDataModel.java:

private final SimpleStringProperty name;
// Other SimpleStringProperty and its get and set method omitted

public final ObservableList<ReadData> readingData = FXCollections.observableArrayList();

ReadData.java:

// I use XYChart.Data here because I think that this might be useful when I want to show this on the chart
private SimpleObjectProperty<XYChart.Data<Integer, Integer>> value;
// Other property

// Provide this to make below line work
// valueColumn.setCellValueFactory(new PropertyValueFactory<ReadData, Integer>("value"));
public int getValue()
{
    return value.get().getYValue();
}

Answer 1

AFAIK you need to put your XYChart.Datas into the XYChart.Series first, then put that series into the chart by chart.getData().add(series). I think you can do this in your myTable selected change listener: Create there a new series (or modify existing, previously created and added one), add all your value.get() values from the ReadData. See the example of LineChart.