I'm just getting started to VueJS and I'm trying to create a very simple page where a pie chart with some data is shown.
Right now, I managed to display the chart using example data, but now I would like to populate the chart with data retrieved from an API call on my backend http://127.0.0.1:8000/user/getamount
.
Here's the code:
chart.js
import Vue from "vue/dist/vue.js";
import Vuex from "vuex";
import storePlugin from "./vuex/vuex_store_as_plugin";
import App from './App.vue'
import HighchartsVue from "highcharts-vue";
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(Vuex);
Vue.use(storePlugin);
Vue.config.productionTip = false;
Vue.use(HighchartsVue);
Vue.use(VueAxios, axios)
new Vue({
el: "#app",
render: h => h(App),
});
App.vue
<template>
<div>
<highcharts class="hc" :options="chartOptions" ref="chart"></highcharts>
</div>
</template>
<script>
export default {
data() {
return {
chartOptions: {
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 76.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}],
}
};
}
};
</script>
I just got to started to Vue so a lot of stuff is not clear yet, but where am I supposed to perform the API request here? I've seen a lot of examples where axios is used to call an API and show data on the page, but in this case I need data on my component, since the chart it's there. Should I just perform the call from the component? Or am I missing something?
data()
add a hook likemounted() {}
to make the API call inside it