javascript - Visualising bubble sort using chart.js

Question

I tried to visualise bubble sort. First I created simple bar chart, then created function sortBubble. But I am not sure how you can on each step change visually columns to make it at the time algorithm runs.Maybe for dynamic visualisation should I use for example d3.js .Thanks for any suggestion.

 

    function sortBubble() {
          for (var i = 0; i  chart.data.datasets[0].data[j]) {
                var temp = chart.data.datasets[0].data[j];
                chart.data.datasets[0].data[j] = chart.data.datasets[0].data[j-1];
                chart.data.datasets[0].data[j-1] = temp;
            }
          }
      }     
    
      chart.update();
                }
    
    var ctx = document.getElementById('myChart').getContext('2d');
    var chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Number_1', 'Number_2', 'Number_3', 'Number_4', 'Number_5', 'Number_6'],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        },
        animation: {
          onProgress: function(animation) {
                duration:4000
               
          }
                }
    });

Answer 1

You can use the setTimeout() method and update the labels, dataset.data and dataset.backgroundColor with a certain delay each time array elements are swapped. Then you also need to invoke chart.update() to make sure, Chart.js re-draws the updated chart on the canvas.

Please take a look at the runnable code below and see how it works.

function bubbleSort() {  
  let labels = chart.data.labels;
  let data = chart.data.datasets[0].data;
  let colors = chart.data.datasets[0].backgroundColor;
  let swapped;
  let timeout = 0;
  do {
    swapped = false;
    for (let i = 0; i < data.length; i++) {
      if (data[i] > data[i + 1]) {        
        swap(labels, i);
        swap(data, i);
        swap(colors, i);
        timeout += 50;
        this.updateChartDelayed(labels.slice(0), data.slice(0), colors.slice(0), timeout);
        swapped = true;
      }
    }
  } while (swapped);
}

function swap(arr, i) {
  let tmp = arr[i];
  arr[i] = arr[i + 1];
  arr[i + 1] = tmp;
}

function updateChartDelayed(labels, data, colors, timeout) {
  setTimeout(() => {
    chart.data.labels = labels;
    chart.data.datasets[0].data = data;
    chart.data.datasets[0].backgroundColor = colors;
    chart.update();
  }, timeout);
}

const labels = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
const chart = new Chart('myChart', {
  type: 'bar',
  data: {
    labels: labels,
    datasets: [{
      data: labels.map(() => Math.random()),
      backgroundColor: ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6', '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D', '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A',  '#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399', '#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933', '#FF4D4D'],
      borderWidth: 1
    }]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

setTimeout(() => bubbleSort(), 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>