Make Chartkick wait for data to populate from Firebase before rendering chart

Question

I'm using chartkick in my Vue project. Right now, the data is loading from Firebase after the chart has rendered, so the chart is blank. When I change the code in my editor, the chart renders as expected, since it's already been retrieved from Firebase. Is there a way to make chartkick wait for the data to load before trying to render the chart? Thanks!

Line-Chart Component:

<template>
  <div v-if="loaded">
    <line-chart :data="chartData"></line-chart>
  </div>
</template>

<script>
export default {
  name: 'VueChartKick',
  props: ['avgStats'],
  data () {
    return {
      loaded: false,
      chartData: this.avgStats
    }
  },
  mounted () {
    this.loaded = true
  }
}
</script>

Parent:

<template>
  ...
  <stats-chart v-if="avgStatsLoaded" v-bind:avgStats="avgStats" class="stat-chart"></stats-chart>
  <div v-if="!avgStatsLoaded">Loading...</div>
  ...
</template>

<script>
import StatsChart from './StatsChart'

export default {
  name: 'BBall',
  props: ['stats'],
  components: {
    statsChart: StatsChart
  },
  data () {
    return {
      avgStatsLoaded: false,
      avgStats: []
    }
  },
  computed: {
    sortedStats: function () {
      return this.stats.slice().sort((a, b) => new Date(b.date) - new Date(a.date))
    }
  },
  methods: {
    getAvgStats: function () {
      this.avgStats = this.stats.map(stat => [stat.date, stat.of10])
      this.avgStatsLoaded = true
    }
  },
  mounted () {
    this.getAvgStats()
  }
}

@jacky - sure, the child component (now renamed to line-chart) is the line chart component.Thanks for looking! — h.and.h

jacky jacky · Accepted Answer · 2018-05-04T01:39:34

modify your code of StatsChart component: you may use props directly

<template>
  <div v-if="loaded">
    <line-chart :data="avgStats"></line-chart>
  </div>
</template>

export default {
  name: 'VueChartKick',
  props: ['avgStats'],
  data () {
    return {
      loaded: false,
    }
  },
  mounted () {
    this.loaded = true
  }
}

Make Chartkick wait for data to populate from Firebase before rendering chart

1 Answers