Chartjs-Vue-chartjs cannot display the labels and datasets

by

2👍

Your issue is that your API call is async. Thus it may happen, that your chart will be rendered, before your data arrives.

You need to make sure that your data is there.

The easiest approach would be to use a loaded state and v-if on your chart component.

You can check out the example in the docs: https://vue-chartjs.org/guide/#chart-with-api-data

0👍

Based on the response that is coming back there are several errors when processing the data.

.then(response => {
  // let results = response.data.data <- does not exist
  let results = response.data

  // These keys do not exist on your response date_input, number_of_morality, chicken_age
  // let dateresult = results.map(a => a.date_input)
  // let mortalityresult = results.map(a => a.number_of_morality)
  // let chickenageresult = results.map(a => a.chicken_age)

  // this.date_input = dateresult
  // this.number_of_morality= mortalityresult
  // this.chicken_age= chickenageresult    

  this.datacollection = {
    labels: 'Manually Name Labels', // this.number_of_morality, <- This does not exist on your response
     datasets:[{
       label: 'Mortality',
       backgroundColor: '#f87979',
       data: response.data // this.date_input <- This did not exist on your response
     }]
  }
})

This should render something. However, to fix this properly I would need to see what the DB schema looks like for your Mortality model in Laravel.

You could try updating your controller to:

public function index()

{
    $mortality = Mortality::select('number_of_mortality','date_input','chicken_age')->where('cycle_id', 2)
    ->where(['user_id' => Auth::id()]);

    return response()->json($mortality);
}

But again without seeing the schema, I am not sure that would solve the problem. If you make that change post the updated results of the response in chrome dev tools

0👍

You are not mounting props in reportMortalityLineChart.js
Example:

props: {
    // eslint-disable-next-line vue/require-default-prop
    chartData: {
        type: Array,
        required: false
    },
    chartLabels: {
        type: Array,
        required: true
    }
    },

mounted () {
        this.renderChart({
        labels: this.chartLabels,
        datasets: [
          {
            label: 'downloads',
            borderColor: '#249EBF',
            pointBackgroundColor: 'rgba(0,0,0,0)',
            borderWidth: 1,
            data: this.chartData
          }
        ]
      }, this.options)
    }

Leave a comment