How to change bars's places in sort method in

Question

I need to show some sort method(for example BubbleSort) working and replacing bars to each other. I want to do it step by step. So in every element changing iteration I am also changing bar's places and use method layout() to show changes. However, changes are shown only after this sort method. I want to replace bars step by step and show that probably with some little delay(Thread.sleep(100);). Every bar in chart is associated with element in array_tmp.

How can I do that?

   public void sortBubble(){

    int n = array_tmp.length;
    String temp;
    XYChart.Data getChart1;
    XYChart.Data getChart2;
    for(int i=0; i < n; i++){
        for(int j=1; j < (n-i); j++){
            if(array_tmp[j-1].length() > array_tmp[j].length(){

                    getChart1 = barChart.getData().get(j - 1).getData().get(0);
                    getChart2 = barChart.getData().get(j).getData().get(0);
                    barChart.getData().get(j - 1).getData().remove(0);
                    barChart.getData().get(j).getData().remove(0);
                    barChart.layout();

                    barChart.getData().get(j - 1).getData().add(0, getChart2);
                    barChart.getData().get(j).getData().add(0, getChart1);

                temp = array_tmp[j-1];
                array_tmp[j-1] = array_tmp[j];
                array_tmp[j] = temp;

            }
        }

    }
}

Answer 1

You can use Animations, especially Transitions.

Here is a short example moving bars in a BarChart.

public void start(Stage stage)
{
    final CategoryAxis xAxis = new CategoryAxis();
    final NumberAxis yAxis = new NumberAxis();
    final BarChart<String, Number> barChart = new BarChart<String, Number>(xAxis, yAxis);

    XYChart.Series<String, Number> series1 = new XYChart.Series<String, Number>();
    series1.setName("Series One");
    XYChart.Data<String, Number> bar11 = new XYChart.Data<String, Number>("One", 10);
    series1.getData().add(bar11);
    XYChart.Data<String, Number> bar12 = new XYChart.Data<String, Number>("Two", 20);
    series1.getData().add(bar12);
    barChart.getData().add(series1);

    XYChart.Series<String, Number> series2 = new XYChart.Series<String, Number>();
    series2.setName("Series Two");
    XYChart.Data<String, Number> bar21 = new XYChart.Data<String, Number>("One", 5);
    series2.getData().add(bar21);
    XYChart.Data<String, Number> bar22 = new XYChart.Data<String, Number>("Two", 5);
    series2.getData().add(bar22);
    barChart.getData().add(series2);

    Scene scene = new Scene(barChart, 800, 600);
    stage.setScene(scene);
    stage.show();

    double pos12 = bar12.getNode().localToScene(bar12.getNode().getBoundsInLocal()).getMinX();
    double pos11 = bar11.getNode().localToScene(bar11.getNode().getBoundsInLocal()).getMinX();
    double diff = pos12 - pos11;

    TranslateTransition tt1 = new TranslateTransition(Duration.millis(2000), bar11.getNode());
    tt1.setByX(diff);
    tt1.setCycleCount(TranslateTransition.INDEFINITE);
    tt1.setAutoReverse(true);
    tt1.play();

    TranslateTransition tt2 = new TranslateTransition(Duration.millis(2000), bar12.getNode());
    tt2.setByX(-diff);
    tt2.setCycleCount(TranslateTransition.INDEFINITE);
    tt2.setAutoReverse(true);
    tt2.play();
}

If you don't like the animation, just use: bar.getNode().setTranslateX(xValueToGo);

PauseTransition is usefull for non ui-blocking delays:

    PauseTransition wait = new PauseTransition(Duration.millis(2000));
    wait.setOnFinished((e) ->
    {
        doThisLater();
    });
    wait.play();