[Vuejs]-ChartJS pie chart not updating after axios GET

by

2👍

✅

Solution 1:
Copy old chart data reference when you make the change (old data have Observer, so don’t make completed new object), instead of using computed value, use watch:

<template>
  <div class="box">
    <p class="title">System Overview</p>
    <chart :type="'pie'" :data="chartData"></chart>
  </div>
</template>

<script>
import axios from 'axios'
import Chart from 'vue-bulma-chartjs'

export default {
  name: 'NVR_Overview',
  components: {
    Chart,
  },
  data: () => ({
    nvrs: [],
    // Health, Down, Warn
    pie_data: [],
    chartData: {
      labels: ['Healthy', 'Down', 'Warning'],
      datasets: [
        {
          data: [],
          backgroundColor: ['#41B482', '#ff4853', '#FFCE56'],
        },
      ]
    }
  }),
  methods: {
    goToNVR (nvrId)
    {
      let wpsId = this.$route.params['wpsId']

      let path = '/wps/' + wpsId + '/nvr/' + nvrId
      this.$router.push(path)
    },
  },
  created ()
  {
    axios
      .get('http://localhost:5000/wps/' + this.$route.params['wpsId'])
      .then(response =>
      {
        this.nvrs = response.data['nvr_list']
        this.pie_data = response.data['pie_data']
        console.log(this.pie_data)
      })
      .catch(e =>
      {
        console.log(e)
      })
  },
  watch: {
    pie_data (newData) {
      const data = this.chartData
      data.datasets[0].data = newData
      this.chartData = {...data}
    }
  },
}
</script>

You can check this problem on vue-bulma-chartjs repository https://github.com/vue-bulma/chartjs/pull/24

Solution 2:
Add ref to chart

<chart ref="chart" :type="'pie'" :data="data"</chart>

then in script after you assign data:

  this.$nextTick(() => {
    this.$refs.chart.resetChart();
  })
👤ittus

Leave a comment