how to implment chartkick dynamically with laravel and vue js-CodePudding

i am trying to implement chartkick with laravel inside the vue component i am trying to loop through all data inside the table using vue component

i have created an api which fetch all the data from the database but i am trying to loop through date and quantity using chartkick in vue js component for example if the date is 01-05-2022 on this day the quantity is 14

<template>
    <div>
     <div >
         <div >
             <div  >
                 <line-chart :data="{'2021-01-01':data.quty,'2021-02-01':12,'2021-03-01':14}"
                 ></line-chart>

                </div>
         </div>
     </div>


    </div>
</template>
<script>

export default{
    data(){
        return{
            data:{},
        }
    },
    mounted(){
        axios.get('/data').then(response=>{
            this.data=response.data;

        })
    }
}
</script>

the documentation only shows the Static data but i want to pass dynamic data which i am fetching through api . i don't know how to use foreach loop inside the chartkick can anyone guide me how i can loop my value and show them inside the component . it is showing static data which is passed in this data object but how i can load api data and load it inside chart kick

<line-chart :data="{'2021-01-01':7,'2021-02-01':12,'2021-03-01':14}"
                 ></line-chart>

i am using vue js 2

CodePudding user response：

Give this one a shot and also make sure you have chartkick imported somewhere.

<template>
    <div>
     <div >
         <div >
             <div  >
                 <line-chart :data="chartData"
                 ></line-chart>

                </div>
         </div>
     </div>


    </div>
</template>
<script>

export default{
    data(){
        return{
            chartData:{},
        }
    },
    mounted(){
        axios.get('/data').then(response=>{
            this.chartData=response.data;

        })
    }
}
</script>

For the data conversion, try

    mounted(){
        axios.get('/data').then(response=>{
            let entries = {};
            response.data.forEach(val => {
                entries[val.date] = val.quty;
            })
            this.chartData=entries;
        })
    }