CODEWITHSUNDEEP
vue.jschart.js
Cathal Cronin
Cathal Cronin

Reputation: 1435

chartJS pie chart not updating after axios GET

In my Vue app I'm loading a page and it grabs some data from my Flask backend. I draw a bunch of elements and I also draw a pie chart based on an array of 3 values returned from the backend. When I get the response I update this.pie_data and I thought this would update in my template to reflect the pie chart. It renders the elements that get set in this.nvrs so not sure why it doesn't work for my pie chart.

Appreciate the help.

Template

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

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: [],
  }),
  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)
      })
  },
  computed: {
    chartData ()
    {
      return {
        labels: ['Healthy', 'Down', 'Warning'],
        datasets: [
          {
            data: this.pie_data,
            backgroundColor: ['#41B482', '#ff4853', '#FFCE56'],
          },
        ],
      }
    },
  },
}

Upvotes: 0

Views: 1425

Answers (1)

ittus
ittus

Reputation: 22393

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();
  })

Upvotes: 2

Related Questions