How to build data from my API to Apx Chart

273 views Asked by At

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.

0

There are 0 answers