From observableArrayList to ObservableArrayList<PieChart.Data>

Question

It could be that I am approaching this problem wrong.. But I would like to visualise the data in my tableview in different visualisation types , for example PieChart and BarChart.

How can this be approached? I for example try to use my observableArrayList in my PieChart, but I can't get it to work.

I currently have:

ObservableList data = FXCollections.observableArrayList();
ObservableList<PieChart.Data> dataList = FXCollections.observableArrayList();

The point is( and the reason I don't use a data class) is because the user should be able to choose what data that gets in the table view, and visualized. That's the reason I use the dynamically rows and column.

To clarify: the main point with the application is for the user to connect to a database and select which data he wants visualized. So with other words, the user selects for example two columns in the table view and clicks piechart, then I want the piechart to appear.

Answer 1

Data in a PieChart needs two attributes: a name ( String ) and a value ( double ). A BarChart is similar.

So, assuming you are using some arbitrary data structure (such as a List<String> ) for the data displayed in each row in the TableView , you will need to store the user's choice of which column has the name of the data, and which has the value.

For each element in the TableView 's list of items, you will need to map that item to a new PieChart.Data(name, value) , and use those to populate an ObservableList<PieChart.Data> to pass to the PieChart :

int userChosenDataNameColumnIndex ;
int userChosenDataValueColumnIndex ;

// for each List<String> in the table's data:
List<String> rowData ;
String name = rowData.get(userChosenDataNameColumnIndex);
double value = Double.parseDouble(rowData.get(userChosenDataValueColumnIndex));
PieChart.Data pieChartData = new PieChart.Data(name, value);

You can manage all this by hand:

TableView<List<String>> table = new TableView<>();
ObservableList<List<String>> tableData = loadTableDataFromDatabase();
int userChosenDataNameColumnIndex ;
int userChosenDataValueColumnIndex ;

ObservableList<PieChart.Data> pieChartData = FXCollections.observableArrayList();
for (List<String> rowData : tableData) {
    String name = rowData.get(userChosenDataNameColumnIndex);
    double value = Double.parseDouble(rowData.get(userChosenDataValueColumnIndex));
    pieChartData.add(new PieChart.Data(name, value));
}
PieChart pieChart = new PieChart(pieChartData);

Note that this just creates a pie chart that is a snapshot of the data in the table. If you add rows to the table, or delete rows from the table, the pie chart will not update. You can use the EasyBind framework to create an ObservableList<PieChart.Data> that is a "live" view of the table data:

TableView<List<String>> table = new TableView<>();
ObservableList<List<String>> tableData = loadTableDataFromDatabase();
int userChosenDataNameColumnIndex ;
int userChosenDataValueColumnIndex ;

ObservableList<PieChart.Data> pieChartData = EasyBind.map(tableData, rowData -> {
    String name = rowData.get(userChosenDataNameColumnIndex);
    double value = Double.parseDouble(rowData.get(userChosenDataValueColumnIndex));
    return new PieChart.Data(name, value);
});
PieChart pieChart = new PieChart(pieChartData);

ObservableList<XYChart.Data<String, Number>> barChartData = EasyBind.map(tableData, rowData -> {
    String name = rowData.get(userChosenDataNameColumnIndex);
    Double value = new Double(rowData.get(userChosenDataValueColumnIndex));
    return new XYChart.Data(name, value);
});
BarChart<String, Number> barChart = new BarChart<>(new CategoryAxis(), new NumberAxis(), barChartData)