How to create a dynamic graph.js with vuejs and quasar getting from axios

Viewed 199

I am trying to make a component using graph.js and get data from axios my Component is CashFlow.vue:

<template>
  <q-card class="bg-white full-width">
    <q-card-section class="bg-primary">
      <div class="row items-center no-wrap">
        <div class="col">
          <div class="text-h6 text-white text-center">{{title}}</div>
        </div>
      </div>
    </q-card-section>
    <q-card-section>
      <canvas id="cash-flow-graph"></canvas>
    </q-card-section>
  </q-card>
</template>

<script>
import Chart from 'chart.js'
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    data: {
      type: Object,
      default: null

    },
    options: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
    }
  },
  mounted () {
    this.createChart('cash-flow-graph')
  },
  methods: {
    createChart (chartId) {
      const ctx = document.getElementById(chartId)
      const myChart = new Chart(ctx, {
        type: 'line',
        data: { ...this.data },
        options: { ...this.options }
      })
      return { ...myChart }
    }
  }
}
</script>

<style>
</style>

So I draw this component in the Main Component:

import CashFlow from 'src/components/charts/CashFlow'

<cash-flow  :data="cashFlow" :options="optionsLine" title="This is the title" v-if ="loadCash" :key="cashKey"></cash-flow>

and y try call the data and fill in the mounted of the main component:

async loadCashFlow () {
      await this.fetchCashFlowData(formatYMD(javaScriptDateToString(this.initDate)))
      this.cashFlow = { ...this.dashboardCrud.getStore('getCashFlow') }
      this.cashKey++
      this.loadCash = true
    }

I am getting the data and the graph is working but I have this error:

> RangeError: Maximum call stack size exceeded
>     at Function.keys (<anonymous>)
>     at _traverse (vue.runtime.esm.js?5593:2130)
>     at _traverse (vue.runtime.esm.js?5593:2132)
>     at _traverse (vue.runtime.esm.js?5593:2128)
>     at _traverse (vue.runtime.esm.js?5593:2132)
>     at _traverse (vue.runtime.esm.js?5593:2132)
>     at _traverse (vue.runtime.esm.js?5593:2132)
>     at _traverse (vue.runtime.esm.js?5593:2132)
>     at _traverse (vue.runtime.esm.js?5593:2132)
>     at _traverse (vue.runtime.esm.js?5593:2132)
0 Answers
Related