How to make dynamic chart using Vue component with chart-js

Question

I am making Bubble sort visualization algorithm and wanted to show to the process of shorting using line graph.

I have tried to implement the computed property but the browser hangs.

<template>
  <div class="hello">
    <h1>Bubble Sort</h1>
    <p>{{ bubbleSort()}}</p>
    <line-chart :data="bubbleSort()"></line-chart>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      a : [12, 0, 4, 546, 122, 84, 98, 64, 9, 1, 3223, 455, 23, 234, 213] 
    }
  },
  methods : {
    bubbleSort: function () {
      let swapped;
      do {
        swapped = false;
        for(var i = 0; i < this.a.length; i++){
          if(this.a[i] > this.a[i+1]){
            let temp = this.a[i];
            this.a[i] = this.a[i+1];
            this.a[i+1] = temp;
            swapped = true;
          }
        }
      }while(swapped);
      return Object.assign({},this.a);
    }
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>

I expect the chart to update while shorting is happening.

Does this answer your question? stackoverflow.com/a/66304869/2358409 — uminder
– uminder, Commented Feb 21, 2021 at 17:22

tony19 · Accepted Answer · 2022-07-15 06:04:25Z

2

Using a computed property is not the best way to implement a bubble sort visualization, for two reasons:

The computed property is re-calculated every time a changes, and you are changing the value of a in the computed property itself; this is probably what causes the browser to hang.
There is no noticeable delay between executing the computed property function and updating the view, so the user won't see any animation.

Since you are not using a directly in your template, and the computed property has only one dependency, a, get rid of the computed property, it's not needed.

Instead, create a function that completes a single pass of the bubble sort algorithm, and call that function in a setInterval, cancelling the loop when a pass is made with 0 swaps:

export default {
  name: 'HelloWorld',
  data() {
    return {
      a : [12, 0, 4, 546, 122, 84, 98, 64, 9, 1, 3223, 455, 23, 234, 213],
      intervalId: null,
    }
  },
  methods: {
    bubbleSort() {
      let swapped = false;

      for (let i = 0; i < this.a.length - 1; i++) {
        if (this.a[i] > this.a[i+1]) {
          const temp = this.a[i];
          this.$set(this.a, i, this.a[i+1]);
          this.$set(this.a, i+1, temp);
          swapped = true;
        }
      }

      if (!swapped) {
        clearInterval(this.intervalId);
      }
    },
  },
  mounted() {
    this.intervalId = setInterval(() => {
      this.bubbleSort();
    }, 2000);
  }
};

Notes:

Vue's reactivity system won't notice changes to arrays when accessing them via index, so $set must be used instead. See https://v2.vuejs.org/v2/guide/list.html#Caveats.
A bar chart will look nicer in this case than a line chart.
a is a very nondescript variable name, try to give it a more meaningful and unique name.
Be more precise than "browser hangs" when describing a bug. Does the browser window just freeze (i.e. can't interact with the page)? How long does it take for that to happen? Are there errors in the console? Etc.
You have a typo in your question: swapp. Don't be so lazy. If you don't give a shit about your question, no one will give a shit about answering it.

edited Jul 15, 2022 at 6:04

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 31, 2018 at 3:25

chipit24

7,00711 gold badges52 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ashok Over a year ago

Using the mounted hook the line chart component didn't bind the data prop.The line chart expects data when crating the component and for some reason it only works with objects so I converted to array using Object.assign({},this.a) though the documentation says it accepts array as well as Objects.

chipit24 Over a year ago

The mounted hook has nothing to do with the data binding. I tested the above code locally and it works fine, so I'm not sure what you're doing. Can you post an example of your code in JSFiddle, Codepen, Codesandbox, or another service?

Collectives™ on Stack Overflow

How to make dynamic chart using Vue component with chart-js

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related