Search code examples
javascriptvue.jsvuejs2typeerrorapexcharts

t[this.activeSeriesIndex].data[0] is undefined in ApexCharts. How to correctly build the series array?

I'm a beginner in Vue and I'm using vue-apex chart to create a chart in my application. I want to display in chart, the values of the two component's properties "uncorrectAns" and "correctAns" that I compute thanks to a specific method (computeStat()).


<template>
  <apexcharts width="500" type="bar" :options="chartOptions" :series="series"></apexcharts>
</template>

<script>
export default {
  name: 'Results',
  components: {
    apexcharts: VueApexCharts
  },

  data() {
    return {
      results: '',
      correctAns: 0,
      uncorrectAns: 0,
      chartOptions: {
        chart: {
          id: 'vuechart-example'
        },
        xaxis: {
          categories: ['Correct Answers', 'Uncorrect Answers']
        }
      },
      series: [
        {
          name: 'series-1',
          data: [this.correctAns, this.uncorrectAns]
        }
      ]
    }
  },

  methods: {
    computeStat() {
      var i
      for (i = 0; i < this.results.length; i = i + 1) {
        if (this.results[i].answerCorrect == true) {
          this.correctAns = this.correctAns + 1
        } else {
          this.uncorrectAns = this.uncorrectAns + 1
        }
      }
    }
  },

  created() {
    this.results = this.$route.params.output
    this.computeStat()
    var i
    for (i = 0; i < this.results.length; i = i + 1) {
      console.log('bestPractice ' + i + ':' + this.results[i].bestPract)
    }
  }
}
</script>

When I run the application, the chart isn't displayed and I get this error message on the browser console:

enter image description here

I would like to know the nature of this error and if there is a correct way to display "correctAns" and "uncorrectAns" values in the chart.

Solution

  • There's a couple of problems here around your series property...

    1. When you define series, both this.correctAns and this.uncorrectAns are undefined (this is the source of your problem)
    2. Because series is statically defined, it will never update as you make changes to this.correctAns and this.uncorrectAns

    The solution is to convert series into a computed property. Remove it from data and add

    computed: {
  series () {
    return [
      {
        name: 'series-1',
        data: [this.correctAns, this.uncorrectAns]
      }
    ]
  }
}

    Demo ~ https://jsfiddle.net/ynLfabdz/

    Given you seem to be treating results as an array, you should initialise it as such instead of an empty string, ie

    results: [], // not ''