I'm using Quasar VueJs for the first time and I want to inject my API data to ApexChart,
I've tried many solutions but nothing happend and I don't see any special propriety in Apex documentation to do
here is the documentation: https://apexcharts.com/
My code:
<apexchart type="line" :options="options" :series="series"></apexchart>
export default {
components: { apexchart: VueApexCharts },
data: function () {
return {
prix: [],
options: {
stroke: {
curve: 'stepline'
},
chart: {
type: 'line',
id: 'vuechart',
height: 'auto',
dropShadow: {
enabled: true,
enabledOnSeries: undefined,
top: 0,
left: 0,
blur: 3,
color: '#000',
opacity: 0.35
},
toolbar: {
show: true,
tools: {
download: true,
selection: true,
zoom: true,
zoomin: true,
zoomout: true,
pan: true,
reset: true | '<img src="/static/icons/reset.png" width="20">',
customIcons: []
}
}
},
dataLabels: {
enabled: true
},
xaxis: {
categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
},
title: {
text: 'Client Data Graph',
align: 'left',
margin: 10,
offsetX: 0,
offsetY: 0,
floating: false,
style: {
fontSize: '14px',
fontWeight: 'bold',
fontFamily: undefined,
color: '#263238'
}
}
},
series: [{
name: 'series-1',
data: this.prix
}],
strips: {
trip: [],
client: []
}
}
},
methods: {
getUsers () {
axios.get('/parse/classes/Trip')
.then((response) => {
this.strips.client = response.data.results
})
.catch((e) => {
})
},
getClientsData () {
axios.get('/parse/classes/Trip')
.then((response) => {
response.data.results.forEach(element => {
this.prix.push(element.price) // I'm using that for updating series
})
})
.catch((e) => {
console.log(e)
})
}
},
mounted () {
this.getUsers()
this.getClientsData()
}
}
Rq: My data is just prix = [3000,1000];
but it didn't updated.
thank U guys.