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 — AVJT82
– AVJT82, Commented Aug 6, 2020 at 7: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
– Nami, Commented Aug 6, 2020 at 8: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. — AVJT82
– AVJT82, Commented Aug 6, 2020 at 8: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
– Nami, Commented Aug 6, 2020 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
– User 28, Commented Aug 6, 2020 at 10:39

Nami · Accepted Answer · 2020-08-09 10:14:00Z

1

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

answered Aug 9, 2020 at 10:14

Nami

1651 silver badge11 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related