vue-chart.js : Data available as computed properties, but not showing in chart

Question

Data is available in computed properties (see screenshot), but won't render out into the PieChart control..

Anyone got any idea why ?

CODE :

<script>
import { Pie } from 'vue-chartjs'
import * as types from '../store/mutationtypes'
import { mapGetters, mapActions } from 'vuex'

export default Pie.extend({
  mounted () {
    statOrderStatus : this.$store.dispatch('getStatisticsForOrderStatus'),
    this.renderChart({
    labels: this.orderStatusChartKeys,
      datasets: [
        {
          label: 'Ticketstatus',
          backgroundColor: '#f87979',
          data: this.orderStatusChartData
        }
      ]
    })

  },
  computed: {
    ...mapGetters(["statOrderStatus"]),
    orderStatusChartData () {
      let chartData = []
      this.statOrderStatus.forEach(function(orderStatus) {
          chartData.push(orderStatus.doc_count)
      })      
      return chartData
    },
    orderStatusChartKeys () {
      let chartKeys = []
      this.statOrderStatus.forEach(function(orderStatus) {
          chartKeys.push(orderStatus.key)
      })      
      return chartKeys
    }
  }
})
</script>

VUE info : (Chrome debug)

Daniel D · Accepted Answer · 2017-07-19 00:20:15Z

3

Try making a computed property to calculate the chart data:

Look at chart.js at https://www.webpackbin.com/bins/-KpNBtUKQ67-jSFRHtNe

datasets: [
        {
          label: 'Ticketstatus',
          backgroundColor: '#f87979',
          data: this.orderStatusChartData
        }

.

computed: {
    orderStatusChartData () {
      let chartData = []
      this.statOrderstatus.forEach(function(orderStatus) {
          chartData.push(orderStatus.doc_count)
      })      
      return chartData
    }

answered Jul 19, 2017 at 0:20

Daniel D

99810 silver badges18 bronze badges

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

9 Comments

Terje Nygård Over a year ago

thanx @daniel-d :) I have only one issue here.. I'll update the question :

Terje Nygård Over a year ago

Updated the question with lastest code, error message, and a screenshot of State.. Hope this is helpful for solving :)

Daniel D Over a year ago

You're trying to set the data of the pie chart to an array of string values. You need to set it to the array of number values: datasets: [ { ... data: this.orderStatusChartData }. Basically you just mixed up your orderStatusChartData and orderStatusChartKeys in your chart code.

Terje Nygård Over a year ago

Thanks for the response @daniel-d :) It was unfortunately the same result though.. screenshot (as linked in the question) is exactly like now : Only that red short bar on top, no chart... Any other things you might think could be missing ? PS! I have tried it with the demo-data, and it displayed correctly.. Could it be an issue with datatype ? both should be arrays? I have tried with both []'s and {}'s around with no success on that either...

Daniel D Over a year ago

I don't know Terje. The orderStatusChartData looks good in the inspector. It should be working as far as I can see.

|

Collectives™ on Stack Overflow

vue-chart.js : Data available as computed properties, but not showing in chart

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related