Dynamic Bar chart in Java FX

Question

Hello I am trying to create bar chart which shows values of field. Values of field are changed by sorting algorithm and chart should show any of changes.

public class FXMLDocumentController implements Initializable {

    static int[] pole = new int[10]; // field
    int hodnota;

    @FXML               // bar chart
    private BarChart barChart; 

    @FXML
    private void handleButtonAction(ActionEvent ev) { //button for filling up new random graph

        for (int i = 0; i < 10; i++) {
            hodnota = intValue((StrictMath.random() * 100));        
            pole[i] = hodnota;
        }

        final CategoryAxis osaX = new CategoryAxis();          
        final NumberAxis osaY = new NumberAxis();
        ObservableList<XYChart.Series<String, Number>> barChartData = FXCollections.observableArrayList();
        final BarChart.Series<String, Number> series1 = new BarChart.Series<>();
        series1.getData().add(new XYChart.Data<>("1", pole[0]));        
        series1.getData().add(new XYChart.Data<>("2", pole[1]));
        series1.getData().add(new XYChart.Data<>("3", pole[2]));
        series1.getData().add(new XYChart.Data<>("4", pole[3]));
        series1.getData().add(new XYChart.Data<>("5", pole[4]));
        series1.getData().add(new XYChart.Data<>("6", pole[5]));
        series1.getData().add(new XYChart.Data<>("7", pole[6]));
        series1.getData().add(new XYChart.Data<>("8", pole[7]));
        series1.getData().add(new XYChart.Data<>("9", pole[8]));
        series1.getData().add(new XYChart.Data<>("10", pole[9]));
        barChartData.add(series1);
        barChart.setData(barChartData);
    }

    @FXML // button which starts sorting algorhitm, it is changing values in field
    private void bubbleButton(ActionEvent ev) { 
        BubbleSort vlakno=new BubbleSort("vypoctoveVlakno");
        vlakno.start(); 
    }     

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        // TODO
    }
}

I already tried to make a new thread which should load data again and again but it didn't work. Also tried to load them in the FXML controller but the graphics window gets stuck. I am actually very new to this.

FXML document, main just loads stage from fxml

<AnchorPane id="AnchorPane" prefHeight="487.0" prefWidth="610.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="radicialgoritmy.FXMLDocumentController"> 
<children>  
<Button fx:id="button" layoutX="14.0" layoutY="14.0" onAction="#handleButtonAction" text="Vygeneruj" />  
<BarChart fx:id="barChart" animated="false" cache="true" layoutX="30.0"     layoutY="188.0" legendVisible="false" prefHeight="292.0" prefWidth="552.0">  
  <xAxis>  
    <CategoryAxis fx:id="osaX" side="BOTTOM" />  
  </xAxis>  
  <yAxis>  
    <NumberAxis fx:id="osaY" side="LEFT" />  
  </yAxis>  
</BarChart>
  <Button fx:id="bubble" layoutX="100.0" layoutY="14.0" mnemonicParsing="false" onAction="#bubbleButton" text="BubbleSort" /> 

Class for sorting Algorithm.

class BubbleSort extends Thread {

    public BubbleSort(final String jmeno) {
        super(jmeno);
    }

    @Override
    public void run() {
        for (int i = 0; i < pole.length - 1; i++) {
            for (int j = 0; j < pole.length - i - 1; j++) {
                if (pole[j] < pole[j + 1]) {
                    final int tmp = pole[j];
                    pole[j] = pole[j + 1];
                    pole[j + 1] = tmp;
                }
                try {
                    Thread.sleep(250);
                } catch (final InterruptedException ex) {
                    Logger.getLogger(BubbleSort.class.getName()).log(Level.SEVERE, null, ex);
                }
            }
        }
    }
}

Answer 1

I altered your program just to give you an idea of one way to accomplish this. I used Timeline to implement the BubbleSort.

Main

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

/**
 * @see https://stackoverflow.com/a/53579013/230513
 */
public class BubbleSortAnimation extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));
        Scene scene = new Scene(root);
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

}    

Controller

import java.net.URL;
import java.util.Arrays;
import java.util.ResourceBundle;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.chart.BarChart;
import javafx.scene.chart.XYChart;
import javafx.util.Duration;

public class FXMLDocumentController implements Initializable {

    private static final int N = 16;
    private final BarChart.Series<String, Integer> series = new BarChart.Series<>();
    private final Timeline timeline = new Timeline();
    private final int[] pole = new int[N];
    private int iteration;

    @FXML
    private BarChart<String, Integer> barChart;

    @FXML
    private void handleButtonAction(ActionEvent ae) {
        for (int i = 0; i < N; i++) {
            pole[i] = (int) ((Math.random() * 100));
            series.getData().get(i).setYValue(pole[i]);
        }
        iteration = 0;
        timeline.stop();
        timeline.getKeyFrames().clear();
        timeline.getKeyFrames().add(new KeyFrame(Duration.millis(1000 / N), (ev) -> {
            System.out.println(iteration + ": " + Arrays.toString(pole));
            for (int j = 0; j < pole.length - (iteration) - 1; j++) {
                if (pole[j] < pole[j + 1]) {
                    final int tmp = pole[j];
                    pole[j] = pole[j + 1];
                    pole[j + 1] = tmp;
                }
            }
            // update series data for this iteration
            for (int i = 0; i < N; i++) {
                series.getData().get(i).setYValue(pole[i]);
            }
            iteration++;
        }));
        timeline.setCycleCount(pole.length);
        timeline.play();
    }

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        for (int i = 0; i < N; i++) {
            series.getData().add(new XYChart.Data<>(String.valueOf(i), 0));
        }
        ObservableList<BarChart.Series<String, Integer>> chartData = FXCollections.observableArrayList();
        chartData.add(series);
        barChart.setData(chartData);
        handleButtonAction(null); // iniialize
    }
}

