How to get chart data from REST GET to appear during initialisation for this vue component?

Question

I modified an apexcharts Vue component BarChart.vue which is from https://github.com/apexcharts/vue3-apexcharts

I want to retrieve chart data by consuming a REST GET API and insert data into series.

The script portion of this component is as follows;

<script>
/* eslint-disable */

export default {
  name: "BarExample",
  data: dataInitialisation,
  methods: {
    updateChart,
  },
};

async function makeGetRequest(url) {
  const axios = require("axios");
  //let res = await axios.get("http://localhost:8080/vue3-apexcharts/data.json");
  let res = await axios.get(url);

  return res.data;
}

function dataInitialisation() {
  let init_data = {
    chartOptions: {
      chart: {
        type: "bar",
        stacked: true,
        animations: {
          enabled: true, //disabling will speed up loading
        },
      },
    },
    series: {},
  };

  var url = "http://localhost:8080/vue3-apexcharts/data.json";
  const axios = require("axios");

  var data;

  makeGetRequest(url).then( 
                        (data) => 
                        {
                            console.log(JSON.stringify(data));
                            init_data.series = data;
                        }
                     );

  return init_data;
}

I verified that there is nothing wrong with the code for getting the data from REST GET by printing out the data using console.log().

I did some research and it seems I need to use mounted() to get the data to appear on the chart. If this is correct, how do I modify the code to use mounted() to do so?

I am using vue 3.

Answer 1

I will answer my own question. The key to the answer comes from the mounted event available in the vue-apexcharts library.

https://apexcharts.com/docs/options/chart/events/

I used this article here as a guide on how to use events in vue3-apexcharts.

https://kim-jangwook.medium.com/how-to-use-events-on-vue3-apexcharts-2d76928f4abc

<template>
  <div class="example">
    <apexchart
      width="500"
      height="350"
      type="bar"
      :options="chartOptions"
      :series="series"
      @mounted="mounted"
    ></apexchart>
  </div>
</template>

<script>
async function makeGetRequest(url) {
  const axios = require("axios");
  //let res = await axios.get("http://localhost:8080/vue3-apexcharts/data.json");
  let res = await axios.get(url);

  return res.data;
}

export default {
  name: "BarExample",
  data: dataInitialisation,
  methods: {
    updateChart,
    mounted: function(event, chartContext, config) {        
        console.log("mount event");
        var url = "http://localhost:8080/vue3-apexcharts/data.json";
        const axios = require("axios");

        var data;

        makeGetRequest(url).then((data) => {              
          this.series = data;
        });
    },
  },
};
</script>

Answer 2

Couple of things.

Never define functions and logic outside the Vue api inside a Vue component. What's defined in data, should be defined in data every doc that you will encounter does that the same way. Data Properties and Methods.

Answering your question yes, you need a lifecycle hook for fetching the data from the api when the component mounts, you can read more about lifecycle hooks in this article

// From this line until the end just delete everything.
// Define `methods` and `data` where they belong.
function dataInitialisation() {
  let init_data = {
    chartOptions: {

Here is a refactored example:

<script>
import axios from 'axios'

export default {
  name: 'BarExample',
  data() {
    return {
      url: 'http://localhost:8080/vue3-apexcharts/data.json',
      chartOptions: {
        chart: {
          type: 'bar',
          stacked: true,
          animations: {
            enabled: true
          }
        }
      },
      series: {}
    }
  },
  async mounted() {
    await this.makeGetRequest()
  },
  methods: {
    updateChart, // Where is this method defined?
    async makeGetRequest() {
      const { data } = await axios.get(this.url)
      this.series = data
    }
  }
}
</script>