Loading data from server and displaying

Expected Behavior

In the example for Reactive Data in the docs, when implemented, you have to click the “Randomize” button to trigger the fillData function and get content displayed in the graph.

Actual Behavior

I’m looking for a way (as I serve the content to display from an API) to display the data as soon as the component gets a response from my API.

I tried to do the usual Vue 2.0 nextTick to call the fillData function when the component is mounted

mounted () {
      this.$nextTick(function () {
        this.fillData;
      })
    },

Below is the code of my component (slightly adapted to match my API call), of course it works perfectly when I click the “Randomize” button but I don’t want to have to click this button for each and every graph in my “Dashboard” component (several graphs in this component).

<template>
    <div>
      <line-chart :chart-data="datacollection"></line-chart>
      <button @click="fillData()">Randomize</button>
    </div>
</template>

<script>
  import LineChart from './LineChart.js'

  export default {
    components: {
      LineChart
    },
    data () {
      return {
        datacollection: null
      }
    },
    mounted () {
      this.$nextTick(function () {
        this.fillData;
      })
    },
    methods: {
      fillData () {
        this.$http.get('/api/data/line/scenarios_by_day')
            .then(response => {
            this.datacollection = response.data;
        });
      },
    }
  }
</script>

Thank you in advance for your help !

Environment

• vue.js version: <version here>
• vue-chart.js version: <version here>
• npm version: <version here>

[yomete]

Hi @cdubant

I recently had to implement something like this and I was kinda stuck. Here’s what I did (with help from Vuex);

First thing I did was store what I needed from the API call in Vuex so I could pretty much access it anywhere. Then I wrote a computed object that returns the the data in Vuex and uses it to build the chart; something like this

      datasetsfull () {
        return {
          labels: store.state.chartdays,
          datasets: [
            {
              label: 'Time Signed In',
              backgroundColor: '#40CF97',
              data: store.state.charttimes
            }
          ]
        }
      },
      chartdays () {
        return store.state.chartdays
      },
      charttimes () {
        return store.state.charttimes
      }
    }

And then in my template I simply used the datasetsfull function; something like this; <reports-charts :chart-data="datasetsfull" :height="400" :options="{responsive: true, maintainAspectRatio: false}"></reports-charts>

I hope that was useful to you 😄

[apertureless]

Well, you don’t need to use Vue’s $nextTick() function, because vue does not render the chart. The chart gets renderes by chart.js on a canvas.

You can simply make your api call in the mounted() hook.

However your response.data need to have a valid chart.js datatructure.

But keep in mind the limitations to the watcher. There are also some issues related to this: #44 #34