FXML

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.chart.BarChart?>
<?import javafx.scene.chart.CategoryAxis?>
<?import javafx.scene.chart.NumberAxis?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane id="AnchorPane" fx:controller="FXMLDocumentController" 
            xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1"> 
    <children>  
        <Button fx:id="button" layoutX="16" layoutY="16" onAction="#handleButtonAction" text="Run" />  
        <BarChart fx:id="barChart" animated="false" cache="false" layoutX="16" layoutY="64" legendVisible="false" prefHeight="400" prefWidth="600">  
            <xAxis>  
                <CategoryAxis fx:id="domain" side="BOTTOM" />  
            </xAxis>  
            <yAxis>  
                <NumberAxis fx:id="range" side="LEFT" />  
            </yAxis>  
        </BarChart>
    </children>
</AnchorPane>

Improvements to this code are due to @trashgod.

Answer 2

Here is mcve demonstrating a mechanism to couple changing data to a BarChart.
There are other ways to achieve this "binding", but I tried to keep is simple.
The bubble sort algorithm is not relevant to the question, not the answer , so it is better left out. An mcve needs to demonstrate the question / answer, and not the application:

import java.util.Random;
import javafx.beans.Observable;
import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.collections.FXCollections;
import javafx.collections.ListChangeListener.Change;
import javafx.collections.ObservableList;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.chart.BarChart;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.chart.XYChart.Data;

public class FXMLDocumentController {

    @FXML private BarChart barChart;
    private ObservableList<XYChart.Series<String, Number>> barChartData;
    private ObservableList<DataItem> items;
    private  Random rnd = new Random();
    private static  int SIZE = 10;

    @FXML
    void initialize(){
        //an observable collection of DataItem objects, each representing data of one bar 
        items = FXCollections.observableArrayList(
                dataItem -> new Observable[] { dataItem.nameProperty(), dataItem.valueProperty()});
        //initialize with random values 
        for (int i = 0; i < SIZE; i++) {
            items.add(new DataItem(String.valueOf(i), rnd.nextInt(100)));
        }
    }

    @FXML
    private void handleButtonAction( ActionEvent ev) {

         ObservableList<Data<String, Number>> seriesData = new DataConvertor(items).getData();
         CategoryAxis osaX = new CategoryAxis();
         NumberAxis osaY = new NumberAxis();
        barChartData = FXCollections.observableArrayList();
         BarChart.Series<String, Number> series1 = new BarChart.Series<>();
        series1.setData(seriesData);
        barChartData.add(series1);
        barChart.setData(barChartData);
    }

    @FXML
    private void bubbleButton( ActionEvent ev) {
        BubbleSort vlakno=new BubbleSort(items);
        vlakno.start();
    }
}

//pojo to represent items of one bar
class DataItem {

    private StringProperty name = new SimpleStringProperty(this, "name");
    private IntegerProperty value = new SimpleIntegerProperty(this, "value");

    public DataItem( String name,  int value) {
        setName(name);
        setValue(value);
    }
    public StringProperty nameProperty() {
        return name;
    }
    public String getName() {
        return this.nameProperty().get();
    }
    public void setName( String name) {
        this.nameProperty().set(name);
    }
    public  IntegerProperty valueProperty() {
        return value;
    }
    public int getValue() {
        return this.valueProperty().get();
    }
    public void setValue( int value) {
        this.valueProperty().set(value);
    }
}

//simple coupling between items and graph data 
class DataConvertor{

    ObservableList<DataItem> items;
    ObservableList<Data<String, Number>>data;
     DataConvertor( ObservableList<DataItem> items) {
        super();
        this.items = items;
        data =  FXCollections.observableArrayList();
        items.forEach(item -> data.add(new Data<>(item.getName(), item.getValue())));
        items.addListener( ( Change<? extends DataItem> arg0 ) ->   update());
    }

    void update() {
        for(int i =0; i < data.size(); i++){
             Data<String, Number> d = data.get(i);
            d.setYValue(items.get(i).getValue());
        }
        data.clear();
        items.forEach(item -> data.add(new Data<>(item.getName(), item.getValue())));
    }

    ObservableList<Data<String, Number>>getData(){
        return data;
    }
}

The BubbleSort class does not really sort. It only changes data periodically and randomly:

import java.util.Random;
import javafx.animation.PauseTransition;
import javafx.collections.ObservableList;
import javafx.util.Duration;

class BubbleSort  {

    private ObservableList<DataItem> items;
    private Random rnd = new Random();
    private PauseTransition periodicTask;
    private static final long CYCLE = 500;

    public BubbleSort(final ObservableList<DataItem> items) {
        this.items = items;
        periodicTask = new PauseTransition(Duration.millis(CYCLE));
        periodicTask.setOnFinished((e) -> {
            calculateNewValues();
            periodicTask.playFromStart();
        });
    }

    private void calculateNewValues() {
        for(DataItem d : items){
            d.setValue(rnd.nextInt(100));
        }
    }

    void start(){
        periodicTask.playFromStart();
    }
}

Note that the posted fxml file in not complete. Those two tags are missing:

</children>   
</AnchorPane>