Populate chart data in laravel using vue axios and fusioncharts

Question

I want to populate my charts using the data from the database with axios. Im new to front-end and vue. The documentations for me is very tricky for now. Thats why ask this question here. I am not familiar with the syntax of charts yet.

Graph.vue

<template>
    <div>
        <div id="chart-container">
            <fusioncharts :type="type" :width="width" :height="height" :dataFormat="dataFormat"  :datasource="datasource">
            </fusioncharts>
        </div>
    </div>
</template>

<script> 
import Vue from 'vue';
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
import Column2D from 'fusioncharts/fusioncharts.charts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
Vue.use(VueFusionCharts, FusionCharts, Column2D, FusionTheme);
export default {
    name: 'app',
    data() {
        return {
            "type": "doughnut2d",
            "renderAt": "chart-container",
            "width": "550",
            "height": "350",
            "dataFormat": 'json',
            "datasource": {
                "chart": {
                    "caption": "Number of visitors in the last 3 days", "subCaption": "Bakersfield Central vs Los Angeles Topanga", "theme": "fusion"
                }
                ,
                "data": [ {
                    "label": "Mon", "value": "15123"
                }
                ,
                {
                    "label": "Tue", "value": "14233"
                }
                ,
                {
                    "label": "Wed", "value": "25507"
                }
                ]
            }
        }
    },
    methods: {
        getData(){
             if(this.$gate.isAdmin()){
                 axios.get("api/user").then(({ data }) => (this.users = data));
            }
        }
    },
    created(){
        this.getData();
    }
}

</script>

Answer 1

data": [ {"label":$label, "value":$value } ]

whereas $label and $value are both arrays.

Answer 2

Remove the static data and replace it with this line:

"data": [{
    "label": "Total Users",
    "value": this.users
}]

And add your axios , must be like this:

getdata(){
    axios.get('api/graphs')
        .then(res=>{
            this.users = res.data;
            this.dataSource.data[0].value = this.users
         })
}

In that way, the data attribute of the chart will now get the data from your api.