chart js not dispalying data array that comes from an axios request

Question

I have an API end point that returns an array of 24 values that I want to use in my chartjs within a vue component.

when the page loads I get no errors but the bars on the charts just don't show and I don't know why.

EDIT: I noticed that the async function returns a promise instead of the actual data:

  async filterData() {
              await this.$axios.get('/api/data_app/job_count_by_hour/')
                  .then(response => {
                      return this.chart_data = response.data;
                  })

          }

here is the data return code, I have a function that populates the chart_data array :

        data(){
        return {
            form:{
                day: 'select day',
                workspace:'',
                machine_family: [],
                duration: []
            },
            res: [],
            total:[],
            chart_data: [],
            url: '/api/jobs/job_count_by_hour/',
            days: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "sunday"],
            barChart2: {
                labels: ["6h", "7h", "8h", "9h","10h","11h", "12h", "13h", "14h", "15h", "16h", "17h", "18h", "19h", "20h", "21h","22h", "23h", "00h"],
                datasets: [{
                        label: ["popularity"],
                        backgroundColor:"#f93232" ,
                        data: this.chart_data
                    },],
            },
        }
      },
      methods: {
          async filterData() {

              let _url = `${this.url}`
              await this.$axios.get(_url)
                  .then(response => {
                      this.chart_data = response.data;
                  })
              return this.chart_data
          },
      },
      mounted() {
        this.filterData()
      }
 }

this is the chart component:

    <script>
       import { Line } from 'vue-chartjs'

        export default {
            extends: Line,
              props: {
                chartdata: {
                 type: Object,
                 default: null
               },
         options: {
          type: Object,
          default: null
          }
         },
     mounted () {
this.renderChart(this.chartdata, this.options)
 }
}

in the parent component It looks like this:

en <BarChart :labels="barChart2.labels"
         :datasets="barChart2.datasets"
         :height="100"
  >
  </BarChart>ter code here

Does this answer your question? [Vue Chart.js - Chart is not updating when data is changing](https://stackoverflow.com/questions/43728332/vue-chart-js-chart-is-not-updating-when-data-is-changing) — AT82, Aug 06 '20 at 07:51
not really, That post is about data not updating which is not what I am doing. I am just loading the data on mount, but the chart shows no bars — Nami, Aug 06 '20 at 08:03
That is exactly what you are doing - updating. Your `chart_data` is initially an empty array, but when you get your axios response, you update `chart_data` with your response. — AT82, Aug 06 '20 at 08:04
You are probably right, I looked into the answers of that question, but i don't quite understand it, i tried making it into a computed variable but the the whole chart just doesnt' load — Nami, Aug 06 '20 at 10:01
Don't do something like `data: this.chart_data` because when you do `this.chart_data = response.data` this.chart_data will reference to the new array and that data will not update. — User 28, Aug 06 '20 at 10:39
the chart is a separate component that i imported, i will post it in the question it takes two props for the data and labels — Nami, Aug 06 '20 at 11:52

score 1 · Accepted Answer · answered Aug 09 '20 at 10:14

Turns out that when you try to update nested data, the component doesn't re-render. This is how I solved it, I put the entire object in an update function and call that function when i get my data from the back end, I hope this helps!:

 methods: {
  onInput(value) {
      this.filterData()
  },
  updateChart(data) {
    this.datasets = [{
          label: ["popularity"],
          backgroundColor:"#f93232",
          data: data
      }]
  },

  async loadData() {
    await this.$axios.get(this.url)
      .then(response => {
        this.updateChart(response.data)
      })
  },
},

mounted() {
   this.loadData()
 },

chart js not dispalying data array that comes from an axios request

1 Answers1